Posted on Sep 26, 2022

Destructuring assignment in javascript

what is destructuring assignment ?

😎 unpack values from arrays, or properties from objects

💎 Basic form

const user = { name: 'kaziu', age: 87 } let { name } = user console.log(name) // "kaziu"

▼ What if I would change property of name ?

const user = { name: 'kaziu', age: 87 } let { name } = user name = 'pikachu' // ⭐⭐ add it console.log(user) // ❓❓❓❓❓❓❓❓❓❓

The answer is user.name shows kaziu. Changing name does not have effect to original object

💎 Explanation

1.

When you assign object, variable name user allocates somewhere on memory, and has reference of this object

const user = {}

2.

then name property has its reference

const user = { name: 'kaziu' }

3.

Now use destructing assignment

const user = { name: 'kaziu', age: 87 } let { name } = user // ⭐⭐ Now add it and then ...?

4.

change kaziu to pikachu, it doesn't have effect to original object

const user = { name: 'kaziu', age: 87 } let { name } = user name = 'pikachu' console.log(user.name) // 'kaziu'

💎 How about deep hierarchy object ?

const user = { name: { first: 'kaziu', last: 'suzuki' } } let { name } = user console.log(name) // { first: 'kaziu', last: 'suzuki' } name.first = 'pikachu' console.log(user) // { name: { first: 'pikachu', last: 'suzuki' } } // ⭐⭐ original object changes from `kaziu` to `pikachu` !!!