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` !!!

Because over second hierarchy, reference is the same as original object.
By the way, it calls shallow copy