JavaScript rest and spread operators

JavaScript’s rest parameters and spread syntax can be hard to distinguish at first since they look exaclty the same.

In this post, we are going to quickly learn and become able to remember the difference between Javascript’s rest and spread operators.

js rest vs spread:

rest

Rest parameters are used in function definitions and converts incoming args (e.g. 1,2,3,4) into an Array [1,2,3,4]. Examples below | MDN docs

JavaScript ES6 Rest Parameter Animation

spread

The spread syntax is usually used as an argument in function calls to expand an array (e.g. [1,2,3,4]) into a series of arguments 1,2,3,4 to be passed to the function.Examples below | MDN docs

quick rule of thumb:

If you see ...varName in a function DEFINITION e.g. function fn(a1, a2, ...others){}, it’s a ‘rest’. Elsewhere, it’s a ‘spread’.


‘Rest Parameter’ Examples

as sole parameter:

1
2
3
4
5
6
7
8
9
10
11
12
// SAY YOU:
// 1) want to call your function with *any number of arguments like:
doWork('a', 'whole', 'lotta', 'args');
doWork('a', 'whole', 'lotta', 'more', 'args', 1, 2, 3);

// 2) you can define a function that will gather all
// the arguments into an array name inputArray like so:
function doWork(...inputArray) { // 'rest' parameter
console.log(inputArray);

// ['a', 'whole', 'lotta', 'args']
}

as last parameter”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// SAY YOU:
// 1) want to call your function with *any number of arguments like:
doWork('a', 'whole', 'lotta', 'args');
doWork('a', 'whole', 'lotta', 'more', 'args', 1, 2, 3);

// 2) and the first few args are important so you'll have a few 'named' arguments
// and then collect the 'rest' in an array named inputArray like so:
function doWork(arg1, arg2, ...inputArray) { // MUST be the final parameter
console.log(arg1);
console.log(arg2);
console.log(inputArray);

// 'a'
// 'whole'
// ['lotta', 'args']
}

NOTE:

There is also a traditional arguments object people also use for things like this, but there are important differences:

  1. It is an object not an Array so you would have to convert it to an Array first before using any Array methods.
  2. It always holds ALL the arguments. With rest parameters we can control which of arguments make it into the array e.g. function doWork(arg1, arg2, ...inputArray){} // arg1 and arg2 are not included

‘Spread Syntax’ Examples

as a function call argument”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 1) You have a function that takes some args like:
function doWork(arg1, arg2, arg3, arg4) {
// do stuff
}

// 2) and you have an array like:
const myArray = ['a', 'b', 'c', 'd'];

// 3) you can't just do this:
doWork(myArray); // arg1 === myArray, arg2 === undefined, etc.

// 4) but you can do this:
doWork(...myArray); // 'spread' array; same as doWork('a', 'b', 'c', 'd').

// NOTE: you can also do this with any builtin or library function
// that takes several arguments. e.g. Date(year, month, date)
const dateInfo = [2019, 3, 3];
const date = new Date(...dateInfo);

creating arrays

1
2
3

const myArray = [1,2,3];
const newArray = [0, ...myArray]; // [0,1,2,3,4]

FINAL NOTE:

Don’t allow the number of arguments in a function call to be above 65535 or things will start getting weird/error out.
refs:
MDN mentions hardcoded limit of 65536
Webkit discussion
stackoverflow experiment showing varings maxes per browser

Share