Skip to main content

JavaScript Let

 

let

 

The let keyword was introduced in ES6 (2015).

Variables defined with let cannot be Redeclared.

Variables defined with let must be Declared before use.

Variables defined with let have Block Scope.

Cannot be Redeclared

Variables defined with let cannot be redeclared.

You cannot accidentally redeclare a variable.

With let you can not do this:

Example

let x = "John Doe";

let x = 0;

// SyntaxError: 'x' has already been declared

With var you can:

Example

var x = "John Doe";

var x = 0;

Block Scope

Before ES6 (2015), JavaScript had only Global Scope and Function Scope.

ES6 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope in JavaScript.

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

Example

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

Variables declared with the var keyword can NOT have block scope.

Variables declared inside a { } block can be accessed from outside the block.

Example

{
  var x = 2;
}
// x CAN be used here

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:

Example

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

// Here x is 2

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:

Example

let x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}

// Here x is 10 
 

Redeclaring

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

Example

var x = 2;
// Now x is 2
var x = 3;
// Now x is 3

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

Example

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

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

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

Example

let x = 2;    // Allowed

{
let x = 3;    // Allowed
 }

{
let x = 4;    // Allowed
 }

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:

Example

This is OK:

carName = "Volvo";
var carName;

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 HTML initialized.

Meaning: Using a let variable before it is declared will result in a ReferenceError:

Example

carName = "Saab";
let carName = "Volvo";
 
Labels:

Comments

Post a Comment

Popular posts from this blog

JavaScript Const

  The const keyword was introduced in ES6 (2015) . Variables defined with const cannot be Redeclared. Variables defined with const cannot be Reassigned. Variables defined with const have Block Scope. Cannot be Reassigned A const variable cannot be reassigned : Example const PI = 3.141592653589793 ; PI = 3.14 ;      // This will give an error PI = PI + 10 ;   // This will also give an error Must be Assigned JavaScript const variables must be assigned a value when they are declared: Correct const PI = 3.14159265359 ; Incorrect const PI; PI = 3.1 4159 265359 ; When to use JavaScript const? As a general rule, always declare a variable with const unless you know that the value will change. Use const when you declare: A new Array A new Object A new Function A new RegExp Constant Objects and Arrays The keyword const is a little misleading. It does not define a constant value. It def...
Post a Comment
Read more

JavaScript Introduction

    This page contains some examples of what JavaScript can do. JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById() . The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript": Example document. getElementById ( "demo" ). innerHTML = "Hello JavaScript" ; JavaScript accepts both double and single quotes: Example document. getElementById ( 'demo' ). innerHTML = 'Hello JavaScript' ; JavaScript Can Change HTML Attribute Values In this example JavaScript changes the value of the src (source) attribute of an <img> tag:   JavaScript Can Change HTML Styles (CSS) Changing the style of an HTML element, is a variant of changing an HTML attribute: Example document. getElementById ( "demo" ). style . fontSize = "35px" ; JavaScript Can Hide HTML Elements Hidin...
Post a Comment
Read more

JavaScript Output

  JS Output   JavaScript Display Possibilities JavaScript can "display" data in different ways: Writing into an HTML element, using innerHTML . Writing into the HTML output using document.write() . Writing into an alert box, using window.alert() . Writing into the browser console, using console.log() . Using innerHTML To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content: Example < !DOCTYPE html > < html > < body > < h1 > My First Web Page < /h1 > < p > My First Paragraph < /p > < p id ="demo" > < /p > < script > document. getElementById ( "demo" ). innerHTML = 5 + 6 ; < /script > < /body > < /html > Changing the innerHTML property of an HTML element is a common way to display data in HTML. Using document.wr...
Post a Comment
Read more