Link Search Menu Expand Document
Web Dev Two

Spread and Rest Syntax

There’s syntax in Javascript that allows us to “spread out” and “gather in” lists of data.

Table of Contents

  1. Array Spreading into Function Arguments
  2. Array Spreading in Array Literals
  3. Spread Syntax - Array Destructuring
  4. Spread Syntax: Objects Literals
  5. Rest Parameters

Array Spreading into Function Arguments

We sometimes need to “spread out” the contents of an array or a string into the arguments of a function call.

We can do this with the ... spread syntax.

For example, the Math.max method takes any number of arguments.

console.log(Math.max(42, 56, 102, 12, 15)); // 102

But what if the numbers are in an array?

const numbers = [42, 56, 102, 12, 15];

console.log(Math.max(...numbers)); // 102

Array Spreading in Array Literals

The ... spread syntax can also be used to “spread out” an array within a new array literal.

Array concatenation* without concat():

const litanyStart = ["Fear", "is", "the"];
const litanyEnd = ["mind", "killer"];
const litanyFull = [...litanyStart, ...litanyEnd];

console.log(litanyFull);

// [ 'Fear', 'is', 'the', 'mind', 'killer' ]

Or even:

const middle = ["is", "the"];
const litany = ["Fear", ...middle, "mind", "killer"];

console.log(litany);

// [ 'Fear', 'is', 'the', 'mind', 'killer' ]

*In the coding world, concatentation means gluing collections together.

Spread Syntax - Array Destructuring

We can also involve the ... spread syntax in our destructuring:

const sentence = ["this", "is", "the", "house", "that", "🦆", "built"];
const [first, second, ...theRest] = sentence;

console.log(first);
console.log(second);
console.log(theRest);

// this
// is
// [ 'the', 'house", "that", "🦆", "built" ]

Spread Syntax: Objects Literals

The spread syntax can also be used to merge objects.

const userSome = { fullName: "Wally Glutton", age: 42 };
const moarUser = { username: "stungeye", friend: "Daisy" };

const userFull = { ...userSome, ...moarUser };

// { fullName: "Wally Glutton", age: 42, username: "stungeye", friend: "Daisy" }

If a key appears in more than one of the objects it’s the last pair that gets to set the value.

let book = { name: "Anathem", quote: "Boredom is a mask frustration wears." };

// Book already contains a 'quote' key but not an 'author' key.
book = { ...book, author: "Neal Stephenson", quote: "Topology is destiny." };

// { name: "Anathem", quote: "Topology is destiny.", author: "Neal Stephenson" }

Resources

Rest Parameters

Rest parameters use the same ... syntax as spread, but here we use it to create functions that can take any number of arguments.

function sayGoodnight(...names) {
  const nameList = names.join(", ");
  console.log(`Goodnight ${nameList}!`);
}

sayGoodnight("Wally");
sayGoodnight("Wally", "Daisy");
sayGoodnight("Wally", "Daisy", "Sammy", "June");

// Goodnight Wally!
// Goodnight Wally, Daisy!
// Goodnight Wally, Daisy, Sammy, June!

Resources