Spread Operator In Javascript

Hey everyone, in today's article we'll look at the Spread Operator in Javascript. It originally appeared in ES6 (Javascript upgrade from 2015). It is identical to the rest operator only in syntax. Remember to bookmark this page so you can come back to it later.

Spread Operator

Meaning: The Spread Operator expands or spreads all of the elements in an array.
Syntax:

...arrayName

The spread operator converts the array into single items.
Example:

const arrValue = ['My', 'name', ' is', 'Fotie '];
console.log(arrValue); // ['My', 'name', ' is', 'Fotie '];
console.log(...arrValue); // My name is Fotie

Passing Array to Rest Operator

The question is, what is a rest operator in the first place?
Rest operator: This is also known as rest parameter. The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent variadic functions in JavaScript.
For example;
JavaScript: Functions Rest Parameters

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

As you know, rest operator takes all the arguments and store them by making an array but what if you pass the array of items as an argument?
then:

function myFunction(name, ...args){
  console.log(name);
  console.log(args);
}

var arr = [5, 10, 15];
myFunction( "fotie" , arr); // result on the screenshoot below;

The array will be treated as a single element, and a new array will be created and placed in the new array generated by the rest operator. What can be done about it?

Use Spread Operator with array:

function myFunction(name, ...args){
  console.log(name);
  console.log(args);
}

var arr =  [5, 10, 15];
myFunction("fotie", ...arr); // use spread operator here // result on the screenshoot below;

It will break the array and deliver all of the array contents to the rest operator as individual items. Remember to use the spread operator when calling a function and the rest operator when declaring a function.

Copy or Concat Array Using Spread Operator

You can also use the spread operator to copy or concat(attach) one array to another:

const arrl = ['one', 'two' ];
const arr2 = [...arrl, 'three', 'four', 'five'];
console.log(arr2) ;
// Output:
// [ "one ", "two", "three ", "four", "five "]

Clone Array Using Spread Operator

Clone without spread operator:

let arr1 = [ 1, 2, 3];
let arr2 = arr1;

console.log(arr1); // output: [1, 2, 3]
console.log(arr2); // output: [1, 2, 3]

// append an item to the array
arr1.push(4);

console.log(arr1); // output: [1, 2, 3, 4]
console.log(arr2); // output: [1, 2, 3, 4]

Little observation above: We notice how modifying arr1 equally affects arr2. This is because an array, or an object in javascript always holds the reference not the object itself. Thus both variables have a reference to the same object/array.

The spread operator, on the other hand, may be used to clone arrays such that they do not refer to the same array. This prevents changes in one array from affecting the other. For instance;

let arr1 = [ 1, 2, 3];

// copy using spread syntax
let arr2 = [...arr1];

console.log(arr1); // output: [1, 2, 3]
console.log(arr2); // output: [1, 2, 3]

// append an item to the array
arr1.push(4);

console.log(arr1); // output: [1, 2, 3, 4]
console.log(arr2); // output: [1, 2, 3]

Spread Operator with Object

You can also use spread operator with objects:

const obj1 = {
    X: 1,
    y: 2
  };
const obj2 = {
    z: 3
  };

// add members obj1 and obj2 to obj3
const obj3 = {...obj1, ...obj2};
console.log(obj3);
//output:
/* {
  y: 1,
  x: 2,
    z: 3
   }
*/

Recap: The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array. But the spread syntax expands iterables into individual elements.

In conclusion, i'd say that it's really important to understand the main difference betweeen rest and spread operator, and when and how to use them respectively in your code.

Thanks for reading. Let me know what you think down in the comment section below.