ES5 => ES6…A must-read if you wanna be a slayer😎 in JavaScript ES6

Published in

Quick Code

6 min readDec 17, 2019

Every JavaScript developer is well found of the EcmaScript Versions which keeps on updating with a new addition to the language every year or two.

But JavaScript really headed way up when ES6 was introduced in the year 2015.

In this article, we are going to have a brief introduction to such changes and new additions in ES6.

So, Get ready folks the ride is going to be filled with excitement and dozen loads of JavaScript ES6.

Arrow Functions =>

The syntax for creating an arrow function is similar to that of the syntax for a regular function with a couple of differences.

The first difference is that the ‘function’ keyword is not needed anymore.
The second difference is the addition of the arrow “=>” between the arguments and the function body.

Example::

const printMyName = (name) => {return `My name is ${name}`}console.log(printMyName('Bhavishya')) // prints Bhavishya

There is a short-hand syntax for the arrow function here we remove the curly braces from the function definition.
We then put the expression we want to return right after the arrow.
There is no requirement for the return keyword as the expression we add is implicitly returned.

Let us make the above code with the short-hand syntax,

const printMyName = name => `My name is ${name}`console.log(printMyName('Bhavishya')) // prints "Bhavishya"

Arrow functions don’t bind this keyword.

Promises

A Promise is an alternative to callback functions that can ease the management of our asynchronous code.

You can create a promise by using the new operator.
It takes two parameters reslove and reject.
A promise can have one of three states,
1.pending
2.fulfilled
3.rejected

const myPromise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Example data')}, 2000)})

but what after creating a promise we have to do something with the data when the promise is fulfilled or rejected by calling then on the promise.

// Using myPromise from abovemyPromise.then((data) => {console.log(data) // prints "Example data"}, (err) => {console.log(err)})

Similarly, we have fetch which is a promise-based, it is used to access any API the data returned from it can be accessed and processed further with other promises as it returns a promise.

Generators

Generators are a special kind of function with the ability to pause itself, and resume later, allowing other code to run in the meantime.

This function can stop itself from running and allowing other functions to run or execute in the callback queue.

All this is done with a single keyword: yield. When a generator contains that keyword, the execution is halted.

A generator can contain many yield keywords, thus halting itself multiple times, and it’s identified by the *function keyword.

let and const

var is traditionally function scoped.

let is a new variable declaration which is block scoped.

const is just like let, but immutable.

for the more detailed explanation, you can refer to my article about var, let and const.

JavaScript ES6: let & const and why you should be using them instead of var.

ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript.

medium.com

Template Literals

Using template literals is very easy and it avoids you mess with ‘+’ sign to concatenate your strings or javaScript code.

We use backticks to initialize a template literal and whenever we want to write JS we use the syntax ${javaScript code}.

This can be understood with an example,

//function with no template literalsconst myHobby = () => {
let name = "Bhavishya"
let hobby = "Travelling"
return name + ' ' + 'loves' + ' ' + hobby
}myHobby() // "Bhavishya loves travelling"

Now let’s see the same function with template literals,

//function with template literalsconst myHobby = () => {
let name = "Bhavishya"
let hobby = "Travelling"
return `${name} loves ${hobby}`
}myHobby() // "Bhavishya loves travelling"

Default parameters

Now we can assign default parameters to the arguments passed in the function.

var myfun = (name = 'Bhavishya', age = 24) => {console.log(name,age)}myfun() // Bhavishya 24

Array and object destructing

Destructing makes assignment of arrays and objects to other variables easier.

Old Syntax:

const obj = {
name:"Bhavishya",
age:24,
country:"India"
}let name = obj.name;
let age = obj.age;
let country = obj.countryconsole.log(name) // "Bhavishya"
console.log(age) // 24
console.log(country) // "India"

With ES6 Syntax:

const obj = {
name:"Bhavishya",
age:24,
country:"India"
}let {name,age,country} = objconsole.log(name) // "Bhavishya"
console.log(age) // 24
console.log(country) // "India"

This is similar to arrays just have to replace the curly braces with the square brackets.

const arr = ["Bhavishya",24,"India"];let [name,age,country] = arrconsole.log(name) // "Bhavishya"
console.log(age) //24
console.log(country) // "India"

Rest parameter and Spread operator

The rest parameter is used to get arguments of an array or add other arguments in a function.

Let's look at this code below,

function myFun(a, b, ...manyMoreArgs) {  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); }

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

Here the function myFun consoles the parameters passed to the function.
...manyMoreArgs can take as many arguments as one passes and it is returned as an array of arguments.

The spread operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array.

const arr=['I','am','Bhavishya','Hi','Friends','How are you?'];

const Func=(...array)=>{
  return array;
}

console.log(Func(arr));

//output  ['I','am','Bhavishya','Hi','Friends','How are you?']

Classes

Classes were introduced to JavaScript in 2015.
Classes are the core of object-oriented programming (OOP). They make your code secure and encapsulated. Using classes gives your code a nice structure and keeps it organized.

//Syntax
class myClass {
  constructor() {
  }
}

Classes are declared with the keyword class before the name of the class.

Let's look at an example,

We use the class methods and create a new instance to the class with the keyword new.

To inherit from another class, use the extends keyword followed by the name of the class you want to inherit from.

Holy mother of God, so many new features to digest in a single article.
But wait there’s more to ES6🤣 still you need to know about a few more addition to completely slay and call yourself ES6 SLAYER!!!

Map and Set

Map and Set (and their respective garbage collected WeakMap and WeakSet) are the official implementations of two very popular data structures.

New String methods

Any string value got some new instance methods:

repeat() repeats the strings for the specified number of times: 'Ho'.repeat(3) //HoHoHo

New Object methods

ES6 introduced several static methods under the Object namespace:

Object.is() determines if two values are the same value
Object.assign() used to shallow copy an object
Object.setPrototypeOf sets an object prototype

So, that’s it Thank you, folks!!!
For reading my article, let me know whether you have any queries regarding the article or the concepts which I explained by writing a response at the bottom.

Follow me on twitter to be in touch and let me know what other areas you feel difficulty in so that I read myself and will try to explain it with my articles.

https://twitter.com/bhavishya2107