Submodule 13.1: Introduction to ES6

let vs var

In 2015, ES6 ( ECMAScript 6) was released. EcmaScript is not a different language, it is actually the official name for JavaScript.

The changes were done in order to improve the syntax and functionality of JavaScript.

One of the main changes was changing how we declare a variable by the replacement of var with let. 

So what is the difference between var and let?

When we declare a variable using var, this variable has function scope. With this, we mean that the variable defined is accessible in any part of the code. 

Let's see an example:

function myFunc () {
for (var i=0; i<10; i++) { 
// do something 
};
console.log(i);
}
myFunc ();

In this case, the outcome of console.log will be 10.

If we do the same thing using let:

function myFunc () {
for (let i=0; i<10; i++) { 
// do something 
};
console.log(i);
}
myFunc ();

the outcome will be: "Uncaught ReferenceError: i is not defined"

This is because in contrast with var, let has block scope. This means that the variable is available only inside the block where it was created.

In the next chapter we will learn what is the advantage of using block scope over function scope. 

Tip: Copy the above pieces of code and paste directly into the console, to see how they work.

Advantages of let

The block scope where let "lives" help us to minimize the chances to make errors. 

Imagine that you have a large piece of code and you use var to declare your variables.

There is a chance, that by mistake you use the same variable name twice without realizing it.

For example:

function myFunc () {
var x = 100;
var x = 200;
console.log(x);
}
myFunc ();

In this case, the output of the console will be 200. Here the code is too small and you can easily control what you are doing. However, if we had 1000 lines of code, you wouldn't be able to see what is going on. The result would be to have a code that is either not working or provides unexpected results.

If we try to apply the same example using let:

function myFunc () {
let x = 100;
let x = 200;
console.log(x);
}
myFunc ();

The output of the console will be: "Uncaught SyntaxError: Identifier 'x' has already been declared"

This error message makes you less prompt to errors and thus helps you to have the control of your code.

Moreover, the fact that let has block scope, makes the overall code more organized since variables only exist when they have to and not throughout the code.

Tip: Copy the above piece of code and paste it directly into the console, to see how it works.

Arrow functions

Arrow functions is another new feature of ES6. 

They provide a way to write functions using shorter syntax. Mainly, the functions that are converted to arrow, are the anonymous functions. 

What are anonymous functions?

Anonymous are the functions that do not have a name.

The syntax of an anonymous function is:

function (parameters) {
// do something
}

The conversion of the above to an arrow function would look like:

(parameters) => {
// do something
}

Now you have your first example of an arrow function. As you can see it is more concise from the traditional way to write functions.

What is interesting, is that this can become even more concise.

If there is only one expression you can leave off the {}

(param1, param2, …, paramN) => expression

If there is only one parameter then the parenthesis are optional

singleParam => { statements }

Example

Arrow function Example

See more about Arrow functions

Exercise

Exercise

1. Right click to Download the file exersice13.1.html in the folder "yourNameWEB2JS". Open the file in your browser to see the results.
2. Open the file in your editor, and replace the functions with arrow functions. We want to have the same results.

Answer:

//Example 1
    let setNameIds = (id, name) => ({ id: id, name: name });
//Example 2
    let multiply = (x, y) => { return x * y };
//Example 3
    let phraseSplitter = phrase => phrase.split(' ');