Welcome back to my weekly Airbnb JavaScript style guide explainer. Airbnb, the online marketplace for housing rentals, has a high quality and ‘mostly reasonable’ style guide for JavaScript, a programming language that adds dynamic behaviors to web browsers. Some of the topics in the guide are a bit advanced for beginners. This “Explain Like I’m 50” (ELI50) series will act as a plain English companion-guide to the Airbnb style guide, because good design principles shouldn’t be out of anyone’s reach.

The topic of the 5th section of the style guide is destructuring which is a convenient way of extracting data from arrays, and objects. To learn the basics of destructuring you can read this simple guide from Wes Bos and to get a deeper dive you can read this guide from untangled.io.

Section 5: Destructuring

What does destructuring look like?

Destructuring looks backwards at first. With arrays, each variable on the left is being assigned, in order, to the elements in the array on the right.

const beatles = ['John Lennon', 'Paul McCartney', 'George Harrison',
  'Ringo Starr', 'Brian Epstein'];
// Destructuring
const [rhythmGuitar, bass, leadGuitar, drums] = beatles;

Objects work similarly. In this case destructuring makes variables with the names of each of the attributes that you’re pulling out of the object.

// Object
const beatles = {
  rythmGuitar: 'John Lennon',
  bass: 'Paul McCartney',
  leadGuitar: 'George Harrison',
  drums: 'Ringo Starr'
  manager: 'Brian Epstein'
};
// destructuring
const { rhythmGuitar, bass, leadGuitar, drums } = beatles;

Both ways end up with a set of four variables (rhythmGuitar, bass, leadGuitar, and drums) Each variable contains the name of their respective Beatle.

5.1: Use object destructuring when accessing and using multiple properties of an object. jscs: requireObjectDestructuring

This, and the following rule, should be followed because they are terser and allow you to avoid making temporary variables to hold the data.

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

5.2: Use array destructuring. jscs: requireArrayDestructuring

If you need non sequential values you can use something like const [first, __, third] = arr;.

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

5.3: Use object destructuring for multiple return values, not array destructuring. jscs: disallowArrayDestructuringReturn

When using destructuring to get data from an array you pull the data in order. Think back to the Beatles array in the first example. If you wanted the first and third value only you would need to do something like const [rhythmGuitar, __, leadGuitar] = beatles;. Using object destructuring allows us to ignore ordering and just get the things we want.

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}

// the caller selects only the data they need
const { left, top } = processInput(input);


Why Should I Care?

The primary use case for destructuring is passing data around and is invaluable when creating complex programs with lots of moving parts.


Next up:

Next Saturday I’ll explain what strings are and the best way to work with them.