[JS]: Destructuring Example

09/27/2019

Without Destructuring (ES5)

// Array
var arr = ["John", 25]
var name = arr[0]
var age = arr[1]

console.log(name, age) // Output: "John" 25

// Object
var obj = { name: "John", age: 25 }
var name = obj.name
var age = obj.age

console.log(name, age) // Output: "John" 25

Destructuring (ES6^)

Destructuring Array

const arr = ["John", 25]
const [name, age] = arr
const [, age_] = arr // Skipping first item

console.log(name, age) // Output: "John" 25
console.log(age_) // Output: 25

Destructuring Objects

const obj = { name: "John", age: 25 }
const { name, age } = obj
const { name: a, age: b } = obj // Setting Alias

console.log(name, age) // Output: "John" 25
console.log(a, b) // Output: "John" 25

Destructuring return value of function

// Function returning an array
const calcAgeAndRetirement = year => {
  const age = new Date().getFullYear() - year
  return [age, 65 - age]
}

// Destructuring returned array
const [age, yearsTillRetirement] = calcAgeAndRetirement(1990)
console.log(age, yearsTillRetirement)

Value vs Reference

Destructuring features work by reference, not by copying the value.

You can also refer to [JS]: Primitive vs Reference post.

Example 1 (Array)

Reassigning the elements of either original or destructured array does not affect the value of another

let a, b
const arr = [1, 2]
;[a, b] = arr

console.log(arr[0], arr[1]) // Output: 1 2
console.log(a, b) // Output: 1 2

arr and [a, b] points to the same array

let a, b
const arr = [1, 2]
;[a, b] = arr

arr = [10, 20] 
// OR arr[0] = 10; arr[1] = 20;

console.log(arr[0], arr[1]) // Output: 10 20
console.log(a, b) // Output: 1 2

arr = [10, 20] or arr[0] = 10; arr[1] = 20; operation creates a new array in the heap & points to it, hence it doesn't affect the array value of destructured array, [a, b]

let a, b
let arr = [1, 2]
;[a, b] = arr

a = 10
b = 20 

console.log(arr[0], arr[1]) // Output: 1 2
console.log(a, b) // Output: 10 20

Similarly, a = 10; b = 20; operation creates new array heap, leaving the values of arr intact.

Example 2 (Object)

Similar to Example 1, modifying the following property of object does not affect the value of another

const obj = { name: "A", age: 10 }
const { name, age } = obj

obj.name = "B" 
obj.age = 20 

console.log(obj.name, obj.age) // Output: B 20
console.log(name, age) // Output: A 10

const obj = { name: "A", age: 10 }
let { name, age } = obj

name = "B" 
age = 20 

console.log(obj.name, obj.age) // Output: A 10
console.log(name, age) // Output: B 20

Example 3

Contrast to Example 1 and Example 2, modifying the inner element of array/object also affects the elements inside another.

const arr = [[1, 2], { name: "A", age: 10 }]
const [a, b] = arr

console.log(arr[0], arr[1]) // Output: [1, 2] { name: "A", age: 10}
console.log(a, b) // Output: [1, 2] { name: "A", age: 10}

const arr = [[1, 2], { name: "A", age: 10 }]
const [a, b] = arr
console.log(arr[0], arr[1])
console.log(a, b)

a[0] = 10 
b.name = "B" 

arr[0][0] = 10
arr[1].name = "B"
console.log(arr[0], arr[1]) // Output: [10, 2] { name: "B", age: 10}
console.log(a, b) // Output: [10, 2] { name: "B", age: 10}

const arr = [[1, 2], { name: "A", age: 10 }]
const [a, b] = arr
console.log(arr[0], arr[1])
console.log(a, b)

arr[0][0] = 10 
arr[1].name = "B" 

console.log(arr[0], arr[1]) // Output: [10, 2] { name: "B", age: 10}
console.log(a, b) // Output: [10, 2] { name: "B", age: 10}

WRITTEN BY

Ellis Min

Keeping a record

GitHub