YouTipJs Let Const
# JavaScript let and const
### ECMAScript 2015 (ECMAScript 6)
ES2015 (ES6) introduced two important new JavaScript keywords: **let** and **const**.
Variables declared with `let` are only effective within the code block where the `let` command is located.
`const` declares a read-only constant. Once declared, the value of the constant cannot be changed.
Before ES6, JavaScript only had two types of scope: **global variables** and **local variables within functions**.
* * *
## Global Variables
Variables declared outside of a function have a global scope:
## Example
```javascript
var carName = "Volvo";
function myFunction() {
// code
}
[Try it yourself »](#)
Global variables can be accessed from anywhere in a JavaScript program.
* * *
## Local Variables
Variables declared inside a function have a local scope (within the function):
## Example
```javascript
function myFunction() {
var carName = "Volvo";
// code
}
[Try it yourself »](#)
Variables declared with `var` inside a function can only be accessed within that function. If `var` is not used, it becomes a global variable.
* * *
## JavaScript Block Scope
Variables declared with the `var` keyword do not have block scope characteristics; they can still be accessed outside the `{}`.
```javascript
{
var x = 2;
}
// Here, the x variable can be used
Before ES6, there was no concept of block scope.
ES6 allows the use of the `let` keyword to implement block scope.
Variables declared with `let` are only effective within the code block **`{}`** where the `let` command is located and cannot be accessed outside of **`{}`**.
```javascript
{
let x = 2;
}
// Here, the x variable cannot be used
* * *
## Redeclaring Variables
Using the `var` keyword to redeclare variables can cause problems.
Redeclaring a variable inside a block will also redeclare the variable outside the block:
## Example
```javascript
var x = 10;
{
var x = 2;
}
[Try it yourself »](#)
The `let` keyword solves this problem because it is only effective within the code block **`{}`** where the `let` command is located.
## Example
```javascript
var x = 10;
{
let x = 2;
}
[Try it yourself »](#)
### Browser Support
Internet Explorer 11 and earlier versions do not support the `let` keyword.
The following table lists the minimum version numbers of browsers that support the `let` keyword.
| | | | | |
| --- | --- | --- | --- | --- |
| Chrome 49 | IE / Edge 12 | Firefox 44 | Safari 11 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Jan, 2015 | Sep, 2017 | Mar, 2016 |
* * *
## Loop Scope
Using the `var` keyword:
## Example
```javascript
var i = 5;
for (var i = 0; i < 10; i++) {
// code
}
[Try it yourself »](#)
Using the `let` keyword:
## Example
```javascript
var i = 5;
for (let i = 0; i < 10; i++) {
// code
}
[Try it yourself »](#)
In the first example, the **`var`** keyword is used, and the variable it declares is global, including both inside and outside the loop body.
In the second example, the **`let`** keyword is used, and the scope of the variable it declares is only within the loop body. The variable outside the loop body is unaffected.
* * *
## Local Variables
Variables declared with the **`var`** and **`let`** keywords inside a function body are somewhat similar.
Their scope is **local**:
```javascript
// Using var
function myFunction() {
var carName = "Volvo"; // Local scope
}
// Using let
function myFunction() {
let carName = "Volvo"; // Local scope
}
* * *
## Global Variables
Variables declared with the **`var`** and **`let`** keywords outside a function body or code block are also somewhat similar.
Their scope is **global**:
```javascript
// Using var
var x = 2; // Global scope
// Using let
let x = 2; // Global scope
* * *
## Using Global Variables in HTML Code
In JavaScript, global scope applies to the JavaScript environment.
In HTML, global scope applies to the `window` object.
Global scope variables declared with the **`var`** keyword belong to the `window` object:
## Example
```javascript
var carName = "Volvo";
[Try it yourself »](#)
Global scope variables declared with the **`let`** keyword do not belong to the `window` object:
## Example
```javascript
let carName = "Volvo";
[Try it yourself »](#)
### Redeclaring Variables
Variables declared with the **`var`** keyword can be modified anywhere:
## Example
```javascript
var x = 2;
var x = 3;
[Try it yourself »](#)
Within the same scope or block scope, you cannot use the **`let`** keyword to redeclare a variable declared with the **`var`** keyword:
```javascript
var x = 2; // Legal
let x = 3; // Illegal
{
var x = 4; // Legal
let x = 5 // Illegal
}
Within the same scope or block scope, you cannot use the **`let`** keyword to redeclare a variable declared with the **`let`** keyword:
```javascript
let x = 2; // Legal
let x = 3; // Illegal
{
let x = 4; // Legal
let x = 5; // Illegal
}
Within the same scope or block scope, you cannot use the **`var`** keyword to redeclare a variable declared with the **`let`** keyword:
```javascript
let x = 2; // Legal
var x = 3; // Illegal
{
let x = 4; // Legal
var x = 5; // Illegal
}
The **`let`** keyword can be redeclared and reassigned in different scopes or different block scopes:
```javascript
let x = 2; // Legal
{
let x = 3; // Legal
}
{
let x = 4; // Legal
}
* * *
## Hoisting
In JavaScript, variables defined with the `var` keyword can be declared after they are used, meaning variables can be used before they are declared ((#)).
Variables defined with the `let` keyword cannot be declared after they are used, meaning variables must be declared before they are used.
```javascript
// Here, the carName variable cannot be used
let carName;
* * *
## The const Keyword
`const` is used to declare one or more constants. They must be initialized at the time of declaration, and their value cannot be modified after initialization:
## Example
```javascript
const PI = 3.141592653589793;
PI = 3.14; // Trying to reassign will cause an error
PI = PI + 10; // Trying to reassign will cause an error
[Try it yourself »](#)
Constants defined with `const` are similar to variables defined with `let`:
* Both have block scope
* Neither can have the same name as another variable or function within its scope
There are two key differences:
* Constants declared with `const` must be initialized, while variables declared with `let` do not need to be.
* The value of a constant defined with `const` cannot be changed by reassignment, nor can it be redeclared. The value of a variable defined with `let` can be changed.
```javascript
var x = 10;
// Here, x outputs 10
{
const x = 2;
// Here, x outputs 2
}
// Here, x outputs 10
Constants declared with `const` must be initialized:
```javascript
// Wrong way
const PI;
PI = 3.14159265359;
// Right way
const PI = 3.14159265359;
* * *
## Not Truly Constant
The essence of `const`: A variable defined with `const` is not a constant and is not immutable. It defines a constant reference to a value. An object or array defined with `const` is actually mutable. The following code will not cause an error:
## Example
```javascript
const car = {type:"Fiat", model:"500", color:"white"};
car.color = "red";
car.owner = "Johnson";
[Try it yourself »](#)
However, we cannot reassign a constant object:
## Example
```javascript
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // Trying to reassign will cause an error
[Try it yourself »](#)
The following example modifies a constant array:
## Example
```javascript
const cars = ["Saab", "Volvo", "BMW"];
cars = "Toyota";
cars.push("Audi");
[Try it yourself »](#)
However, we cannot reassign a constant array:
## Example
```javascript
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // Trying to reassign will cause an error
[Try it yourself »](#)
### Browser Support
Internet Explorer 10 and earlier versions do not support the `const` keyword.
The following table lists the minimum version numbers of browsers that support the `const` keyword.
| | | | | |
| --- | --- | --- | --- | --- |
| Chrome 49 | IE / Edge 11 | Firefox 36 | Safari 10 | Opera 36 |
| Mar, 2016 | Oct, 2013 | Feb, 2015 | Sep, 2016 | Mar, 2016 |
### Redeclaring Variables
Variables declared with the **`var`** keyword can be modified anywhere:
## Example
```javascript
var x = 2;
var x = 3;
x = 4;
Within the same scope or block scope, you cannot use the **`const`** keyword to redeclare variables declared with the **`var`** and **`let`** keywords:
```javascript
var x = 2; // Legal
const x = 2; // Illegal
{
let x = 2; // Legal
const x = 2;// Illegal
}
Within the same scope or block scope, you cannot use the **`const`** keyword to redeclare a variable declared with the **`const`** keyword:
```javascript
const x = 2; // Legal
const x = 3; // Illegal
x = 3; // Illegal
var x = 3; // Illegal
let x = 3; // Illegal
{
const x = 2;// Legal
const x = 3;// Illegal
x = 3; // Illegal
var x = 3; // Illegal
let x = 3; // Illegal
}
The **`const`** keyword can be redeclared and reassigned in different scopes or different block scopes:
```javascript
const x = 2; // Legal
{
const x = 3;// Legal
}
{
const x = 4;// Legal
}
### Hoisting
Variables defined with the JavaScript `var` keyword can be declared after they are used, meaning variables can be used before they are declared ((#)).
## Example
```javascript
carName = "Volvo";
var carName;
[Try it yourself »](#)
Variables defined with the `const` keyword cannot be declared after they are used, meaning variables must be declared before they are used.
```javascript
carName = "Volvo"; // Here, the carName variable cannot be used
const carName = "Volvo";