Getting started with ES6

1. Introducing let and const

What are let and const? let and const are new variables that were introduced in ES6, so what's the difference between var, const and let?

var can still be used, however it could be more used in global variables.

"let" in the other side, are local variables that can be changed after assigning them, while "const" are local variables that are actually CONSTANT and have to be assigned when you declare them.

Both "let" and "const" are block scoped, while var isn't.

let's see an example:

function testVariables(){
  
  if(1 === 1){
    var es5 = "testing";
    let es6 = "test2";
    const es6_const = "test3";
  }
    console.log(es5);
    console.log(es6);
    console.log(es6_const);
}

In the above code, you may think that es5, es6, and es6_const are actually not defined, so it will cause an error, and this is partially true.

both es6 and es6_const should throw a ReferenceError, however es5 was able to prent "testing" even if it was outside the if statement scope.

An other very helpful example are defining variables inside and outside a conditional scope.

function testVariables(){
   var es5 = "testing_outside";
   let es6 = "test2_outside";
   const es6_const = "test3_outside";

  if(1 === 1){
    var es5 = "testing";
    let es6 = "test2";
    const es6_const = "test3";

    console.log("inside es5: "+es5);
    console.log("inside es6: "+es6);
    console.log("inside es6_const: "+es6_const);
  }
    console.log(es5);
    console.log(es6);
    console.log(es6_const);
}

In the above function, an expected output would be

inside es5: testing
inside es6: test2
inside es6_const: test3
testing_outside
test2_outside
test3_outisde

But it is wrong. the actual output is:

inside es5: testing
inside es6: test2
inside es6_const: test3
testing
test2_outside
test3_outisde

so what has changed in the actual output? the outside "es5" variable was overwritten by the new declared var variable outside the if statement,
while es6 and "es6_const" (let and const) was able to actually maintain the variable as it is from outside the if statement.

More info can be found here:

let

const

2. Template literals

In the previous two examples, we had to use + sign to join two strings together, but not anymore! with ES6 you now have a template literals, to know what they are and how they help, let's look at this simple add string function.

function add_strings(string1,string2){
 return string1 + " " + string2;
}

You may be very fimiliar with the above string joining method, but is there a better way? the answer is YES!

function add_strings(string1,string2){
   return `${string1} ${string2}`;
}

This above function does the exact same as the first one, but it looks much more easier is it?

What about adding integers together then adding them to the string? in ES5:

function add_strings(string1,string2,num1,num2){
 return string1 + " " + string2 + " " + (num1+num2);
}

in ES6:

function add_strings(string1,string2,num1,num2){
   return `${string1} ${string2} ${num1+num2}`;
}

more info can be found here:

Template literals

3. arrow functions

Arrow functions are a different way to create functions. let's take a look at our add_strings function:

function add_strings(string1,string2,num1,num2){
   return `${string1} ${string2} ${num1+num2}`;
}

the arrow function would be:

(arguement1,arguement2,....) => {
  //Method here
};

so in our case:

let add_strings = (string1,string2,num1,num2) => {
   return `${string1} ${string2} ${num1+num2}`; 
};

or even better for one line functions:

let add_strings = (string1,string2,num1,num2) => `${string1} ${string2} ${num1+num2}`; 

More info can be found here:

Arrow functions

That's it for this article! I hope you found this helpful! if you have any questions, or any feedback, feel free to comment or message me!