[ES6 문법] 구조 분해 할당(Destructuring assignment)

 

 

 

구조 분해 할당(Destructuring assignment)

구조 분해 할당은 배열과 객체의 값을 더욱 쉽게 추출하거나 변수에 할당할 수 있게 도와준다.

var itemList = [
  { no: 1, todo: '두부', done: true},
  { no: 2, todo: '계란', done: false},
  { no: 3, todo: '라면', done: true},
];

위 코드는 여러 할 일을 나타내는 객체가 포함된 itemList 배열을 선언하고 있다.

각 객체엔 no, todo, done 속성들이 있다.

 

 

 

1. 배열 구조 분해 할당(Array Destructuring)

일반적으로 배열 요소에 접근하려면 인덱스를 사용해야 한다.

console.log(itemList[0]);
console.log(itemList[1]);

하지만 구조 분해 할당을 사용하면 배열의 요소를 별도의 변수로 분해하여 추출하고 할당할 수 있다.

var [first, second] = itemList;
console.log(first);
console.log(second);

이러한 방법을 통해 쉽게 배열의 요소를 변수 할당할 수 있다.

 

반응형

2. 객체 구조 분해 할당(Object Destructuring)

객체 구조 분해 할당을 사용하면 객체의 속성을 직접적으로 변수에 할당하거나, 

필요한 경우 새로운 변수 이름도 추출할 수 있다.

var item = { no: 2, todo: '계란', done: false};
var { no, done: finish } = item;
console.log(no, finish, item.todo);

위의 코드에서는 item 객체의 no 속성 값을 할당받으며,

done속성 값을 finish라는 새로운 변수에 할당하고 있다.

 

 

 

 

3. 나머지(Rest) 구문 사용하기

구조 분해 할당과 함께 나머지(Rest) 구문을 사용하면, 

객체의 일부 속성 추출한 후 나머지 속성들을 새로운 객체에 할당할 수 있다.

var { no, ...etc } = item;
console.log(no, etc);

위의 코드에서는 no를 분해한 후, 나머지(todo와 done)를 새로운 객체 etc에 할당하고 있다.

 

 

 

 

4. 함수 매개변수에서 구조 분해 할당 사용하기

함수 매개변수에서 구조 분해 할당을 사용하면, 전달받은 객체의 속성에 좀더 쉽게 접근할 수 있다.

다음 코드에서는 addItem 함수를 정의하며 구조 분해 할당을 사용하고 있다.

function addItem({ no: id, todo, done = false }) {
  console.log(id, todo, done);
}

addItem({no: 4, todo: '사과'});

이렇게 구조 분해 할당을 사용하면 함수의 인수로 전달된 객체의 속성 더 간편하게 사용할 수 있다.