Tutorial: Javascript Let And Const
Tags: javascript, programming, webdev, codenewbie
Published: 2022-01-20 09:36:47

---
title: Tutorial: Javascript Let And Const
published: True
date: 2021-01-22 23:46:37 UTC
tags: ["javascript", "Programming", 'webdev', 'codenewbie']
canonical_url: https://www.devwares.com/blog//javascript-let-and-const
---

## JavaScript let and Const

Let and const are two essential new JavaScript keywords introduced in ES2015. In JavaScript, these two keywords provide Block Scope variables (and constants).


In ES2015, there were only two forms of scope in Global Scope and Function Scope.

## Global Scope

Global variables (those defined outside of any function) have Global Scope. In a JavaScript program, global variables can be accessed from anywhere. The let keyword declares global variables that are not part of the window object.

\ ***\*Code:\*\***

```javascript
var carName = 'Volvo';

// code here can use carName

function myFunction() {
  // code here can also use carName
}

```

## Function Scope

Function Scope applies to variables specified locally (inside a function). Local variables are only accessible from within the function in which they were declared.

**Code:**

```javascript
// code here can NOT use carName
function myFunction() {
  var carName = 'Volvo';
  // code here CAN use carName
}
// code here can NOT use carName

```

## JavaScript Block Scope

Block Scope cannot be applied to variables specified with the var keyword. Variables specified within a block {} can be accessed from the outside.

**Code:**

```javascript
{
  let x = 2;
}
// x can NOT be used here

```

## Redeclaring Variables

Using the var keyword to redeclare a variable can cause issues. When you redeclare a variable inside a block, you're also redeclaring it outside the block:

**Code:**

```javascript
var x = 10;
// Here x is 10
{
  var x = 2;
  // Here x is 2
}
// Here x is 2

```

This difficulty can be solved by using the let keyword to redeclare a variable. If you redeclare a variable inside a block, it will not be redeclared outside the block:

**Code:**

```javascript
var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10

```

## Loop Scope

**Using var in a loop:**

**Code:**

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

```

**Using let in a loop:**

**Code:**

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

```

The variable declared in the loop redeclares the variable outside the loop in the first example, which is done with var. The variable declared in the loop is not redeclared outside the loop in the second example, because let is used. The I variable will only be visible within the loop if let is used to declare it.

## Hoisting

Var variables are hoisted to the top and can be initialized at any time (for more information on hoisting, see our Hoisting Chapter). Meaning: Before the variable is declared, you can use it: This is okay

**Code:**

```javascript
carName = 'Volvo';
alert(carName);
var carName;

```

Variables declared with let are hoisted to the top of the block but not initialized, which means that the block of code is aware of the variable but it cannot be used until it is declared. A ReferenceError will occur if you use a let variable before it has been declared. From the beginning of the block until it is declared, the variable is in a "temporal dead zone".

This will give referenceError

**Code:**

```javascript
carName = 'Volvo';
let carName;

```

**JavaScript Const:**"Const" variables behave similarly to let variables, with the exception that they cannot be reassigned:

**Code:**

```javascript
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error.

```

## Block Scope

When it comes to Block Scope, declaring a variable with "const" is comparable to letting. In this example, the x defined inside the block differs from the x declared outside the block.

**Code:**

```javascript
var x = 10;
// Here x is 10
{
  const x = 2;
  // Here x is 2
}
// Here x is 10

```

**Assigned when Declared:** When declaring const variables in JavaScript, they must be given a value:

Incorrect code

**Code:**

```javascript
const PI;
PI = 3.14159265359;

```

Correct code

**Code:**

```javascript
const PI = 3.14159265359;

```

The keyword const can be deceiving. It does not provide a constant value definition. It establishes a reference to a value that is constant. We can't change constant primitive values because of this, but we can change the characteristics of constant objects. We can't modify a primitive value that has been assigned to a constant:

**Code:**

```javascript
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error

```

A constant object's properties can be changed. A constant object, on the other hand, cannot be reassigned.

**Code:**

```javascript
// You can create a const object:
const car = { type: 'Fiat', model: '500', color: 'white' };
// You can change a property:
car.color = 'red';

// You can add a property:
car.owner = 'Johnson';

```

**Code:**

```javascript
Const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR

```

A constant array can also have its elements changed, but it cannot be reassigned.

**Code:**

```javascript
// You can create a constant array:
const cars = ['Saab', 'Volvo', 'BMW'];

// You can change an element:
cars[0] = 'Toyota';

// You can add an element:
cars.push('Audi');

```

Wrong code

**Code:**

```javascript
const cars = ['Saab', 'Volvo', 'BMW'];
cars = ['Toyota', 'Volvo', 'Audi']; // ERROR

```

It is not permitted to redeclare or reassign an existing var or let variable to const in the same scope or block:

**Code:**

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

```

It's not possible to redeclare or reassign an existing const variable in the same scope or block:

**Code:**

```javascript
const x = 2; // Allowed
const x = 3; // Not allowed
x = 3; // Not allowed
var x = 3; // Not allowed
let x = 3; // Not allowed

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

```

It is permissible to redeclare a variable with const, in a different scope, or in a different block:

**Code:**

```javascript
const x = 2; // Allowed
{
  const x = 3; // Allowed
}
{
  const x = 4; // Allowed
}

```

**Hoisting**

Variables specified using var are pushed to the top of the stack and can be initialized at any moment. Before it is declared, you can utilize the variable: This is alright

**Code:**

```javascript
carName = 'Volvo';
alert(carName);
var carName;

```

Although the variable is recognized by the block of code, it cannot be used until it is defined. From the start of the block until its declaration, the variable is in a "temporal dead zone." It is a syntactic error to use a const variable before it is declared, hence the code will not run.

This code cannot be executed.

**Code:**

```javascript
carName = "Volvo";
const carName;

```

[![Contrast Bootstrap UI Kit](https://www.devwares.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)


## Resources

You may find the following resources useful:

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)
- [ How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)
- [Tutorial: Javascript Arrays](https://www.devwares.com/blog/javascript-arrays)
- [Tutorial: Javascript Arrow Functions](https://www.devwares.com/blog/javascript-arrow-functions)
- [Tutorial: Javascript Classes](https://www.devwares.com/blog/javascript-classes)

- [Installation](https://www.devwares.com/docs/contrast/angular/Installation/)
- [Accordion](https://www.devwares.com/docs/contrast/angular/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/angular/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/angular/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/angular/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/angular/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/angular/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/angular/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/angular/components/buttonGroup/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/angular/components/buttonToolbar/)
- [Button](https://www.devwares.com/docs/contrast/angular/components/buttons/)
- [Checkbox](https://www.devwares.com/docs/contrast/angular/components/checkbox/)
- [Card](https://www.devwares.com/docs/contrast/angular/components/card/)
- [Collapse](https://www.devwares.com/docs/contrast/angular/components/collapse/)
- [DropDown](https://www.devwares.com/docs/contrast/angular/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/angular/components/footer/)
- [InputGroup](https://www.devwares.com/docs/contrast/angular/components/inputgroup/)
- [Iframe](https://www.devwares.com/docs/contrast/angular/components/iframe/)
- [Modal](https://www.devwares.com/docs/contrast/angular/components/modal/)
- [Mask](https://www.devwares.com/docs/contrast/angular/components/mask/)
- [Multiselect](https://www.devwares.com/docs/contrast/angular/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/angular/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/angular/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/angular/components/panels/)
- [Progress](https://www.devwares.com/docs/contrast/angular/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/angular/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/angular/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/angular/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/angular/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/angular/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/angular/components/spinner/)
- [Switch](https://www.devwares.com/docs/contrast/angular/components/switch/)
- [Stepper](https://www.devwares.com/docs/contrast/angular/components/stepper/)
- [Icon](https://www.devwares.com/docs/contrast/angular/components/icon/)
- [Input](https://www.devwares.com/docs/contrast/angular/components/input/)
- [ListGroup](https://www.devwares.com/docs/contrast/angular/components/listgroup/)
- [Forms](https://www.devwares.com/docs/contrast/angular/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/angular/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/angular/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/angular/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/angular/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/angular/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/angular/table/datatables/)
- [Editable Table](https://www.devwares.com/docs/contrast/angular/table/editabletable/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/angular/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/angular/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/angular/widgets/)