JavaScript – What is the Meaning of Three Dots (…)?

In this post, we will examine a feature introduced in ES6 that is spread, operator, and rest operator.

I’ve become a huge admirer of the three dots that may transform your approach to tackling the problem within JavaScript. We may utilize three dots … in two distinct methods as spread operator and rest operator.

Rest Parameters

With rest parameters, we can aggregate arguments into an array and perform what we want with them. Rest parameters have been provided to eliminate the boilerplate code that was caused by the arguments.

function restParamenter(a, b, c, ...args) {
 console.log(a); // 11
 console.log(b); // 22
 console.log(c); // 33
 console.log(args); // [11, 22, 33, 66, 88]
};
restParamenter(11, 22, 33, 66, 88);

In restParamenter function the last 2 parameters are prefixed with … which will cause to all remaining arguments to placed into the javascript array.

The args parameters aggregate all remaining arguments thus there is no reason to add args parameter before the last parameter. The args parameter has to be the last formal parameter.

function restParamenter(arg1, ...rest, arg2) {
  // arg2 ?
}

Rest parameters can be destructured (arrays only), which implies that their contents can be unpacked into different variables.

function restParamenter(...[x, y, z]) {
  return x * y* z;
}

restParamenter(1)          // NaN
restParamenter(1, 2, 3)    // 6
restParamenter(1, 2, 3, 4) // 6 //only three parameters in the function defination

Spread Operators

The spread operator is used to stretch items of an iterable (such an array) into areas where several elements can fit.

function spreadOperator(x, y, ...params) { // used rest operator here
  console.log(x);
  console.log(y);
  console.log(params);
}

var inputs = ["a", "b", "c", "d", "e", "f"];
spreadOperator(...inputs); // used spread operator here
// "a"
// "b"
// ["c", "d", "e", "f"]

There have always been a variety of ways to join arrays, however, the spread operator provides use a new technique for combining arrays:

const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian'];
const specialty = ['Meatzza', 'Spicy Mama', 'Margherita'];

const pizzas = [...featured, 'veg pizza', ...specialty];

console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita'

With spread operator, Shallow-cloning (excluding prototype) or merging of objects is now feasible using a simpler 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 }

Author Images
Syed
From Islamabad

A software developer with a keen interest in writing about technology, finance, and entrepreneurship. I've written for businesses in a variety of fields, including new technology, healthcare, programming, consumer applications, corporate computing, UI/UX, outsourcing, and education.

Post a comment

Your email address will not be published. Required fields are marked *

    Press x to close