Languages
[Edit]
EN

JavaScript - spread operator (...)

0 points
Created by:
MindOfMadness3
696

In this article, we would like to show you how works spread operator in JavaScript.

The spread operator allows you to spread the iterated value into its components.

Usage examples:

1. Breaking an array into individual elements:

// ONLINE-RUNNER:browser;

const array = [1, 2, 3, 4, 5];
console.log(...array);  // 1, 2, 3, 4, 5

// split the text into individual letters
const string = "Dirask";
console.log(...string);  // D, i, r, a, s, k

2. Copying an array:

// ONLINE-RUNNER:browser;

const array = [1, 2, 3, 4, 5];
const array2 = [...array];
console.log(array2);  // 1, 2, 3, 4, 5

3. Combine arrays:

// ONLINE-RUNNER:browser;

const array1 = [2, 3, 4]
const array2 = [1, ...array1, 5, 6, 7];
console.log(array2);  // 1, 2, 3, 4, 5, 6, 7

4. Math object. 

Functions like Math.max() expect many parameters. We can't pass the array as one argument there, so we can use the spread operator.

// ONLINE-RUNNER:browser;

let array = [1, 2, 3, 4];

console.log(Math.max(1, 2, 3, 4));  // 4
console.log(Math.max(array));       // NaN
console.log(Math.max(...array));    // 4

5. We can also apply the spread operator to objects.

// ONLINE-RUNNER:browser;

const object1 = {
    x : 5,
    y : 7
}

const object2 = {
    y : 11,
    z : 23
}

const object3 = {
    k: 33,
    ...object1,
    ...object2
};

const object3String = JSON.stringify(object3, null, 4);
console.log(object3String);  // { k : 33, x : 5, y : 11, z : 23 }

As we can see above, the order does matter - y value from Object1 has been overridden by value from Object2.

Note: 

There is also the restoperator (...) which looks the same and works quite similar, but there are a few differences between the spread operator and the rest operator, which you can read about here.

References

  1. Spread syntax (...) - MDN

  2. JavaScript - array destructuring with rest parameter.

Alternative titles

  1. JavaScript - Spread syntax (...)
  2. JavaScript - three dots syntax
  3. JavaScript - three dots operator
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join