So, what’s new with the ES6 features that you must know in JavaScript.
Let’s see them here without wasting much of your time.

The ES6 provides us so many cool features which are good for developers life. I will explain to you a few features which I like during development. I am sure you will also like if you will be understood properly.

let and Const

ES5 provides us var for declaring the variable in JavaScript but ES6 provides use let and const, 2 new identifier for variable declaration. They both have block scope. Now the question is,

what is the difference between const and let?

So as name suggests, const means constant which means if we are assigning a variable with const keyword we can’t reassigned and re-declare it in the same scope.

If we are assigning a variable with let keyword, it can be reassigned but can’t be re-declared in the same scope.

Arrow Function-(=>)

Syntax-:

An arrow function is the new syntax of writing function in JavaScript, which is also called fat arrow function. This function makes our code more neat and clean.

Let’s see ES5 syntax

function add() {
  return //your code
}

ES6 syntax

const add = () => ( //your code )

now, we know syntax difference !!

If we are using one argument in our function we do not need the braces.

example:

const add = a => ( a* 2)
add(2) // 4

If we are using more than one argument we need braces.

example:

const add = (a, b) => {
  const c = a + b;
  return c;
}

add(1, 2) //3

No binding & Conclusion of this:

If we are using arrow function, we do not need to bind a function with this keyword.

In ES5 function, this keyword is bound with different values based on the calling of the function. With arrow functions, however, this is functionally bound. It means that it uses this context from the code that contains the arrow function.

Destructuring –

Destructuring is also a very powerful concept of ES6 It is a new syntax for accessing the value from object and array.

Object Destructuring-

lets we have an object

person = {
  name: John,
  surname: smith
}

If we want to access the name and surname of the person object we need to do something like this-

const name = person.name;
const surname = person.surname
console.log(name, surname) //John smith

But in destructuring, you can do something like this-

const {name, surname} = person
console.log(name, surname)//john smith

Lets see one more example with nested object-

const  person = {
name: "john",
surname: "smith",
hobby: {
playing:"cricket",
singing: "classical"
}
}
const {name, surname,  hobby: {playing, singing}} = person;
//john, smith, cricket, classical

Array Destructuring-

ES5 way of accessing values from an array-

const array = [a, b, c];
const first = array[0];
const second = array[1];
const third = array[2];
console.log(first)//a
console.log(second)//b
console.log(third)//c

Now we will look same example with destructuring.

const array = ["a", "b","c"]
const [a, b, c] = array;
console.log(a)//a
console.log(b)//b
console.log(c)//c

During destructuring, we do not need to create two different variables for accessing 2 different values. Destructuring makes our code more readable.

Spread Operator:

The spread operator is also a great feature of ES6. The syntax of the spread operator looks like (…value). Now, what is this operator and where we can use it?

As the name suggested spread, When {…} comes in a function call, it expands or spread an Array into a list.

Maybe it’s not making sense right now, we will see some examples for better understanding.

arrary1 = ["f", "g"];
arrary2 = ["a", array1, "c", "d", "e"];
console.log(array2) //["a", ["b", "c", "d", "e"], "f", "g"];

Now we will see the same example with spread operator.

arrary1 = ["f", "g"];
arrary2 = ["a", …array1, "c", "d", "e"];
console.log(array2) // ["a", "b", "c", "d", "e", "f", "g"];

Now spread operator make sense right?

Let’s see we want to add 5 numbers of an array:


const array = ["1", "2","3", "4", "5"];
function add(a, b, c, d, e){
  const result = a+b +c+d+e;
  return result;
}

add(array(0), array(1), array(2),array(3), array(4))//15

If we call same function with spread operator will look like

add(…array);

Lets check one more example –

If you want to add 2 arrays in JavaScript, then there are various methods to do that, one of them is concat.

Example:

array1 = ["1", "2","3", "4", "5"];
array2 = ["6", "7","8", "9", "10"];
result = array1.concat(array2)
console.log(result)//["1", "2","3", "4", "5","6", "7","8", "9", "10"];

Same thing we can do with spread operator

result = […array1, …array2];
console.log(result)//["1", "2","3", "4", "5","6", "7","8", "9", "10"];

So, finally we know some of the concepts of ES6 in JavaScript. More things are coming up in this in our latest posts exclusively for you.
Thanks!

We here at HYR Global Source have a very deep understanding of web development growing process, In the last 5 years, we have worked with various clients and students, and helped them in creating better products and career respectively.

In HYR Global Source, We have dedicated mentorship programs for students and software professionals to get into the world of web development. If it is something which interests you please connect us here – https://www.hyrglobalsource.com/contact.html

If you already well versed in technology, then we are always looking for bright minds like you, Please check out career page here – https://www.hyrglobalsource.com/careers.html

Hello Javascript: Basic ES6 features