[JavaScript] 자바스크립트 - 구조 분해 할당(Destructuring Assignment)

자바스크립트의  Destructuring에 대해서 배열에서와 객체에서는 어떻게 쓰이는 지 알아보자.

 

배열에서의 디스트럭처링

배열의 각 요소를 변수로 쉽게 할당할 수 있다.

const numbers = [1, 2, 3];
const [one, two, three] = numbers;

console.log(one);   // 1
console.log(two);   // 2
console.log(three); // 3

 

기본값 설정

배열의 요소가 누락되었을 때 기본값을 지정할 수 있다.

const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1, 2, 3

 

나머지 요소 가져오기

'...' 연산자를 사용하여 배열의 나머지 부분을 새 배열로 가져올 수 있다.

const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest);  // [20, 30, 40]

 

객체에서의 디스트럭처링

객체의 속성을 변수로 쉽게 할당할 수 있으며, 배열과 마찬가지로 '...' 연산자를 사용하여 나머지 속성을 새 객체로 추출할 수 있다.

const person = {
    name: '홍길동',
    age: 25,
    job: '개발자'
};

const { name, age, job } = person;
console.log(name); // 홍길동
console.log(age);  // 25
console.log(job);  // 개발자

 

새로운 변수 이름으로 할당

객체 속성을 다른 이름의 변수로 할당할 수 있다.

const { name: userName, age: userAge } = person;
console.log(userName); // 홍길동
console.log(userAge);  // 25

 

기본값 설정

객체의 특성 속성이 누락된 경우 기본값을 설정할 수 있다.

const { name, age, salary = 50000 } = person;
console.log(salary); // 50000 (person 객체에 salary 속성이 없으므로 기본값 사용)

 

나머지 속성 가져오기

객체의 나머지 속성들을 새 객체로 추출할 수 있다.

const { name, ...rest } = person;
console.log(name); // 홍길동
console.log(rest); // { age: 25, job: '개발자' }