Bootcamp
Search…
0.2.3: ES6 Destructuring, Spread Operators

Introduction

ES6 Destructuring and Spread Operators provide more convenient syntax for working with arrays and JS Objects.

Destructuring Assignment

Assign array or object properties to new variables.

Array Example

Assign and name variables according to their position in an array.
const row = ['X', 'O', 'X'];
const [left, center] = row;
console.log(left); // Output 'X'
console.log(center); // Output 'O'

Object Example

Assign and name variables according to their **name **in an object.
const user = { name: 'kai' };
const { name } = user; // Create a new variable called name
console.log(name); // Output 'kai'

Example: Return Multiple Values from Functions

Occasionally we may need to return multiple values from a function. If we wrap those values in an object, we can use ES6 destructuring to re-initialise those values as local variables in the parent function. ES6 named imports work the same way.
const conversions = (temperatureInFahrenheit) => {
let temperatureInCelcius = 123; // calculation goes here
let temperatureInKelvin = 456; // calculation goes here
​
return {
kelvin: temperatureInKelvin,
celcius: temperatureInCelcius,
};
};
​
const { kelvin, celcius } = conversions(20);
console.log(kelvin);
console.log(celcius);

Example: Import Multiple Named Exports

ES6 import uses object destructuring syntax to initialise variables for imported functions.

temperatureConversion.js

Given this file that exports 3 named functions...
export function kilometersToMiles(kilometers) { /* ... */ }
export function celciusToFahrenheit(temperatureCelcius) { /* ... */ }
export function kilogramsToPounds(kilograms) { /* ... */ }

index.js

... we can import those functions using named imports in a client module.
import {
kilometersToMiles,
celciusToFahrenheit,
kilgramsToPounds,
} from './temperatureConversion.js';
​
console.log(kilometersToMiles(3));
console.log(celciusToFahrenheit(3));
console.log(kilogramsToPounds(3));

Spread Operator

Return a shallow copy of the elements or key-value pairs inside an array or object respectively.

Example: Make Shallow Copy of Array

As many of us have observed, assigning an array to a new variable creates a new reference to the original array, and does NOT make a copy of the original array.
const temperatures = [23, 12, 45];
const temperaturesCopy = temperatures; // New var is reference to temperatures.
temperatureCopy.pop(); // This mutates the original temperatures array.
Using the spread operator with new array syntax makes a shallow copy of the original array. The same syntax works for objects.
const temperatures = [23, 12, 45];
const temperaturesCopy = [...temperatures]; // Make shallow copy of temperatures.
temperatureCopy.pop(); // This does NOT mutate the original temperatures array.
Shallow copies of arrays and objects are different from deep copies. A shallow copy is a new copy of values 1 level deep. A deep copy is a new copy of values no matter how many levels deep.
Read more on shallow and deep copies in this tutorial.

Example: Concatenate Arrays

We can combine multiple arrays using the spread operator as below. The spread operator provides a shallow copy of values in a given array or object.
const names = ['susan chan', 'garfield'];
const names2 = ['alex', 'chee kean'];
const combinedArray = [...names, ...names2]; // has all four elements inside

Example: Concatenate Objects

Similarly, we can merge the contents of 2 objects using the spread operator as below.
const userData = { name: 'kai' };
const userData2 = { height: 6 };
const combinedUserData = { ...userData, ...userData2 }; // has both keys inside

Rest Parameters

Rest parameters look similar to the spread operator but are used in a different context. We use rest parameters in lieu of function parameters, and the spread operator when assigning variables to values in arrays or objects. Rest parameters can be used when we want an array of the remaining function parameters, and do not want explicit variables for each remaining function parameter.

Example: Get Array of Function Parameters

numbers is an array containing all parameters passed to the add function.
const add = (...numbers) => {
let total = 0;
for (let i = 0; i < numbers.length; i += 1) {
total += numbers[i];
}
return total;
};
This will work no matter how many numbers we pass to add.
add(2, 2, 2); // will return 6
add(1, 1, 1, 1, 1, 1); // will also return 6

Further Reading

Read more about destructuring and spread operators here.