Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

ES6 brings more features to the JavaScript language. Some new syntax allows you to write code in a more expressive way, some features complete the functional programming toolbox, and some features are questionable.

let and const

There are two ways for declaring a variable (let and const) plus one that has become obsolete (var).

let

let declares and optionally initializes a variable in the current scope. The current scope can be either a module, a function or a block. The value of a variable that is not initialized is undefined .

Scope defines the lifetime and visibility of a variable. Variables are not visible outside the scope in which they are declared.

Consider the next code that emphasizes let block scope:

let x = 1;
{ 
  let x = 2;
}
console.log(x); //1

In contrast, the var declaration had no block scope:

var x = 1;
{ 
  var x = 2;
}
console.log(x); //2

The for loop statement, with the let declaration, creates a new variable local to the block scope, for each iteration. The next loop creates five closures over five different i variables.

(function run(){
  for(let i=0; i<5; i++){
    setTimeout(function log(){
      console.log(i); //0 1 2 3 4
    }, 100);
  }
})();

Writing the same code with var will create five closures, over the same variable, so all closures will display the last value of i.

The log() function is a closure. For more on closures, take a look at Discover the power of closures in JavaScript.

const

const declares a variable that cannot be reassigned. It becomes a constant only when the assigned value is immutable.

An immutable value is a value that, once created, cannot be changed. Primitive values are immutable, objects are mutable.

const freezes the variable, Object.freeze() freezes the object.

The initialization of the const variable is mandatory.

Discover Functional JavaScript was named one of the best new Functional Programming books by BookAuthority!

For more on applying functional programming techniques in React take a look at Functional React.

Read more on Vue and Vuex in A Quick Introduction to Vue.js Components.

Learn how to apply the Principles of Design Patterns.

You can find me on Medium and Twitter.