ES6: Variable Declaration with ‘Let’ and ‘Const’

Picking up last week’s ES6 theme, tonight I’ll talk about ES6’s new ways of declaring variables, and when and how to use them.

Let

You’ve probably seen ‘let’ popping up where you’d normally see the ‘var’ keyword, and it’s usually a perfectly fine stand-in, but the key difference is in scope.

When a variable is declared with ‘let’, that variable is limited to the block of code that it is declared in. The ‘var’ keyword, on the other hand, defines a variable globally or locally to the entire function that it is declared in, e.g.:

function varFunc() {
var x = 1;
if (true) {
var x = 2;
}
return x;
}
console.log(varFunc()); // => 2
function letFunc() {
let y = 1;
if (true) {
let y = 2;
}
return y;
}
console.log(letFunc()); // => 1

Another difference is in hoisting. While variables declared with ‘let’ will be hoisted to the top of the scope (like ‘var’), if a variable is referenced before it is declared, a Reference Error will be thrown (with ‘var’, the reference will just be ‘undefined’.

Also unlike ‘var’, variables declared with ‘let’ which are given the same name and in the same scope will throw a Syntax Error:

function myFunc() {
let x = 10;
let x = 9;
return x;
}
console.log(myFunc()); // => Syntax Error

Although, the differences are small, they allow much more precision and can keep your code cleaner. For more info on ‘let’, check out MDN’s full resource here.

Const

‘Const’ is block-scoped, just like ‘let’. The difference is that ‘const’ is constant (who would have guessed). Once a variable is declared with ‘const’, what the variable name points to cannot be changed. This does not mean, though, that the value itself can’t be changed. Let’s look at some examples:

const x = 10;
x = 7;
// results in Type Error
const y = 10;
const y = 5;
// results in Syntax Error (const cannot be redeclared)

The above examples are fairly straightforward. Remember when I said that the value that is pointed to can be changed? That applies to arrays and objects. You can’t redeclare a ‘const’ to a new object or a new array, but these values can be adjusted:

const a = [1, 2, 3, 4, 5];
a = ['a', 'b', 'c', 'd', 'e'];
// results in Type Error - const cannot be reassigned to a new array
const a = [1, 2, 3, 4, 5];
a.push('a', 'b', 'c', 'd', 'e');
console.log(a);
// => [1, 2, 3, 4, 5, "a", "b", "c", "d", "e"]
// This is valid.
const obj = {a: 1, b: 2, c: 3};
obj = {};
// results in Type Error - const cannot be reassigned to a new object
const newObj = {a: 1, b: 2, c: 3};
newObj['a'] = 5;
console.log(newObj); // => {a: 5, b: 2, c: 3} // this is fine
const otherObj = {a: 1, b: 2, c: 3};
otherObj['d'] = 5;
console.log(otherObj); // => {a: 1, b: 2, c: 3, d: 4} // so is this

You’ll probably see ‘const’ used less than ‘let’, but it can still be useful, especially when you need to set aside a variable that you don’t want to change on accident. Here’s the full MDN resource on ‘const’.

Now go play around with ‘const’ and ‘let’ for awhile and you’ll adjust quickly– the specificity is nice!