Object Destructuring

Object destructuring offers a sleek way to extract some variables from an object.

Here's a quick example:

const user = {
  name: 'François Bouchard',
  city: 'Saint-Louis-du-Ha! Ha!',
  province: 'Québec',
  country: 'Canada',
  postalCode: 'A1B 2C3',
};

const { name, country } = user;

console.log(name); // ‘François Bouchard’
console.log(country); // ‘Canada’

This is effectively the same thing as doing this:

const name = user.name;
const country = user.country;

We can pluck out as many or as few values as we want.

Renaming extracted values

Consider this situation:

const name = 'Hello!';

const user = { name: 'Marie-Hélene Pelletier' };

const { name } = user;
// Uncaught SyntaxError:
// Identifier 'name' has already been declared

We tried to destructure the name property into its own variable, but we run into an issue: there's already a variable called name!

In these cases, we can rename the value as we unpack it:

const name = 'Hello!';

const user = { name: 'Marie-Hélene Pelletier' };

const { name: userName } = user;

console.log(name); // ‘Hello!’
console.log(userName); // ‘Marie-Hélene Pelletier’

Default values

Here's a question: what happens if we try to destructure a key from an object which isn't defined?

const user = { name: 'Marie-Hélene Pelletier' };

const { status } = user;

console.log(status); // ???

Well, user.status isn't defined, and so status will be set to undefined.

If we want, we can set a default value using the assignment operator:

const { status = 'idle' } = user;

if the user object has a status property, that value will be plucked out and assigned to the new status constant. Otherwise, status will be assigned to the string "idle".

In order words, it's a modern version of this:

const status = typeof user.status === 'undefined'
  ? 'idle'
  : user.status;

Destructuring function parameters

Let's suppose we have a function which takes an object as its first parameter:

function validateUser(user) {
  if (typeof user.name !== 'string') {
    return false;
  }

  if (user.password.length < 12) {
    return false;
  }

  return true;
}

If we wanted, we could destructure these values at the top of the function:

function validateUser(user) {
  const { name, password } = user;

  if (typeof name !== 'string') {
    return false;
  }

  if (password.length < 12) {
    return false;
  }

  return true;
}

Using parameter destructuring, we can do this destructuring right in the function parameters:

function validateUser({ name, password }) {
  if (typeof name !== 'string') {
    return false;
  }

  if (password.length < 12) {
    return false;
  }

  return true;
}

All 3 of these code snippets are equivalent, but many developers enjoy using function parameter destructuring. It's especially popular in React to destructure the props in our components.

Named arguments (info)

Some languages have "named arguments", where the developer can choose to label the arguments they're passing into a function.

JavaScript doesn't have this feature, and as a result, it can be difficult to understand what role different arguments play.

For example, suppose you're working on a codebase, and you stumble upon this code:

trackSession(user.id, 5, null);

Why does this function receive a 5 and a null? It's totally mysterious. We'd need to hunt down the file where this function is defined to understand what these values are.

Suppose, though, that trackSession took an object as its only argument.

Then it would look like this:

trackSession({
  userId: user.id,
  version: 5,
  additionalMetadata: null,
});

By supplying an object, we effectively have to label each value! This works quite a lot like “named arguments” in other languages!

When I write a function, I'll often use parameter destructuring specifically so that I can pass an object in, rather than a bunch of individual arguments. That way, it's easier to understand what the provided data is.

Default parameter values

Like with typical object destructuring, we can supply default values to be used for parameters.

Here's a quick example:

function sendApiRequest({ method = 'GET', numOfRetries }) {
  // Stuff
}

When I call this function, I can supply my own value for method:

sendApiRequest({ method: 'PUT', numOfRetries: 4 });

…Or, if I want it to be equal to GET, I can omit it entirely:

sendApiRequest({ numOfRetries: 4 });

Gotcha: argument must be provided (warning)

Let's suppose we add default values for both of the properties in our function:

function sendApiRequest({ method = 'GET', numOfRetries = 5 }) {
  // Stuff
}

We then call this function without specifying an argument, since we want to use all of the default values:

sendApiRequest();

Unfortunately, we get an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'method')

Here's the problem: we're destructuring the method and numOfRetries properties from an object, but when we call the sendApiRequest function, we're not providing an object.

Here's another example of the same issue, which might make it clearer:

function sendApiRequest(properties) {
  // `properties` is undefined, and so we'll get the same
  // error when we try and extract values from it:
  const {
    method = 'GET',
    numOfRetries = 5
  } = properties;
}

sendApiRequest();

To solve this problem, we can set a default value for the first parameter, the object we're destructuring from:

function sendApiRequest(
  { method = 'GET', numOfRetries = 5 } = {}
) {
  // Stuff
}

sendApiRequest(); // ✅ No problem!

When we call sendApiRequest without passing in any arguments, the first parameter gets initialized to an empty object. Then, the method and numOfRetries properties are initialized using their default values, since they weren't defined in that empty object.

This stuff gets pretty complex. You certainly don't need to take advantage of all of this modern syntax. I just wanted to let you know that this is an issue you might run into.