Day 24 — ES6. Todays lesson was learning about ES6.
By: Alice Alsford
Tags: Dev, JavaScript, Learn To Code, Mum, ES6

Todays lesson was learning about ES6.

The first concept was the Let statement

Let — The let statement allows for block scope to declare a local variable. This differs from the var keyword, which declares a variable globally or locally to the scope of a function.

The difference between them is that you cant use the let keyword again. It will return an error

var greeting = 'hello';

greeting; // 'hello' var greeting = 'Hi';

greeting; // 'Hi'; //whereas you cant do that with let let greeting = 'hello';

greeting; // 'hello' let greeting = 'hello';

greeting; // error

The biggest difference between var and let is in the scope. Let utilises block scope as variables find its scope within the block of the code they are declared in. Using var will cause a variable to find its scope within a function that it was created in.

var a = 4; if(true) {

var b = 5;

} console.log(a*b); // this will return 20 as var is global // while if we replaced var with let the following would happen var a = 4; if(true) {

let b = 5;

} //will return an error as b is not defined

Using the let statement should help code to make more sense and hopefully make the code less buggy.

Another good example that we covered to show the different results you can get from the var and let is the following:

function varTest() {

var x = 1;

if(true) {

var x = 2;

console.log(x);

}

console.log(x);

} varTest():

// Will return 2 & 2 //if you replace var with let so it looks like the below function letTest() {

let x = 1;

if(true) {

let x = 2;

console.log(x);

}

console.log(x);

} letTest(); // will return 2 & 1

The second console.log statement in the let statement it doesnt have access to the x inside the if statement because of the let statement which is why it returns 1.

Next up is the const statement

Const — declaring cons will create a value that is not able to be changed it is a read-only reference. It can be either global or local to the function or block in which it is declared as you cant change the reference or literal that is assigned to it.

It is most appropriate to use const when you dont want the value to be changed. An example is

var API_KEY = 'abcdefghijk'; var API_KEY = 'lmnopqrstuv'; // this will change the variable to the below string while const will not const API_KEY = 'abcdefghijk'; API_KEY = 'lmnopqrstuv'; // this will return an ERROR const API_KEY = 'lmnopqrstuv'; // this will return an ERROR



The best practice to use const is when you are wanting greater stability in a variable.

Template Literals — Template literals are enclosed by the backtick. They replace the single or double quotes typically used in strings. They may contain placeholders. Placeholders are indicated by the dollar sign and curly braces. The expressions in the place holders including text contained between them are passed to a function. The parts are concatenated by the default function into a single string.

An example of a template literal from ES6 is the change from the following:

//ES5 in order to put a new line in you would do the following var sentence = 'My name is Rob/n and I like to run.'; sentence;//

'My name is Rob

and I like to run'. //ES6 it would look like this let sentence = `My name is Rob

and I like to run`; sentence;//

'My name is Rob

and I like to run'.

It can also simplify thing in the following way

//ES5 var topping1 = 'pepperoni';

var topping2 = 'mushrooms'; var pizzaToppings =

'My favourite pizza has ' + topping1 + ' and ' + topping2 + '!'; pizzaToppings;//

'My favourite pizza has pepperoni and mushrooms!' //To make it easier to read and less hassle trying to determine the correct spacings etc it is best to do it like the following ES6 let topping1 = 'pepperoni';

let topping2 = 'mushrooms'; let pizzaToppings = `My favourite pizza has ${topping1} and ${topping2}!`; pizzaToppings;//

'My favourite pizza has pepperoni and mushrooms!'

The ' and spacings are replaced by a ${}

Another way they simplify things is:

//For ES5 var pizza = {

topping1: 'pepperoni',

topping2: 'mushrooms',

favouritePizza: function() {

return 'My favourite pizza has ' + this.topping1 + 'and ' + this.topping2 + '!';

}

} pizza.favouritePizza();//

'My favourite pizza has pepperoni and mushrooms!' //For ES6 var pizza = {

topping1: 'pepperoni',

topping2: 'mushrooms',

favouritePizza: function() {

return `My favourite pizza has ${topping1} and ${topping2}!`;

}

} pizza.favouritePizza();//

'My favourite pizza has pepperoni and mushrooms!'

Again this removes the need to concatenate and figure out spacings making it easier

I can already see how ES6 has a few new features to allow it to be easier to read and easier to write code.

There are two more features still to cover Arrow functions and Spread Operator but I think I have overloaded my brain with enough new stuff today so I will save them for tomorrow. I might try find time during the day tomorrow if I can get both kids to sleep at the same time (dreams are free)