Blog
JavaScript

Modern JavaScript with Let Declaration

Block-Scoped Variables in ES6

The let keyword was introduced in ES6 (2015)
Variables declared with let have Block Scope
Variables declared with let must be Declared before use
Variables declared with let cannot be Redeclared in the same scope

Block Scope

Before ES6 (2015), JavaScript did not have Block Scope. JavaScript had Global Scope and Function Scope. ES6 introduced the two new JavaScript keywords: let and const. These two keywords provided Block Scope in JavaScript.

Example: Variables declared inside a { } block cannot be accessed from outside the block:

javascript

Global Scope

Variables declared with the var always have Global Scope. Variables declared with the var keyword can NOT have block scope:

Example: Variables declared with var inside a { } block can be accessed from outside the block:

javascript

Cannot be Redeclared

Variables defined with let can not be redeclared. You can not accidentally redeclare a variable declared with let:

javascript

Variables defined with varcan be redeclared.

javascript

Redeclaring Variables

Redeclaring a variable using the var keyword can impose problems. Redeclaring a variable inside a block will also redeclare the variable outside the block:

javascript

Redeclaring a variable using the let keyword can solve this problem. Redeclaring a variable inside a block will not redeclare the variable outside the block:

javascript

Difference Between var, let and const

ScopeRedeclareReassignHoistedBinds this
varNoYesYesYesYes
letYesNoYesNoNo
constYesNoNoNoNo

What is Good?

  • let and const have block scope.
  • let and const can not be redeclared.
  • let and const must be declared before use.
  • let and const does not bind to this.
  • let and const are not hoisted.

What is Not Good?

  • var does not have to be declared.
  • var is hoisted.
  • var binds to this.

Browser Support

The let and const keywords are not supported in Internet Explorer 11 or earlier. The following table defines the first browser versions with full support:

Chrome 49Edge 12Firefox 36Safari 11Opera 36
Mar, 2016Jul, 2015Jan, 2015Sep, 2017Mar, 2016

Redeclaring

Redeclaring a JavaScript variable with var is allowed anywhere in a program:

javascript

With let, redeclaring a variable in the same block is NOT allowed:

javascript

Redeclaring a variable with let, in another block, IS allowed:

javascript

Let Hoisting

Variables defined with var are hoisted to the top and can be initialized at any time.

Meaning: You can use the variable before it is declared:
javascript

If you want to learn more about hoisting, study the chapter JavaScript Hoisting. Variables defined with let are also hoisted to the top of the block, but not initialized.

Meaning: Using a let variable before it is declared will result in a “ReferenceError”:
javascript
avatar

0 Comments

No comments

Leave a Reply

avatar

Recent Post

Related Topics

    Feeds

      Don't miss what's next 👋

      Enjoyed this content? Leave your email to get notified when we publish new insights, tutorials, and updates — no spam, ever.