[JavaScript] 구조 분해 할당(destructuring assignment)

 

구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

 

개발을 하다 보면 객체나 배열을 보내야 하는 경우가 빈번합니다. 

 

이때 구조 분해 할당을 사용한다면 유용하게 사용이 가능합니다.

 

기존 배열 요소 할당

const arr = ["1", "2"];

let odd = arr[0];  // 1
let even = arr[1]; // 2

 

구조 분해 할당

// 이름과 성을 요소로 가진 배열
let arr = ["Zinu", "Park"]


let [firstName, surname] = arr;

alert(firstName); // 결과 : Zinu
alert(surname);  // 결과 : park

 

---

split() 함수와 사용하기

let [firstName, surname] = "Zinu Park".split(' ');

console.log(firstName); // 결과 : Zinu
console.log(surname); // 결과 : Park

 

전개 연산자와 사용하기

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a); // 결과 : 10
console.log(b); // 결과 :  20
console.log(rest); // 결과 :  [30, 40, 50]

 

객체 할당

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

console.log(a); // 결과 : 10
console.log(b); // 결과 : 20

 

위의 코드와 같이 반환 값이 배열인 메서드를 함께 활용해도 좋습니다.

 

쉼표를 사용하여 요소 무시하기

let [firstName, , age] = ["Zinu", "@@@@", "26"];

console.log( age ); // 26

 

위 코드 처럼 쉼표를 사용하여 요소를 무시할 수 있습니다.

 

 

변수 값 교환하기

var a = 11;
var b = 22;

[a, b] = [b, a];

console.log(a); // 22
console.log(b); // 11

 

위 코드처럼 구조 분해 할당을 이용하여 두 변수의 값을 교환할 수 있습니다.

 

 

 

 

 

---

 

 

Reference

• Mdn web docs
• 모던 JavaScript