Abhinav Rai

Triple dot in JS

One of the most used features of ES6. You must have seen this syntax in many places. These tools allow us to perform some common operation in a more concise and elegant way.

Let me start with some examples and use cases.

You want to send arbitrary parameters to the function. How to do that?

One way is to send an array.

function sumOfAnyNumbers(args) {
  let sum = 0;
  for (let i=0;i<args.length;i++) {
    sum += args[i]    
  }
  return sum;
}
sumOfAnyNumbers([1,5,2,3]);
// returns 11

What if we could send them just like arguments?

tripleDotSumOfNumbers(1,5,2,3)
// should return 11

Now let’s make this tripleDotSumOfNumbers

function multiplyNumbers(...args) {
  console.log(args);
}
function tripleDotSumOfNumbers(...args) {
  console.log(args); // [1,5,2,3]
  console.log(...args) // 1,5,2,3
  let multipliedResult = multiplyNumbers(...args); // [1,5,2,3]
  
  let sum = 0;
  for (let i=0;i<args.length;i++) {
    sum += args[i]    
  }
  return sum;
}

Some Nerd definations now: Rest Operator and Spread Operator

  • Rest Operators — The …args we used in tripleDotSumOfNumbers is called rest operator. It occurs in the end of function call and collects all the rest arguments in an array. Hence the name Rest Operator.
  • Spread Operators — This converts the array into list. This occurs when you call a function.

The spread operator allows an iterable to spread or expand individually inside a receiver. Iterables are anything that can be looped over such as strings, arrays, and sets. For example —

const name= 'ABHINAV'; 
const characters = [ ...name ]; // ['A','B', 'H','I','N','A','V']

Together they help to travel between a list and an array of parameters with ease.

You want to combine 2 arrays together

let a = [1,2,3,4];
let b = [5,6,7];
console.log([a, b]); // [[1,2,3,4],[5,6,7]] Not something we need
console.log(a.concat(b)); // [1,2,3,4,5,6,7]
console.log([...a, ...b]); // [1,2,3,4,5,6,7]

Clone an Array or Object

let a = {mother: 1, father: 2};
let b = a;
b.mother = 2;
console.log(a); // {mother: 2, father: 2} Not something we need
b = {...a};
b.mother = 3;
console.log(a); // {mother: 2, father: 2} a did not change

let arr1 = [1,2,3];
let arr2 = [...arr1];
arr1[0] = 10;
console.log(arr2); // [1,2,3] arr2 did not change

Destructuring

Destructuring means taking out ( technically, making a copy of ) individual items from an object or an array and assigning them to a variable. Example ( with arrays) —

const address = [221, 'Baker Street', 'London'];
const [ houseNo, , city ] = address;
console.log(houseNo, city)
// 221 'London'

Notice the bold line. To the left of the = sign, we declared the variables which will hold the extracted values. We use const because we intend to make the variables constant. let could have also been used instead. Then, we wrote the names of the variables in an array-like syntax, that is, beginning and ending with a [ and ] since we are destructuring from an array.

const details = { firstName: 'Code', lastName: 'Burst', age: 22 };
const { firstName, age } = details;
const {somethingRandom} = details;
console.log(firstName, age);
// Code 22
console.log(somethingRandom);
// undefined

It is important to note that destructuring does not remove properties or values from the original object or array. It merely copies it.

Further… ES8

ECMAScript 6 introduces rest elements for array destructuring assignment and spread elements for array literals.

Really great read: