Table of Contents

URL: https://www.progressiverobot.com/js-let-const-variables-es6/

Two new keywords are available in ES6 / ES2015 to declare variables in JavaScript: <^>let<^> and <^>const<^>. Contrary to var, let and const are block-scoped.

<^>Var<^> has an issue where it's not block-scoped, which can lead to surprises:

				
					
var dog = 'Ralf';



if (true) {

  var dog = 'Skip';

}



console.log(dog); // Skip

Compare this to using <^>let<^>:

				
					
let dog = 'Ralf';



if (true) {

  let dog = 'Skip';

}



console.log(dog); // Ralf

<^>Var<^> is properly function-scoped, meaning that the issue doesn't happen in functions, but in blocks like <^>if<^> or <^>for<^> all bets are off and variables declared with <^>var<^> get hoisted to the parent scope.

Const

const illustration for: Const

With <^>const<^> you can define immutable variables (constants). Trying to re-assign a constant will raise an error:

				
					
const PI = 3.1415;



PI = 5; // "TypeError: Assignment to constant variable.

Be careful however, new items can still be pushed into an array constant or added to an object. The following 2 snippets work without complaining because we are not trying to reassign to the variables:

				
					
const someArr = [3, 4, 5];



someArr.push(6);

				
			
				
					
const someObj = {

  dog: 'Skip',

  cat: 'Caramel',

  bird: 'Jack'

};



someObj.camel = 'Bob';

Let vs Var

Many developers now agree that there's not a very strong case for using <^>var<^> at all anymore and that using <^>let<^> should be the way to go forward.

In short, use let!