An Introduction to the Javascript Spread Operator

The Spread operator is an ES6 feature, newly added in Javascript. In code it is denoted by ... (three dots).

Spread syntax will expand an iterable, such as an array or a string. Expansion here means that the input object is broken down to its individual values.

For example consider an array. If we want to get individual elements of the array we would have used a loop. The Spread operator does the same thing — loops over it and gets individual values — and in shorter syntax. The expanded object can be for used for passing parameters to a function or for merging with another iterable object.

Iterable Objects

We have used the term "iterable" quite a lot in the earlier paragraph. In very simple words consider this as an object that be iterated — or looped. For example an array can be looped over its values. A String (basically an array of characters) can also be looped over its characters. A Set object that contains unique values can be looped. However a normal Javascript object cannot be looped (it is however possible to convert a normal object to a iterable object by following a set of rules).

You can know more about iterable objects at ES6 In Depth: Iterators and the for-of loop.

Using Spread Operator to Create Arrays

Spread syntax can be best understood with examples.

• Copying an array : Assume we have to copy an array. Normal Javascript would be something like :

  var arr = [1, 2, 3];
  
  var new_arr = arr.slice();
  

  But with the Spread syntax it would look like :

  var arr = [1, 2, 3];
  
  var new_arr = [...arr];
  

• Merging arrays : The concat() method is the most common way to merge arrays :

  var arr = [1, 2, 3];
  var arr2 = [4, 5, 6];
  
  var new_arr = arr.concat(arr2);
  
  // [1, 2, 3, 4, 5, 6]
  console.log(new_arr);
  

  With the Spread syntax it would be :

  var arr = [1, 2, 3];
  var arr2 = [4, 5, 6];
  
  var new_arr = [...arr, ...arr2];
  
  // [1, 2, 3, 4, 5, 6]
  console.log(new_arr);
  

The ... is basically expanding the array and placing its elements one after the other.

Using Spread Operator to Pass Parameters in Function Calls

The Spread syntax can be used in function calls. Imagine a function that accepts multiple arguments. While calling the function we can pass parameters through ... which is syntactically much shorter.

// function that accepts 3 parameters
function someFunc(a, b, c) {
	console.log(a + " " + b + " " + c);
}

// assume we need to pass values of this array to the function
var arr = [1, 2, 3];

// conventional way to call the function
someFunc(arr[0], arr[1], arr[2]);

// function calling with spread
someFunc(...arr);

The length of the array need not be equal to the number of parameters of the function.

function someFunc(a, b, c) {
	console.log(a + " " + b + " " + c);
}

var arr2 = [1, 2, 3, 4, 5, 6];

// "1 2 3" will be printed as function accepts 3 parameters only
someFunc(...arr2);

Conclusion

The Spread syntax can help us to write shorter code. Using this may be a bit different in the beginning, but it is indeed a useful addition to Javascript.