I recently read somewhere that JavaScript is the world's most misunderstood programming language. Anyone who has worked on JavaScript will totally agree with it. It may take a few days for someone to learn JavaScript but months to understand it completely. Having worked for a long time in JavaScript I still face a lot of issues and each time I learn something new about JavaScript. So after the first lecture at neoG, I have decided to do an in-depth analysis of ES6 and share it out.

What is ES6?

ES6 or ECMAScript6 is the standardized version of JavaScript that was released back in 2015. This was a significant update to the language and the previous update happened in 2009 (ES5). It has new features which allows the developers to understand and write code more efficiently. Also ES6 sets up the base for the modern frameworks like React and Angular.

Below are some of the features of ES6 which every developer should know.

let and const

Before ES6 for declaring variables we used var, but with ES6 we now have two more ways for declaring variables - let and const, both of which are block scoped.

With let we can assign a new value to the variable but we cannot re-declare it with the same name.

let x = 1;
console.log(x);   // 1

x = 100;
console.log(x);   // 100

let x = 20; 
// Uncaught SyntaxError: Identifier 'x' has already been declared

With const we can neither assign a new value to the variable nor re-declare it with the same name.

const x = 1;
console.log(x); // 1

x = 100;  
// Uncaught TypeError: Assignment to constant variable.

const x = 20;  
//  Uncaught SyntaxError: Identifier 'x' has already been declared

Template Strings

Template literals are strings enclosed with backticks(`) rather than the single quotes('). With Template Strings we can embed variable values or calling a function inside strings using ${expression} syntax.

var name='Kaushal';
var age=20;

console.log(`Hi! My name is ${name} and I am ${age} years old`); 
// Hi! My name is Kaushal and I am 20 years old

Arrow Functions

An arrow function is a short hand alternative to the traditional normal functions, but have a limited use and can't replace the normal function in every case.

//normal function
function add22(num){
    return num+22;
}

//arrow function
var add22 = num => num + 22;

The advantage of arrow functions is that it provides a cleaner way of writing a function. Another advantage can be that the value of this for arrow function does not depend upon the fact how they are invoked but rather depends on its enclosing context.

Destructuring

As the name suggests destructuring is breaking down of an object or an array into distinct values. We can break down an array or an object into individual values.

Array Destructuring

var a, b ;
[a , b]= [1, 2];
console.log(a); //1
console.log(b); //2

Object Destructuring

var person = {
      firstName: 'Sheldon',
      secondName:'Cooper'
};

var { firstName, secondName } = person;
console.log(firstName, secondName);  // Sheldon Cooper

Capturing the rest of Array

In cases we want to structure some certain values of an array and not the full array, we can use the spread operator(...) to capture the elements into a new array.

var numbers = [1, 2, 3, 4, 5, 6];
var [a, b , ...rest] = numbers;
console.log(rest); // 3, 4, 5, 6

One thing that needs to noted down is that the ...rest has to be at the end of the array we use for destructuring else an error will be thrown.

Just like this there are other features like modules, class, promises and many more which are included in the ES6 version of JavaScript.

Thanks for reading. Happy Learning