ES6: Use Destructuring Assignment to Assign Variables from Objects help

JavaScript
2

Hello,

I will go through the destructuring assignment concept itself, then cover up the challenge afterwards:

Destructuring assignment: a reintroduction

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

“Come again? I don’t get your MDN copy-paste explanation…”

You see, arrays have values, and objects contain properties.

We usually access the array values and object properties like so:

// Object example reference:
let car = {
  type: "Hatchback",
  color: "red",
};
// access car values:
console.log(car.type);  // output: Hatchback
console.log(car.color); // output: red

// Array example reference:
let transaction = [5, 10, 3, 6, 8];
// access transaction values:
console.log(transaction[0]); // output: 5
console.log(transaction[1]); // output: 10
console.log(transaction[2]); // output: 3

And sometimes, we would like to assign those values into variables:

// ref: car object
let car_type  = car.type;
let car_color = car.color;

// ref: transaction array
let first_transaction  = transaction[0];
let second_transaction = transaction[1];

Now, the JavaScript community got jealous from Python (py already implements assignment destructuring) and decided to embrace the practice of clarity and an easier way to access data:

// instead of:
let type  = car.type;
let color = car.color;

// you can now do:
let { type, color } = car;
// access values:
console.log(type);  // output: Hatchback
console.log(color); // output: red

// instead of:
let first_transaction  = transaction[0];
let second_transaction = transaction[1];

// you can now do:
let [ first_transaction, second_transaction ] = transaction;
// access values:
console.log(first_transaction[0]); // output: 5
console.log(second_transaction[1]); // output: 10

“But what if I want to rename type or color differently when I destructure the car object?”

Good catch, you can do that using the following syntax:

// instead of:
let { type, color } = car;

// you can do:
let { type: car_type, color: car_color } = car;
// access values:
console.log(car_type);  // output: Hatchback
console.log(car_color); // output: red

Along the way while using the assignment destructuring syntax you will find many gotchas, which you will need to read the syntax documentation carefully and patiently to get over them. I’d recommend MDN web docs - Destructuring assignment after understanding the basics.

“But why the extra syntactic sugar?”

Because this way, you won’t need to repeat the destructured expression. It will also make some things easier to read. Consider the following example:

On the server-side, sometimes you need to get the username, email and password from a request object – let’s say the user is registering a new account – Instead of:

/** get user registration input */
let username = req.body.username;
let password = req.body.password;
let email    = req.body.email;

I can do:

/** get user registration input */
let { username, password, email } = req.body;

Or a little bit more complex, sometimes I only need certain properties from an object passed to a function: (or maybe I just want to pre-destruct the argument)

function BuildCar ({ type: model, color }) {
  console.log(model); // output: Hatchback
  console.log(color); // output: red
}

// ref: car object
BuildCar(car);
// output:
//  Hatchback
//  red

In more complex situations, this will save you an extra variable + improve readability. Now that you got this off, have a walk or a small break before going into the next section of this answer if you want. (solving the challenge)

4 Likes