[JavaScript] Object Destructuring

Object destructuring is a grammar in which multiple properties of an object can be easily assigned as variables.

Unordered Assignment

const obj = { width: 20, height: 30 };
const { height, width } = obj;
console.log(`width: ${width}, height: ${height}`);

//=> Result
// width: 20, height: 30

Aliasing

const obj = { width: 20, height: 30 };
const { width: w, height: h } = obj;
console.log(`width: ${w}, height: ${h}`);

//=> Result
// width: 20, height: 30

Default Value

const obj = { width: undefined, height: null, color: "red" };
const { width = 10, height = 20, color = "white" } = obj;
console.log(`width: ${width}, height: ${height}, color: ${color}`);

//=> Result
// width: 10, height: null, color: red

width property has an undefined type value, so it is assigned by a default value.

height property has a null type value, so it keeps its value.

color property has a value, so it keeps its value.

Assign from Return Value of a Function

function getDefaultWidth() {
  return 10;
}
const obj = { width: undefined, height: 30 };
const { width: w = getDefaultWidth(), height: h } = obj;
console.log(`width: ${w}, height: ${h}`);

//=> Result
// width: 10, height: 30

In this case, the function is called only when the width property has an undefined type value and the default value must be used.

If width property has value so it doesn't need to use a default value, the function is not called.

Create a new Object with remaining Properties

const obj = { width: 20, height: 30, color: "red", isFill: true };
const { width, height, ...remainedProps } = obj;
console.log(`width: ${width}, height: ${height}`);
console.log(`remained properties: `, remainedProps);

//=> Result
// width: 10, height: null, color: red
// remained properties: {color: "red", isFill: true}

Nested Object

const obj = { id: 10, score: { first: 70, second: 80 } };
const {
  id,
  score: { first, second },
} = obj;
console.log(`id: ${id}, 1st score: ${first}, 2nd score: ${second}`);

//=> Result
// id: 10, 1st score: 70, 2nd score: 80

You can't access to score property. If you try to access it, you will get an Uncaught ReferenceError.

Computed Property

const obj = { prop1: 10, prop2: 20 };
const index = 2;
const { [`prop${index}`]: value2, prop1 } = obj;
console.log(`prop1: ${prop1}, prop2: ${value2}`);

//=> Result
// prop1: 10, prop2: 20

When you use computed property, you have to use aliasing.

In the above example, value2 was used as an alias for prop2.

 

You can also use a property of an object or an element of an array as aliasing.

const obj = {};
const arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 1, bar: true });
console.log(obj);
console.log(arr);

//=> Result
// {prop: 1}
// [true]