Spread Syntax

This Scrimba screencast was created by Dylan C. Israel.

The spread syntax, also referred to as the spread operator, is one of the more confusing and yet incredibly useful features recently introduced to JavaScript. The spread syntax can be used with arrays, objects, and functions.

Arrays

Watch "Spread operators" on LinkedIn Learning

The spread syntax is a shortcut to write out or spread all the elements of an array. This can be useful for combining arrays.

const primary = ['red', 'blue', 'yellow']
const secondary = ['purple', 'green', 'orange']


console.log([...primary, ...secondary]) 
// ['red', 'blue', 'yellow', 'purple', 'green', 'orange']

TIP

The spread syntax can be an effective way to create a copy of an array.

Take the Spread Operator challenge on freeCodeCamp

Objects

Just like an array, the spread syntax can be used to unpack object properties.

const person = {
  firstName: 'John',
  lastName: 'Smith'
}

const contact = {
  ...person
}

console.log(`${contact.firstName} ${contact.lastName}`)

See Also

This YouTube video was created by Steve Griffith.