Modern JavaScript: Basic Object Destructuring

• We've seen destructuring in arrays:

• >

  const names = ['Amir', 'Betty'];
  const [firstName] = names;
  firstName;

  Result:

  'Amir'

• We can also destructure objects. In arrays, our variable values are matched up with array indexes in the order the variables were declared. For objects, we can pick out specific properties by matching up their names.

• >

  const user = {name: 'Amir', email: 'amir@example.com', age: 36};
  const {name, age} = user;
  [name, age];

  Result:

  ['Amir', 36]

• Unlike array elements, object properties aren't ordered, so we can destructure in any order.

• >

  const user = {name: 'Amir', email: 'amir@example.com', age: 36};
  const {age, name} = user;
  [name, age];

  Result:

  ['Amir', 36]

• As with arrays, trying to destructure null or undefined will throw an error. (You can type error when a code example will throw an error.)

• >

  const {name} = null;

  Result:

  TypeError: Cannot destructure property 'name' of 'null' as it is null.

• >

  const {name} = undefined;

  Result:

  TypeError: Cannot destructure property 'name' of 'undefined' as it is undefined.

• If the property doesn't exist in the object, we'll get undefined.

• >

  const user = {name: 'Amir', email: 'amir@example.com', age: 36};
  const {loginCount} = user;
  loginCount;

  Result:

  undefined

• We can supply default values when destructuring. If the property doesn't exist, we'll get the default value instead.

• >

  const user = {name: 'Amir', email: 'amir@example.com'};
  const {loginCount=0} = user;
  loginCount;

  Result:

  0

• >

  const user = {name: 'Amir', email: 'amir@example.com', age: 36, loginCount: 17};
  const {loginCount=0} = user;
  loginCount;

  Result:

  17

• We can collect the rest of the properties with ..., which will give us an object with every property that wasn't matched explicitly. In the next example, ...rest will give us an object with the email property and its value.

• >

  const user = {name: 'Amir', email: 'amir@example.com'};
  const {name, ...rest} = user;
  rest;

  Result:

  {email: 'amir@example.com'}

• Here's a code problem:

  Use a single object destructuring operation to:

  • Extract the user's name into the name variable.
  • Put all of the other properties and their values into a rest variable.
  9

  1

  const user = {name: 'Amir', email: 'amir@example.com', age: 36};

  10

  2

  const {name, ...rest} = user;

  11

  3

  4

  const nameAndRest = [name, rest];

  nameAndRest;

  Goal:

  ['Amir', {email: 'amir@example.com', age: 36}]

  Yours:

  ['Amir', {email: 'amir@example.com', age: 36}]

  Show Author's Answer

• When necessary, we can destructure a property into a variable with a different name. We separate the object property and the variable name with a :.

• >

  const {name: userName} = {name: 'Amir', email: 'amir@example.com'};
  userName;

  Result:

  'Amir'

• What if we want to destructure an object, but the property name is dynamic? For example, we might not know the property name in advance, or we might compute it from other strings. We can do that using syntax that's similar to computed properties from an earlier lesson.

• >

  const key = 'na' + 'me';
  const {[key]: value} = {name: 'Amir'};
  value;

  Result:

  Run Code

• The value of [key] is computed at runtime by looking at the variable key. As we saw in an earlier lesson on computed properties, we use [square brackets] when we want a computed property name.

• In the code above, the key variable contains 'name', so we're looking up the name property. We destructure that property's value into the value variable.

• As with regular computed properties, we can put any expression inside the [square brackets]. It can contain function calls, mathematical operators, etc.

• >

  const key = 'NaMe';
  const {[key.toLowerCase()]: value} = {name: 'Amir'};
  value;

  Result:

  'Amir'

• Destructuring also works with getters. If an object's property is a getter, we can destructure it as usual. We'll get the value returned by the getter.

• >

  const user = {
    get name() {
      return 'Be' + 'tty';
    }
  };
  const {name} = user;
  name;

  Result:

  'Betty'