Destructuring - Spread - Rest

Object Destructuring

Given the following object:

const person = {
  name: "Andrew",
  age: 16,
  hobby: "hockey,
}

instead of accessing the keys like this:

const name = person.name;
const age = person.age;
const hobby = person.hobby;

We use object destructuring in this way:

const { name, age, hobby } = person

We can also access just one of the keys:

const { hobby } = person

If we try to access an nonexisting key we get undefined for that one:

const { hobby, something } = person
// hockey undefined

If the variable has been defined before, rename the one being de-structured:

const hobby = 'tennis'
const { hobby: hobbyTwo, age, hello }

Array Destructuring

Given the following variable

const elements = ["this", "is", "an", "array"]

To destructure, instead of doing:

const firstEl = elements[0]
const secondEl = elements[1]
const thirdEl = elements[2]
const fourthEl = elements[3]

Use instead:

const [ firstEl, secondEl, thirdEl, fourthEl ] = elements

To access the n member in the array (for example, the fourth):

const [ , , ,fourthEl]

(There should be a placeholder to keep their position in the array)

Use of destructuring in function arguments

Instead of:

function someName(obj) {
  console.log(obj.name)
}

use:

function someName({ name }) {
  console.log(name)
}

If we use destructuring and the argument isn't provided in the function call, that will throw an error. To avoid that, provide a default.

For example, an empty object will return undefined but it won't throw an error.

function someName({ name } = {} ) {
  console.log(name)
}

someName();
// undefined <== but no error!

The same applies to arrays:

function someName([ firstEl ] = [] ) {
  console.log(name)
}

someName();
// undefined <== but no error!

Rest Operator

Given this object:

const person = {
  name: "Andrew",
  age: 16,
  hobby: "hockey,
}

We can spread some keys into a new object:

const { age, ...newObj } = person

console.log(age, newObj)
// 16 { name: 'Andrew', hobby: 'hockey' }

It puts the "rest" inside a new object, so in this case we get the "rest" in a new object:

const { age, name, ...newObj } = person

console.log(newObj)
// { hobby: 'hockey' }

The same applies for arrays:

const elements = [ "this", "is", "an", "array" ]
const [ firstEl, secondEl, ...rest ] = elements
console.log(firstEl, secondEl, rest)
// this is [ 'an', 'array' ]

We can use the rest operator in functions:

function someFunc(firstArg, ...restOfArgs) {
  console.log(restOfArgs)
}

someFunc(1, 2, 3, 4, 5, 6)
// [2, 3, 4, 5, 6]

Spread Operator

Given this object:

const person = {
  name: "Andrew",
  age: 16,
  hobby: "hockey,
}

If we want to create a new object, extendedPerson:

const extendedPerson = {
  ...person,
  nickname: "Andy"
}
console.log(extendedPerson)
// { name: 'Andrew',
//   age: 16,
//   hobby: 'hockey',
//   nickname: 'Andy' }

We can use the spread operator to overwrite one of the properties:

const extendedPerson = {
  ...person,
  hobby: "New Hobby",
}

It can be used to merge objects:

const person = {
  name: "Andrew",
  age: 16,
  hobby: "hockey,
}

const extra = {
  nickname: "Andy"
}

const extendedPerson = {
  ...person,
  hobby: "New Hobby",
  ...extra,
}

It functions similarly in arrays:

const arr1 = [ "some", "random", "words" ]
const arr2 = [ 16, 1, 4 ]
// It can be used to concatenate the two:
const arr3 = [...arr1, ...arr2]
console.log(arr3)
// [ 'some', 'random', 'words', 16, 1, 4 ]

It can be used adding new values in between:

const arr3 = [ ...arr1, "something", "new", ...arr2 ]

Backlinks

Javascript

- [[javascript-destructuring-rest-spread]]