Learning ES6 JavaScript Spread Operator

Posted on Jan 06, 2021

How you can use JavaScript spread operator on arrays and objects


JavaScript spread operator (...) is used to expand the values of an iterable ( usually an array or an object) so that you can pass those values as arguments of a function. For example, let’s say you have a function that calculates the sum of three numbers:

function sumThree(a, b, c){
  return a+b+c;
}

Next, you want to pass an array of three numbers into the function. You can use the spread operator on the function:

let scores = [7, 9, 7];

let summedNumber = sumThree(...scores);
// The same as sumThree(7, 9, 7); 

console.log(summedNumber);
// output is 23

You can merge two or more arrays using spread operator:

let firstArray = [4, 5];
let secondArray = [9, 10];

let mergedArray = [...firstArray, ...secondArray];
// mergedArray is [4, 5, 9, 10]

You can also use this merging technique to objects:

let firstObject = { name: "Jack" };
let secondObject = { age: 19 };

let mergedObject = {...firstObject, ...secondObject};
// mergedObject is { name: "Jack", age: 19 }

But the spread operator can’t be used to pass object properties into a function:

let user = {
  name: "Jack",
  age: 27
};

function greetings(name, age){
  console.log(`Hello, my name is ${name} and I'm ${age} years old`);
}

greetings(...user);
// Will cause an error
// Uncaught TypeError: Found non-callable @@iterator at <anonymous>:1:1

Spread operator use cases

The spread operator can be used on both Math.min and Math.max method to find the value inside an array.

It also can be used on React to pass props between components.

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.