Javascript ES6: Let vs. Var vs. Const

Javascript ES6

JavaScript ES6 (ES2015) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more. Let’s take a look.

The reason why ES6 is so important because it brought a radical change to the Javascript community and meaningful changes and features that allow millions of developers to improve their code.

You can check all the new features brought by ES6 at http://es6-features.org/.

Every year there is a new Javascript or ECMAScript version gets released with awesome new features and functionalities you could try or even use it on your ongoing projects. You can check more about how to work with the new versions (ESNext) using Babel take a closer look at their Docs.

Var Keyword

Var Keyword is the original keyword used to declare variables in javascript since the early versions it has some downsides which may cause bugs on your code that’s why ES6 brought new keywords to the javascript word for better variables context control.

Can be re-declared.
Global Scope (any variable declared out of function scop can be accessed in any function on the global window).

This code is completely valid using the Var Keyword

var someVar = 1337;
//This will not give you an error cause Var supports redeclarations 
var someVar = 2000;

console.log(someVar); ///< 2000

Var Hoisting:

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

console.log("Hoisting: ", someVariable); ///< Hoisting: undefined
var someVariable;

Let Keyword

The Let keyword has been introduced in ES6 as a new way to declare variables which brought a better scope constraint and safe declarations of variables which is much safer than var.

Used Scope Variable Declaration
Recommended since ES2015 (ES6)
Two variables with the same identifier can be declared in different scopes
Cannot redeclare variables
Variables can be updated but not re-declared

This fact makes let a better choice than var. When using let, you don’t have to bother if you have used a name for a variable before as a variable exists only within its scope. Also, since a variable cannot be declared more than once within scope, then the problem discussed earlier that occurs with var does not occur.

let someVar = 1337;
/*This will throw an exception since you can declare two variables using let with the same identifier at the same scope level */
let someVar = 2000;

console.log(someVar); ///< this code won't be reached

When using let you declaring two variables at different scope levels with the same identifier is not a redeclaration cause let operates at scope level.

let globalVar = 1500;

function localFunction() {
  let globalVar = 2000; ///< Completely different variable
  console.log("Inside: ", globalVar); ///< 2000
}

localFunction();

console.log("Outside: ", globalVar); ///< 1500

Let Hoisting:

Unlike var which is initialized as undefined, the **Let **keyword is not initialized. So if you try to use let variable before declaration you will get a reference error (variable not defined).

/* Unlike Var undefined referencing is not available using Let */
console.log("Hoisting: ", someVariable); ///< Throw reference exception error
var someVariable;

Const Keyword

Const Declaration Keyword has been introduced in ES6 to bring the ability to declare variables with constant values which can be set only within the declaration.

Const are constant values (which cannot be changed)
Can only be initialized in the declaration
Share some similarities with Let
Block Scoped (can only be accessed through the block it was declared on)
Cannot be re-declared or updated
Used for immutable pattern and constructing objects

const globalVar = 1500;

function localFunction() {
  const globalVar = 2000; ///< Different variable cause it is in a different scope 
  console.log("Inside: ", globalVar); ///< 2000
}

localFunction();

console.log("Outside: ", globalVar); ///< 1500

Let and Const are the same the only difference is Const declares variables with constant values which cannot be changed once declared, if you try to update const variable value you will get “TypeError: Assignment to constant variable”.

const value = 1337;
value = 1500; ///< TypeError: Assignment to constant variable

#javascript #es6 #web-development