07. 기술면접 - 자바스크립트 - 구조 분해 할당 (Destructuring)

공부목적으로 다른 블로그의 글을 그대로 따라치면서 작성되었습니다. 저작권 문제 시, 비공개 처리하겠습니다

개념

속성을 분해하여 원하는 속성만 변수로 담을 수 있다

 

객체 구조분해 (Object Destructuring)

const A = {
    a: 1,
    b: 2
}

const {a,b} = A

console.log(a) // 1
console.log(b) // 2

 

const A = {
    a: 1,
    b: 2
}

const {b, a} = A

console.log(a) // 1
console.log(b) // 2

 

const A = {
    a: 1,
    b: 2
}

const {c,d} = A

console.log(c) // undefined
console.log(d) // undefined

 

배열 구조분해 (Object Destructuring)

const arr = [1,2,3,4,5]

const [a,b] = arr

console.log(a) // 1
console.log(b) // 2

 

const arr = [1,2,3,4,5]

const [b,a] = arr

console.log(a) // 2
console.log(b) // 1

값이 object 와 다르게 나오는 이유는 arr 이는 인덱스 기반이고 object 는 hash map 기반이기 때문이다

 

let a = 1
let b = 2; // 세미콜론을 안적어주면 [a,b] 부분이 b 변수에 들어가게 되어 오류가 발생한다

// swap
[a, b] = [b, a]

console.log('a=', a) // 2
console.log('b=', b) // 1

 

const arr = [1,2,3,4,5]

const [a, ...b] = arr

console.log(a) // 1
console.log(b) // [2,3,4,5]