구조분해할당

구조분해할당(Destructuring Assignment)

배열이나 객체의 값을 쉽게 꺼내서 변수에 할당할 수 있게 해주는 ES6 문법이다.

 

1. 배열 구조분해할당

1-1. 기본예제

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

• 배열의 각 요소가 순서대로 변수에 할당된다.

1-2. 일부 값만 꺼내기, 건너뛰기

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

• 두 번째 값을 건너뛰고 세 번째 값을 바로 할당할 수 있다.

1-3. 나머지(REST) 연산자 사용

const arr = [1,2,3,4,5];
const [head, ...rest] = arr;
console.log(head); // 1
console.log(rest); // [2,3,4,5]

• ...rest 는 남은 값들을 배열로 묶어 준다.

1-4. 기본값 할당

const arr = [1];
const [x, y = 100] = arr;
console.log(x); // 1
console.log(y); // 100

• 배열에 값이 없으면 기본값이 할당된다.

 

2. 객체 구조분해할당

2-1. 기본 예제

const user = { name: 'Mike', age: 30 };
const { name, age } = user;
console.log(name); // 'Mike'
console.log(age); // 30

• 객체의 속성명을 기준으로 변수에 값을 할당한다.

2-2. 순서에 상관없이 할당

const { age, name } = user;
// 순서를 바꿔도 name, age에 올바른 값이 할당 됨.
console.log(age); // 30
console.log(name); // 'Mike'

• 객체는 key로 매칭되므로 순서에 상관없다.

2-3. 새로운 변수 이름으로 할당(별칭)

const user = { name: 'Jane', age: 20 };
const { name: userName, age: usrAge } = user;
console.log(userName); // 'Jane'
console.log(userAge); // 20

• 변수명을 바꿔서 할당할  수 있다.

2-4. 기본값 할당

const user = { name: 'Tom' };
const { name, age = 18 } = user;
console.log(name); // 'Tom'
console.log(age); // 18

• 없는 속성은 기본값으로 대체된다.

2-5. 나머지(REST) 연산자 사용

const user = { name: 'Alice', age: 30, city: 'Seoul' };
const { name, ...rest } = user;
console.log(name); // 'Alice'
console.log(rest); // { age: 30, city; 'Seoul' };

• 나머지 속성들을 별도의 객체로 받을 수 있다.

 

3. 함수 매개변수에서의 구조분해할당

함수의 파라미터에서도 자주 사용되며,

특히 React컴포넌트에서 props를 구조분해할당으로 꺼내 쓰는 것이 대표적이다.

function printUser({ name, age}) {
    console.log(name, age);
};
const user = { name: 'Sam', age: 25 };
printUser(user); // Sam 25

• 함수의 인자로 객체가 들어왔을 때, 필요한 값만 꺼내서 사용할 수 있다.

4. 중첩 구조분해할당

객체 안의 객체, 배열 안의 배열 등 중첩된 구조도 쉽게 분해할 수 있다.

const person = {
    name: 'Alex',
    family: {
    	mother: 'Jane',
        father: 'John'
    }
};
const { name: family: { father } } = person;
console.log(name); // 'Alex'
console.log(father); // 'John'

• 중첩된 구조에서도 필요한 값만 꺼낼 수 있다.