JavaScript spread operator, accepting any number of argument in function and class

Author image
Author

Fashanu T.

28, Jan 2021

2 Minutes Read...


We will learn about spread operator and its applications, as well as the arguments keyword in JavaScript.

Table of content:

  1. Spread operator
  2. Arguments

Spread operators lets you include the full elements of an array or object to where they are needed, i,e function etc.

For instance, we can create a copy of an array using the spread operator. But firstly, lets check the example below:

javascript
let x = ['john','caleb','mark'];
let y = x;

From the above, you would think y is now a copy of x, since you assigned y as x, but its not.

If you change any value in x, y also will change as it only sets a reference to x.

But, we do not want this, we simply want to create a copy of x.

One way to do this is to use Object.assign by creating a new array.

javascript
let copy = Object.assign([], x);

The new copy array from the above is now a shallow copy of xbecause, it only copies the element and not its prototype.

Another way to make a copy of an array, is by using the JavaScript spread operator like below:

javascript
let copy = [...x];

copy in this case is an array with all the elements from x.

Furthermore, we can view spread operator as including all the elements of an array in where they are needed.

Lets say we want to merge two arrays together, we can achieve this by using the spread operator in JavaScript.

javascript
let x = [0,1,2,3,4];
let y = [5,6,7,8,9];

The way to visualize spread operator is like this:

...x = 0,1,2,3,4;

...y = 5,6,7,8,9;

javascript

ley z = [...x,...y];

console.log(z);

// 0,1,2,3,4,5,6,7,8,9

Spread operator (...) have a lot of interesting functionality and we can speed up or simplify a lot of our code using them.

NOTE: before the spread operator, it is common to use apply method to get the same effect.

javascript

function myfunc(a,b,c) {}

let arr = [1,2,3];

myfunc.apply(null, arr);

With spread operators, you can simplify everything by doing this:

javascript
myfunc(...arr);

Using spread operator to get the total number of passed arguments as an array in JavaScript:

If you have a method and would like to pass arguments of unknown length or count.

Maybe you just want to include additional arguments to your function without having to manually include a placeholder parameter each time, like the example below:

javascript
function test(a, b) {
    return a+b;
}
console.log ( test(1,2,3) ); // return 3

To get the sum of any length of passed argument, without having to add c, d, e.... parameters:

javascript
function test(...arr) {
  return arr.reduce( function(a,b) { return a+b; } );
}
console.log ( test(1,2,3) ); // return 6
javascript
console.log( test(1,2,3,4,5) );
// return 15

From the above, it shows that you can extend the number of arguments to the test method without having to add additional parameters like a,b,c,d,e and more..

NOTE: The the callback function in the reduce method from above takes each element and sums it up with the next one in the array.

Lets take a look at further examples below:

javascript
function test (...realArray) {
  return realArray;
}
console.log( test(1,2,3) ); // return [1,2,3] console.log( test(1) ); // return [1]; function test2 (...arr) { return arr[0]; } console.log( test2(1,2,3) ); // return 1

The example above shows how useful spread operator can be to writing code in JavaScript.

Lets say we have a bunch of strings inside an array like below:

javascript
let str = ['i',' love',' coding'];

Using spread operator, we can actually concat the array of strings from the above into a single string.

javascript
console.log( ...str );
// i love coding

Argument and Parameters in JavaScript

Arguments and parameters are interchanged when it comes to JavaScript.

Basically, parameter are part of a method in JavaScript and are used within that function to perform a task, or are placeholders for argument to be passed when that function/method is invoked.

Arguments, on the other hand are passed to an invoked function.

The arguments keyword in JavaScript

The keyword arguments is an array like object used within a method body. It lets you pass any number of parameters inside a method in JavaScript.

javascript
function play () {
  return arguments;
}

console.log( play(1,2,3,4) );
// returns an array containing 1,2,3,4, with and a bunch of other properties like below.



class test {
  constructor() {
     return arguments;
   }
}

var show = new test(1,2,3);
console.log( show );
//return  [1, 2, 3, callee: (...), Symbol(Symbol.iterator): ƒ]0: 11: 22: 3callee: (...)length: 3Symbol(Symbol.iterator): ƒ values()get callee: ƒ ()set callee: ƒ ()__proto__: Object]


console.log ( show[0] );
//return 1; class test2 { constructor(...arr) { return arr; } } var show2 = new test2(1,2,3);
console.log( show2 ); // return [1, 2, 3]

The argument keyword from above returns an array like object with a bunch of other properties in that array.

More read:

  1. All about closure in javascript here.
  2. Most important string methods you should know in JavaScript.