Modern JavaScript ES6

Also known as ECMAScript 6

variable declaration

Firstly we’ll have look at variable declaration.

Variables declared with “var” are function scoped.
Variables declared with “let & const” are block scoped.

var name = "eswar";
name = "Kiran";
console.log(name);
//Output: Kiran
let name = "eswar";
name = "Kiran";
console.log(name);
//Output: Kiran
const name = "eswar";
name = "Kiran";
console.log(name);
//TypeError: Assignment to constant variable

Note: If we use “const” in variable creation the value should be assigned during creation and cannot be modified.

function hello(check){
         if(check){
            var name = "var";
            let Name = "let";
            console.log(name);
            console.log(Name);
            }
console.log(name); //var is function scoped
console.log(Name); //error as let & const are block scoped            }

the statements inside the if are under block and if is under function.

Template Strings/Literals

//ES5
 console.log("My name is Abisheak."+" My age is 18");
//ES6
 console.log(`My name is Abisheak. My age is 18`);

In ES5 we have to use + to concat strings but in ES6 we could simple use ` “back quote” to get work done.

//ES5
 let firstName = "Eswar";
 let lastName = "Abisheak";
 console.log("My name is "+firstName +". My last name is "+lastName+".");
//ES6
 let firstName = "Eswar";
 let lastName = "Abisheak";
 console.log(`My name is ${firstName}. My last name is  ${lastName}.`);

Uff at last Single quote Double quote headache gone in ES6 with `${}`.
Let’s have some fun.

let a = 20;
let b = 30;
console.log('Fifty is '+ ( a + b ) +' and\nnot ' + (2*a+b)+'.');
console.log(`Fifty is ${a+b} and 
  not ${2*a+b}`);//after and just press enter to go to new line

Template String methods

let firstName = "Eswar";
console.log(`${firstName}`);

to check for first letter in string : startsWith() // returns bool

 console.log(`${firstName}`.startsWith('E'));

to check for last letter in string : endsWith() // returns bool

console.log(`${firstName}`.endsWith('E'));

to check for substring in string : includes() // returns bool

console.log(`${firstName}`.includes('sw'));

to print multiple times : repeat(10)

console.log(`${firstName} `.repeat(10));
or
console.log(`${firstName} ${lastName}`.repeat(10));

To save the string template to a variable

const fname = `${firstName}`;
console.log(fname);

DE-structuring

It implies breaking down a complex structure into simpler parts.

object destructuring

Life made easy 😏 with ES6.

Default Arguments

Hmm, pretty late to be implemented :P.

Object Properties

I don’t have to give default names to create object properties.

Arrow Functions

Tired of writing all the code just to create a function.

If you want to Dig in visit here.

JavaScript

Web technology for developers