ES6 overview – variables3 min read

ECMA stands for European Computer Manufacturer Association and is responsible for providing ECMAScript which is basically the specification while Javascript is the implementation of ECMAScript. Right now we have the new specification ES6 and Javascript moved, or better to say, transformed into a more powerfull language. While ES6 brings great things, not all frameworks fully implement it. There is a bunch of legacy stuff to support that’s why we have Babel.

Babel is used to transpile ES6 into ES5 which is supported with all older technologies (browsers, frameworks…).

Variables

Javascript is dynamic typed language which means the type of variable is inferred from the value assigned to it.

I.E. if you assign a string to it, it’s automatically defined as string or if you put a number inside variable its automatically assigned as number etc.

Variables cannot be assigned a reserved javascript words.

Variables must start with ‘$‘,’_‘ or with a letter, they cannot be number.

We assign value to a variable by entering variable name which is followed by the assignment operator ‘=’ and than a concrete value.

So far in ES5 we used reserved word ‘var’ for defining a variable. Nowdays, in ES6 we have two more keywords: ‘const’ nad ‘let’.

Preferred style is camelCase.

So what is the difference between VAR, CONST and LET?

In short, difference between LET and VAR is in scoping and declaration.

LET is scoped to block and cannot be redeclared while VAR is scoped to function.

CONST is scoped to block but cannot be re-assigned or redeclared.

– LET –

[syntax_prettify linenums="linenums"]
function foo() {
 // iterator is nost visible here - before for()
 for ( let iterator = 0; iterator < 10; iterator++) {
 // iterator is only visible in here inside for()
 // and is also visible as a seperate variable for each iteration of the loop
 }
 // iterator is not visible here - outside of the for()
 }
[/syntax_prettify]

– VAR –

[syntax_prettify linenums="linenums"]function bar() {
 // iterator is visible here before for()
 for ( var iterator = 0;  iterator < 10; iterator++) {
 // iterator is visible here, inside for()
 }
 //iterator is visible here also, outside of the for()
 }[/syntax_prettify]

When using LET or VAR outside a function block, they behave similar but with one main difference.

[syntax_prettify linenums="linenums"]let foo = 'foo';  // globally scoped 
var bar = 'bar'; // globally scoped[/syntax_prettify]

Global variables defined as LET will not be added as properties on the global object WINDOW.

[syntax_prettify linenums="linenums"]console.log(window.foo); // undefined 
console.log(window.bar); // 'bar'[/syntax_prettify]

Re-declaration:

If strict mode, VAR will let you re-declare variable while LET will not.

– VAR –

[syntax_prettify linenums="linenums"]'use strict'; 
var foo = 'foo'; 
var foo = 'bar'; // Without error, `foo` is replaced.[/syntax_prettify]

– LET –

[syntax_prettify linenums="linenums"]'use strict'; 
let foo = 'foo'; 
let foo = 'bar'; // SyntaxError: Identifier 'foo' has already been declared[/syntax_prettify]

Additional:

There is a new way of entering variable inside text / template strings:

[syntax_prettify]console.log(`${firstName} ${lastName}`)[/syntax_prettify]

which is basically a preferred way over:

[syntax_prettify]var fullName = firstName + ' ' + lastName;
console.log(fullName);[/syntax_prettify]

As you can see, Javascript is moving forward each day.