[Javascript] 구조 분해 할당 (Destructuring)

구조 분해 할당

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

배열의 구조 분해 할당

const userName = ["Kim", "Max"];

const lastName = userName[0];
const firstName = userName[1];

console.log(lastName); // Kim
console.log(firstName); // Max

 

위와 같이 표현해도 좋지만 구조 분해 할당을 통해 아래와 같이 간단히 작성할 수 있다.

const [lastName, firstName] = ["Kim", "Max"]

console.log(lastName); // Kim
console.log(firstName); // Max

 

배열의 값을 순서대로 변수에 바로 담을 수 있다. 

객체의 구조 분해 할당

const user = {name: "Kim", age: 30};

const name = user.name;
const age = user.age;

console.log(name); // Kim
console.log(age); // 30

 

객체도 마찬가지로 아래와 같이 구조 분해 할당을 통해 간단히 작성할 수 있다.

 

const {name, age} = {name: "Kim", age: 30};

console.log(name); // Kim
console.log(age); // 30

※ 여기서 주의 할 점은 객체 구조 분해 할당 시 값을 담을 변수명은 객체의 key값이어야 한다. 배열의 경우 본인이 원하는 변수명을 작성해도 상관 없다.

 

허나 Alias를 통해 원하는 변수명을 지정할 수 있다.

const {name: userName, age: userAge} = {name: "Kim", age: 30};

console.log(userName); // Kim
console.log(userAge); // 30