How To Use let, const and var in JavaScript.
Tags: webdev, javascript, programming, codenewbie
Published: 2021-05-10 21:21:32


In Programming, variables are containers used to store data. 

For example, when you type in your name into a field on a website, that data is stored in a variable. When you search for a particular item on a website, the returned information is first stored in a variable before displayed to you.

The assignment operator is used to “assign” data to a variable. It then becomes a value at that point.

``` javascript
var name = "Kingsley";
```

In JavaScript, there are three keywords used to define variables. They are let, const and var. Before 2015, using the var keyword was the only way to declare a JavaScript variable.

However, the advent of EmcaScript 2016 (ES16) came with two other variable keywords: let and const.

Before we proceed to understand these keywords, we have to understand three concepts in variables:


- Global Scope: A variable declared globally (outside of a function) has a global scope and can be accessed anywhere across the entire program.

``` javascript
var name = "Kingsley";

// global scope
   function myFunction() {
   //code goes here
   }
```

- Function Scope: A variable declared inside a function (i.e locally) has a function scope

``` javascript
// global scope
   function Function() {
   var name = "Kingsley";
   // function scope
   }
```

Now that we have the various scopes defined, let’s define the three variable keywords and what variable scoping they allow:

- FOR BLOCK SCOPING

#### Var
Variables declared with the var keyword does not have block scoping. That is, any variable declared within a block can be accessed outside.

#### Let
Variables defined with Let can have block scoping. That is, any variable declared within a block {} cannot be accessed outside of that block.

#### Const
Like let, variables defined with const can have block scoping. That is, any variable declared within a block {} cannot be accessed outside of that block.

**const** and **let** both have **block scoping.** 

``` javascript
var name = “Kingsley”;
// Here name is Kingsley
{
  let name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley
```

``` javascript
var name = “Kingsley”;
// Here name is Kingsley
{
  const name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley
```

**Also, let and var behave differently when a redeclaration is made inside the block.**

``` javascript
var name = “Kingsley”;
// Here name is Kingsley
{
  var name = “Peter”;
  // name is Peter inside this block
}
// Here name is Peter
```

``` javascript
var name = “Kingsley”;
// Here name is Kingsley
{
  let name = “Peter”;
  // name is Peter inside this block
}
// Here name is Kingsley
```

A variable defined with const cannot be reassigned another value:

``` javascript
const name = “Kingsley”;
name = “Peter”;      // This will give an error
```


> 
N/B: Arrays and Objects defined with const can have their properties changed.  The immutability only pertains to primitive values like numbers and strings.

You can create an object with const:

``` javascript
const writer = {name:"Kingsley", age:"21", sex:"male"};
```

You CAN change a property:

``` javascript
writer.name = "Peter";
```

You can add a new property:

``` javascript
writer.surname = "Ubah";
```

However, you cannot reassign a complete object:

``` javascript
const writer = {name:"Kingsley", age:"21", sex:"male"};
writer = {name:"Peter", age:"25", sex:"male"}; //error
```

The same for an array of items:

``` javascript
const writers = ["Kingsley", "Peter", "Joe"];
writers = ["Sam", "Clark", "Kingsley"];    // error
```


> 
N/B: If you're looking to see this new ES6 Syntax in action, I'll highly recommend  [HTML To React By Sleepless Yogi](https://gumroad.com/a/834147443) 

**Inside loops**

Var and let also behave differently in loops.

``` javascript
var i = 5;
for (var i = 0; i < 10; i++) {
  // code
}
// Here i is 10

``` 

``` javascript
let i = 5;
for (let i = 0; i < 10; i++) {
  // code
}
// Here i is 5
```

- FOR FUNCTION SCOPE

Variables declared with the let keyword has function scoping. That is, the variable is not accessible outside the scope.

``` javascript
// name can’t be accessed by this global code
function Foo() {
var name = "Kingsley";
// func scope
}
```

- FOR GLOBAL SCOPE

Variables declared with **var** keyword has a global scope. It is accessible from all over the JavaScript code (and can be accessed with the window object).

Variables declared with **let** keyword has a global scope. However, it can’t be accessed with the windows object.

**These two keywords also behave differently when a declaration is made within the global scope:**

``` javascript
var x = 1;

// Now x is 1
 
var x = 5;

// Now x is 5
```

The above snippet shows that redeclaration within the same scope is allowed with the var keyword.

``` javascript
let x = 1;       // Allowed
let x = 5;       // Not allowed

{
  let x = 2;   // Allowed
  let x = 3;   // Not allowed
}
```

The above snippet shows that redecleration within the same scope or same block is not allowed with the let keyword.

``` javascript
var x = 1;       // Allowed
let x = 5;       // Not allowed

{
  var x = 2;   // Allowed
  let x = 3   // Not allowed
}
``` 

The above snippet shows that while you can successfully redeclare a variable with in another block with var, you can’t with let.

``` javascript
var x = 1;       // Allowed
let x = 5;       // Not allowed

{
  var x = 2;   // Allowed
  let x = 3   // Not allowed
}
```

The above snippet shows that while you can successfully redeclare a variable with in another block with var, you can’t with const.

``` javascript
 let x = 1;       // Allowed

{
  let x = 5;   // Allowed
}

{
  let x = 2;   // Allowed
}
```

The above snippet shows that redeclaration is another scope or another block is possible with let.

``` javascript
const x = 1;       // Allowed

{
  const x = 5;   // Allowed
}

{
  const x = 2;   // Allowed
}
```

The above snippet shows that redeclaration is another scope or another block is possible with const.

Variable scopes is crucial for every sofware developer to grasp.

**If you enjoyed this article and want to support me, feel free to buy me my favourite fruit:**

<a href="https://www.buymeacoffee.com/ubahthebuilder"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a pineapple&emoji=🍍&slug=ubahthebuilder&button_colour=e0b51a&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00"></a>

**Thank you for your time and see you soon!**