[JavaScript] 구조 분해 할당

1. 구조 분해 할당 Destructuring Assignment

구조 분해 할당은 배열의 요소나 객체의 Property를 말 그대로 분해해서 각 변수에 할당하는 문법이다.

기존 배열이나 객체에 저장된 데이터 중 일부만 필요한 경우에 활용할 수 있는 문법이다.

먼저 배열의 요소를 분해해서 할당하는 방법부터 알아보도록 하겠다.

---

① 배열, 구조 분해 할당

 

(1). 배열 요소를 각 변수에 분해 할당하기

const colors = ["Red", "Green", "Blue"];

let [c1, c2, c3] = colors;

console.log(`c1 : ${c1}`); //c1 : Red
console.log(`c2 : ${c2}`); //c2 : Green
console.log(`c3 : ${c3}`); //c3 : Blue

 

'colors' 배열의 각 요소를 구조 분해 할당을 활용해서

변수 c1에는 'colors[0]'을, c2에는 'colors[1]', c3에는 'colors[2]'를 각각 할당하였다.

 

위의 방식은 기존 배열을 각 변수에 분해해서 할당하였지만

배열의 선언과 변수 분해 할당을 동시에 처리하는 것도 가능하다.

let [n1, n2, n3] = [1, 2, 3];

console.log(n1, n2, n3); //1 2 3

---

(2). 변수에 할당된 배열 요소 바꾸기

 

const Colors = ["Red", "Green", "Blue"];

let [c1, c2, c3] = Colors;

 

Colors 배열의 요소를 변수 c1, c2, c3에 순서대로 분해해서 할당한 상태에서

변수 c2에 저장된 값을 "Blue"로, c3에 저장된 값을 "Green"으로 바꾸고 싶은 경우에는

아래 예제처럼 구조 분해 할당 문법을 활용해서 변수에 저장된 값을 교환할 수 있다.

 

const Colors = ["Red", "Green", "Blue"];
let [c1, c2, c3] = Colors;
console.log(c1, c2, c3);

//New
[c2, c3] = [c3, c2];

console.log(c1, c2, c3);

 

임시 배열 [c3, c2]를 만들고 구조 분해 할당 문법을 응용

변수 c2에 c3의 값 "Blue"를 할당하고 변수 c3에는 c2의 값인 Blue를 할당하는 형태로 코드를 수정하고

변수 c2와 c3에 저장된 값이 교환이 되는 것을 아래 예제 실행 결과를 통해서 확인할 수 있다.

---

(3). 필요하지 않은 배열 요소 생략하기

 

배열의 요소를 각 변수에 할당할 때, 변수의 이름을 명시하지 않고 비워두면

해당 변수로 들어가야 할 배열 요소가 생략하고 바로 다음 배열 요소로 넘어갈 수 있다.

즉, 필요하지 않은 배열 요소를 버릴 수 있다는 것이다.

 

아래 예제에서 Colors 배열의 1번 index 요소인 "Yellow"를 버리려고 한다.

그렇다면 "Yellow"라는 값이 할당될 변수의 이름을 비워두면 해당 값을 할당하지 않고 버릴 수 있다.

const Colors = ["Red", "Yellow", "Green", "Blue"];
let [c1, ,c2, c3] = Colors;

console.log(c1, c2, c3); //Red, Green, Blue

---

② 객체, 구조 분해 할당

 

(1). 객체 Property를 각 변수에 분해 할당하기

 

객체의 구조 분해 할당은 아래와 같이 작성하는 것으로, 객체 Property를 각 변수에 할당할 수 있다.

const Info = {
    name: "홍길동",
    age: 25,
    home: "서울"
};

let {name, age, home} = Info;

console.log(name, age, home); //홍길동 25 서울

 

Info 객체에 구조 분해 할당 문법을 사용하면, 'name', 'age', 'home' Property가

해당 Property의 Key 값과 동일한 이름의 변수에 할당된다.

 

앞에서, 배열 구조 분해 할당에서 했던 것처럼 객체 선언과 분해 할당을 동시에 처리할 수 있다.

const {name, age, home} = {
    name: "John",
    age: 30,
    home: "Los Angeles"
};

console.log(name, age, home); //John 30 Los Angeles

---

추가적으로 객체 Property를 분해해서 각 변수에 할당할 때

Property의 Key 값과 다른 이름을 가진 변수에 할당하고자 한다면

아래와 같이 작성을 하는 것으로 Key 값과 다른 이름의 변수에 객체 Property를 할당할 수 있다.

 

const Person = {
    name: "홍길동",
    age: 28,
    home: "수원",
    isMarried: false
};

let {name: n, age: a, home: h, isMarried} = Person;

console.log(`이름 : ${n}`); //이름 : 홍길동
console.log(`나이 : ${a}`); //나이 : 28
console.log(`거주지 : ${h}`); //거주지 : 수원
console.log(`기혼 여부 : ${isMarried}`); //기혼 여부 : false

 

Person 객체의 name, age, home Property를 각 변수 n, a, h에 할당하고

나머지 isMarried Property는 Key 값과 동일한 이름을 가진 변수 isMarried에 할당된다.

---

③ 구조 분해 할당 != 배열 및 객체 삭제

 

말 그대로 기존 배열의 요소나 객체의 Property를 각 변수에 분해 할당을 한다고해서

그것이 해당 배열이나 객체의 삭제로 이어지지는 않는다는 것이다.

아래 예제를 통해서 한 번 확인해보자.

 

const Colors = ["Red", "Green", "Blue"];
const Person = {
    name: "John",
    age: 25,
    home: "New York"
};

let [c1, c2, c3] = Colors;
let {name, age, home} = Person;

console.log(`${c1}, ${c2}, ${c3}`);
console.log(`name = ${name}, age = ${age}, home = ${home}`);

 

Colors 배열의 요소를 변수 c1, c2, c3에, Person 객체의 Prop을 변수 name, age, home에 할당하고

이후 console.log()를 통해서 정상적으로 분해 할당된 것을 확인할 수 있다.

그리고 이 상태에서 Colors 배열과 Person 객체를 console에 출력해보자.

console.log(Colors);
console.log(Person);

구조 분해 할당을 했어도 Colors, Person이 삭제되지는 않는다..

 

이는 Colors 배열의 요소와 Person 객체의 Property를 각 변수에 할당할 때

배열 요소와 객체 Property를 복사해서 변수에 할당을 하기 때문이다.

즉, 구조 분해 할당 문법을 사용해도 기존 배열이나 객체에 영향이 가지는 않는다는 것이다.

---

📔 Reference

구조 분해 할당 / JavaScript 참고서
배열과 객체의 구조분해할당 / '웹 프론트엔드를 위한 자바스크립트 첫 걸음 (Inflearn)'