Tuesday, April 2, 2019

Modern JS (ES6], ES7...) features - TIPS and TRICKS


The Spread operator (feature of ES6)
The Spread operator is three dot (...) operator that perform different types of operations and after learning it you can say “I could do it with my eyes shut”.

So here are the examples :

1. Combine the content of the array :
If we have two arrays and we want a third array that combine the two arrays into one:

var devTeams = ["Yukon", "Thor", "Bradford", "Bristol"]
var qaTeams = ["Ward", "Blackwood"]
var teams= [...devTeams, ...qaTeams]

console.log(teams)   //  [ "Yukon", "Thor", "Bradford", "Bristol", "Ward", "Blackwood" ]

Here all the items of devTeams and qaTeams are pushed to one array called teams. You can also achieve this using concate().

var devTeams = ["Yukon", "Thor", "Bradford", "Bristol"]
var qaTeams = ["Ward", "Blackwood"]
var teams= devTeams.concat(qaTeams);

console.log(teams)   //  [ "Yukon", "Thor", "Bradford", "Bristol", "Ward", "Blackwood" ]

Note: Concatenation using the spread operator is three times slower than using concat. So, it better to use concat() for large data set.


2. Copy array :
As we know, slice() is javascript array method that allows us to copy the array.
For example :

// old
var devTeams = ["Yukon", "Thor", "Bradford", "Bristol"]
var cloneDevTeams = devTeams.slice();
console.log(cloneDevTeams );   //  [ "Yukon", "Thor", "Bradford", "Bristol"]

// new
var devTeams = ["Yukon", "Thor", "Bradford", "Bristol"]
var cloneDevTeams = [...devTeams];
console.log(cloneDevTeams );   //  [ "Yukon", "Thor", "Bradford", "Bristol"]

In both examples devTeams  and cloneDevTeams pointing to the different memory.


3.Grab the last item from the array

var devTeams = ["Yukon", "Thor", "Bradford", "Bristol"]
var [last] = devTeams .reverse()
console.log(last)   // Bristol
console.log(devTeams.join(', '))   // Bristol, Bradford, Thor, Yukon

So here what happened? Can you try to find the problem?
Actually the reverse function has been altered or mutated the array. In a world of the spread operator, we don’t have to mutate the original array. First, we can create a copy of the array and then reverse it:

var devTeams = ["Yukon", "Thor", "Bradford", "Bristol"]
var [last] = [...devTeams ].reverse()
console.log(last)   // Bristol
console.log(devTeams.join(', '))   // Yukon, Thor, Bradford,  Bristol

4. Get some, or the rest, of the items in the array

var devTeams = ["Yukon", "Thor", "Bradford", "Bristol"]
var [first, ...rest] = devTeams;
console.log(rest.join(", "))   // Thor, Bradford,  Bristol
console.log(first);    //Yukon

Note: Here first and rest are not keywords as mentioned below
var [first, ...rest] = devTeams;
Or
var [start, ...remaining] = devTeams;


5. Insert array into the middle of the array but not an array within array

var middleArr = [0, 0];
var arr = [8, 7, middleArr, 6, 5];

From the above mentioned code, Can you guess the answer of arr?

The answer is :  [8, 7, [0, 0], 6, 5]

It’s good if you want the same result but what if I want a single array, not like as mentioned above.

So, here we can use the Spread operator as its allow us to expand the array too.
var middleArr = [0, 0];
var arr = [8, 7,...middleArr, 6, 5];

console.log(arr);
// [8, 7, 0, 0, 6, 5]

It is like magic…….. And also you can say It’s easy as pie… :)


6. Math

We can also use math functions with the Spread operator and here I will be using Math.max() for explanation.

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

Without the spread operator, easy way to use Math.max() with apply

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}
console.log(max(arr));
// Output: 8

So, What you think, what is the syntax of finding the max value with the Spread operator?

Here is the code:
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);


7. String to Array
Could you imagine, how many lines of code you will write to achieve the goal as mentioned?
Use the spread operator to simply convert a string to an array of characters:

var str = "helloworld";
var chars = [...str];
console.log(chars);
// [ "h", "e", "l", "l", "o", "w", "o", "r", "l", "d" ]


8. Replace apply:
In cases where you want to use the elements of an array as arguments to a function.

Example with apply
function myFunction(x, y, z) { console.log('Value y is ' + y); }
var args = [0, 1, 2];
myFunction.apply(null, args);
Example with Spread operator
function myFunction(x, y, z) { console.log('
// Value of y is 1

Value y is ' + y); }
var args = [0, 1, 2];
myFunction(...args);

// Value of y is 1

9. Shallow-cloning
Shallow-cloning (excluding prototype) or merging of objects is now possible using a shorter syntax than Object.assign().


var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }














No comments: