ES6 Features You need to Know before Learning React(Part 2)

Master these Concepts before Learning React

This is a continuation of the last post, where we covered template literals, arrow functions, destructuring and object literals

This week we will cover:

• The rest operator

• The Spread operator

• The for of loop

The Spread Operator

The spread operator is used to spread elements of iterable objects. Iterable objects include arrays, objects, and strings.

The spread operator can copy, combine, or pass elements as arguments to another function. For example, when you are working with arrays and you don’t want to alter the original array, you can use the spread operator to make a copy of the array like this:

The output will be:

[ 'Alice', 'Bob', 'Charlie', 'Diana', 'Ethan' ]

You can now perform actions that may mutate the new array while maintaining the structure of the original array.

In objects, you can use the spread operator like this to make copies of an object.

If you have 2 objects, you can also use the spread operator to merge them like this:

We have the original object info, which contains information about John; we also have an object contact, which contains more information about John. Here we are using the spread operator which takes the properties of both objects and merges them in to a new object.

{ name: "John doe", age: 28, phone: 1232999999 }

The rest Operator

The rest operator is similar to the spread operator in that it uses three(…) dots. However, the rest operator is used within function parameters to collect multiple arguments into a single array.

For example, suppose we need to create a function that gets the sum of numbers. Assuming our array takes an indefinite number of arguments, we can use the rest operator to collect the arguments into an array.

Then, we can use the function to handle any number of arguments.

The rest operator can also be used in restructuring assignments. For example, suppose, we need to extract the first element of the grades array, we can extract it into a variable and then collect the rest of the elements into an array as shown below.

The for of loop

The for of loop is used to iterate elements in iterable objects such as arrays, strings, typed arrays, maps, sets, and NodeLists. The syntax of a for of loop looks like this:

Iterating over an Array

Iterating over an array of objects

For example, suppose we have an array containing several objects, as shown

below.

const currencies = [
    { currency: "US Dollar", code: "USD" },
    { currency: "Euro", code: "EUR" },
    { currency: "British Pound", code: "GBP" },
    { currency: "Japanese Yen", code: "JPY" }
  ];

If we iterate over the currencies array, we will get each individual object.

The output will look like this:

{ currency: 'US Dollar', code: 'USD' }
{ currency: 'Euro', code: 'EUR' }
{ currency: 'British Pound', code: 'GBP' }
{ currency: 'Japanese Yen', code: 'JPY' }

Iterating over a NodeList

A NodeList is a collection of nodes extracted from the document of a web page. For example, suppose you have a <ul> of <li> elements in our page :

We can use the querySelectorAll attribute to get the NodeList containing the <li> elements like this.

 const listItems = document.querySelectorAll('.languages li')

Then use the for of loop concept to get the textContent of each <li> element:

Output

Conclusion

Which ES6 Features do you find yourself using almost every day? Let me know in the comments below.