[JavaScript] 자바스크립트 Destructuring 디스트럭처링 알아보기.

2021-07-08

---

Photo by Kristin Wilson on Unsplash

자바스크립트를 공부하던 도중 흥미로운 기능을 발견했다. 바로 디스트럭처링(Destructuring) 풀어서 구조 분해라고도 하는 자바스크립트 만의 고유 문법이다. 아래의 예제를 보자.

---

- 예제 1

const arr = ['king', 'world']

const name1 = arr[0]
const name2 = arr[1]

console.log(name1) // king
console.log(name2) // world

 

위와 같은 배열 형식의 값을 변수에 다시 담을 경우 보통은 해당 배열의 인덱스 번호를 기준으로 하여 값을 지정할 것이다. 하지만 디스트럭처링을 사용하면 조금 더 간단하게 이를 해결할 수 있다. 바로 다음 예제를 살펴보자.

---

const arr = ['king', 'world']

const [name1, name2] = arr

console.log(name1) // king
console.log(name2) // world

 

기존과 다름 점은 변수명을 대괄호 안에 감싸고 바로 배열은 대입하는 것이다. 놀랍게도 결과는 같으며, const 변수 name1 과 name2에 값이 대입되는 것을 확인할 수 있다.

---

- 예제 2

 

물론 디스트럭처링은 단순 배열에만 사용하는 것이 아닌 객체에서도 단순 변수대입에도 사용할 수 있다. 아래의 예제를 보자.

const person = {
    name : 'king'
    ,age : 25
    ,gender : 'man'
    ,cm : 185
}

const {name, age} = person 

console.log(name) // king
console.log(age) // 25

 

이번에는 객체 형식이기 때문에 변수명을 감쌀때 대괄호가 아닌 {}를 사용해야 하며, 결과는 위와 같이 출력된다. 여기서 착각할 수도 있는 점이 있는데 변수명이 해당 객체의 필드명이 아닌 다른 것으로 해도 무방하며, 객체에 부여된 필드 순서대로 값이 부여된다. 

ex) const {age, name} = person 으로 하면 age 에는 king / name 에는 25라는 값이 할당된다.

---

- 예제 3

 

다음은 호이스팅만 되고 값이 할당되지 않은 변수들에 디스트럭처링을 통해 값을 대입하는 방법을 알아보도록 하자.

let a, b, c

[a, b, c] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, '...']

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

 

위와 같이 배열 형식일 경우 대괄호에 변수를 담아주고 배열을 넣어주면 순서대로 값이 할당되는 것을 확인할 수 있다. 다만 여기서 c 변수에 나머지 값을 모두 대입하고 싶어질 경우에는 어떻게 해야 하나 궁금해질 수도 있는데, 이도 방법이 있다.

---

바로 자바스크립트 레스트(rest) 연산자를 활용하는 것이다. 아래의 예제와 같이... 을 c 앞에 붙여 주면 할당되고 남은 배열이 다시 c라는 변수에 대입되게 된다.

 

let a, b, c

[a, b, ...c] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, '...']

console.log(a) // 1
console.log(b) // 2
console.log(c) // [ 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, '...' ]

---

메인 이미지 출처 : Photo by Kristin Wilson on Unsplash