ES6 Features that every front end developer should know

We all know ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. so we will discuss few features of it -

  1. let Keyword
  2. const Keyword
  3. for…of Loop
  4. Template Literals
  5. The default values for function parameters
  6. Arrow functions
  7. Classes
  8. Modules
  9. Rest Parameters
  10. Spread Operator
  11. Destructing Assignments
  12. Multi-Line String

1. let Keyword

Variables declared with the var keyword is function-scoped and hoisted at the top within its scope

variables declared with let keyword is block-scoped and they are not hoisted.

let keyword inside a loop, it does not exist outside of the loop.

// ES6 syntax
for(let i = 0; i < 3; i++) {
console.log(i); // 0,1,2,3
}
console.log(i); // undefined
// ES5 syntax
for(var i = 0; i < 3; i++) {
console.log(i); // 0,1,2,3
}
console.log(i); // 3

2. const Keyword

const PI = 3.14;
console.log(PI); // 3.14
PI = 10; // error

3.for…of Loop

// Iterating over array
let names= [“Ram”, “Sham”, “Sita”, “Gita”];
for(let name of names) {
console.log(letter); // Ram,Sham,Sita,Gita
}
// Iterating over string
let greet = “Welcome!”;
for(let character of greet) {
console.log(character); // W,e,l,c,o,m,e
}

4. Template Literals

Template literals are created using back-tick (` `).

//ES6
ageValue = 10;
var myAge = `My age is ${ageValue}`;
//ES5
ageValue = 10;
var myAge = 'My age is' +ageValue;

5. The default values for function parameters

//ES6
function getName(name='virat'){
return `my name is ${name}`;
}
getName(sachin); // sachin
getName(); //virat
//ES5
function getName(name){
var nameis = 'my name is' + name || virat;
return nameis;
}
getName(sachin); // sachin
getName(); //virat

6. Arrow functions

//ES6
let sum = (a, b) => a + b;
//ES5
let sum = function(a, b) {
return a + b;
};
alert( sum(1, 2) ); // 3

7. Classes

We can create a class in ES6 using “class keyword.

class User {constructor(name) {
this.name = name;
}
sayHi() {
alert(this.name);
}
}// Usage:
let user = new User(“Sachin”);
user.sayHi();

8.Modules

//export 
export var rollNumber = 30;
//import
import {rollNumber} from 'rollnumberModule';
console.log(rollNumber); // 30

9. Rest Parameters

function sortNames(…names) {
return names.sort();
}
alert(sortNames(“sachin”, “virat”, “rohit”)); // rohit,sachin,virat
alert(sortNames(“hardik”, “anil”)); // anil,hardik
function getNumbers(a, b, ...args) {
return args;
}
alert(getNumbers(1, 2, 3, 4, 5)); // 3,4,5
alert(getNumbers(-7, 5, 0, -2, 4.5, 1, 3)); // 0,-2,4.5,1,3
  • Math.max(arg1, arg2, ..., argN) – returns the greatest of the arguments.
  • Object.assign(dest, src1, ..., srcN) – copies properties from src1..N into dest.

10. Spread Operator

let arr = [3, 5, 1];alert( Math.max(arr) ); // NaNlet arr = [3, 5, 1];alert( Math.max(...arr) ); // 5 (spread turns array into a list of arguments)

The spread operator can also be used to insert the elements of an array into another array without using array methods like push(), unshift() concat(), etc.

let countries = [“India”, “USA”];
let states = [“Maharashtra”];
// Creating an array by inserting elements from other arrays
let cities = […countries, “pune”,…states];
alert(cities); // India,USA,pune,Maharashtra

11. Destructing Assignments

  1. Array Destructing
  2. Object Destructing

Array Destructing

let cities = [“Pune”, “Mumbai”];let [a, b] = cities; // Array destructuring assignmentalert(a); // Pune
alert(b); // Mumbai

Object Destructing

let cities= {name: “Pune”, population: 6808000};let {name, population} = person; // Object destructuring assignmentalert(name); // Pune
alert(population); // 6808000

12. Multi-Line String

let title = `Javascript is 
very interesting`

let title = ‘Javascript is\n’+
‘very interesting’

Thanks for Reading!…✌️

Please claps or comments if you like!👏👏

Love Programming and Writing, Software Engineer, Pune

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store