[Javascript] 객체와 배열의 구조 분해 할당(Destructuring Assignment)

구조 분해 할당 (Destructuring Assignment)

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식
• 비 구조화 할당 이라고도 부른다.
• 배열 : Index를 활용한 구조 분해 할당
• 객체 : Property의 Key값을 활용한 구조 분해 할당

 

---

 

배열의 구조분해

 

#1. 기본문법

var/let/const [변수명1, 변수명2] = [할당값1, 할당값2];

 

let [a,b] = [10,20];

console.log(a); // 10
console.log(b); // 20

• 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 대입한다.
• 동일한 Index를 가지는 변수명에 분해되는 배열의 해당 Index 값이 할당된다.

 

 

예를들어 위 코드의 a,b값을 서로 바꾸고 싶다면 어떻게 할 수 있을까?

// a와 b의 값을 변경하는 방법
let temp = a;
a = b;
b = temp;

// a와 b의 값을 구조분해를 활용해 변경하는 방법
[a,b] = [b,a];

console.log(a); //20
console.log(b); //10

• 첫 번째, temp 변수를 사용해 a의 값을 담아둘 변수를 선언해주고 변경하는 방법
• 두 번째, 구조분해를 활용해 변경하는 방법
• 3줄의 코드가 1줄의 코드로 줄어들 수 있다

 

 

 

#2. 기본값 할당

var/let/const [변수명1, 변수명2 = 기본값] = [할당값1];

 

 

const [color1, color2, color3] = [];

console.log(color1); //undefined
console.log(color2); //undefined
console.log(color3); //undefined

할당하고자 변수가 있어도 할당할 값이 없으면 undefined로 취급이 된다.

이때 기본값을 지정해 할당할 값이 없을 때 할당해줄 값을 설정할 수 있다.

 

const [color1, color2, color3 = "white"] = ["black", "pink"];

console.log(color1); // "black"
console.log(color2); // "pink"
console.log(color3); // "white"

• color1과 color2는 동일한 인덱스의 값이 있기 때문에 각각 "black", "pink" 라는 값을 가질 수 있다.
• color3은 할당할 값이 없지만 기본값인 "white"가 있기 때문에 String 값을 가지게 된다.

 

 

 

#3. Spread 연산자 활용

var/let/const [변수명1, ...나머지변수명] = [할당값1, 할당값2, 할당값3, 할당값 4];

 

let [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7];

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

let [a, b, ...rest, c] = [1, 2, 3, 4, 5, 6, 7]; // error

• 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 Spread 연산자를 사용해 한번에 할당할 수 있다.
• Spread 연산자로 나머지 배열 값을 한번에 할당하기 위해선 반드시 Spread 연산자를 마지막 변수명으로 작성해야 한다.

 

 

#4. 임의의 인덱스 값만 가져오기

const [a,b, , , ...rest] = [1,2,3,4,5,6,7,8];

console.log(a); // 1
console.log(b); // 2
console.log(rest); // [5,6,7,8]

• 인덱스가 동일한 값만 배열에 담을 수 있기 때문에 원하지 않는 값의 인덱스만큼 변수명을 작성하지 않으면 임의의 인덱스 값만 가져올 수 있다.

 

 

---

객체의 구조분해

 

#1. 기본 문법

const { key2, key1 } = { key1 : value1, key2 : value2 };

console.log(key1) // value1
console.log(key2) // value2

• 우항의 key값이 좌항의 변수명과 매칭된다.
• 배열과 달리 순서는 중요하지 않다.

 

 

 

 

#2. Key 대신 변수명을 사용해 할당하기

const { key1 : 변수명1, key2 : 변수명2, ...나머지변수명 } = { key1 : value1, key2 : value2, key3 : value3 };

console.log(변수명1) // value1
console.log(변수명2) // value2
console.log(나머지변수명) // { key3: value3 }

• 나머지 변수명은 우항의 key에 영향을 받지 않기때문에 변수명을 따로 입력시킬 필요가 없다.

 

 

 

 

#3. 기본값 할당

const { key1 = 기본값1, key2 : 변수명2 = 기본값2} = { };

console.log(key1) // 기본값1
console.log(key2) // error : key2 is not defined
console.log(변수명2) // 기본값2

• 배열과 동일하게 = 를 사용해 기본값을 할당한다.

 

 

 

 

#4. 중첩된 객체 꺼내오기 (임의의 값 가져오기)

const example = { a : 13, b : { c : 135, d : 146 } };

const { a, b : { d } } = example;

console.log(a); // 13
console.log(b); // b is not defined
console.log(d); // 146

• b 내부의 d key값에 접근한 것임으로 a와 d의 값만 가져올 수 있다.

 

 

 

 

#5. 선언 없이 구조분해 할당

{ a, b } = { a : 10, b : 20 } ; // Unexpected token '='

({ a, b } = { a : 10, b : 20 });

console.log(a) // 10
console.log(b) // 20

• 객체 구조분해는 변수선언에 대한 명시가 없을 땐 반드시 괄호를 사용해 묶어줘야 한다.
• 위 코드에서 만약 a , b 라는 변수가 위 코드 이전에 선언이 되어 있어도 똑같은 에러가 난다.

 

 

 

 

 

참조

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4-%ED%95%A0%EB%8B%B9