디스트럭쳐링 접근

배열의 고차함수를 공부하다 보니 디스트럭쳐링은 다양한 방식으로 사용되는 것을 발견했다.

 

디스트럭쳐링은 기존에 키에 접근하는 방식과 다른 문법을 사용하여 키에 접근 할 수 있는 방법이다.

 

가장 기초적으로는, ES6의 새로운 문법으로 사용된다.

기존의 key를 새로운 변수명과 같게하고, key의 value도 똑같이 가져오고자 할 때이다.

 

const obj = {x: 1, y: 2};

const {x, y} = obj;

console.log(x, y); // 1, 2

 

함수에서 key를 전달받아 작업할 때 사용한다.

 

function introduce ({name, age}) {

  return `나는 ${age}살 ${name}야.`

}

const child = {

  name: 'Nora',

  age: 8

};

console.log(introduce(child)); // 나는 8살 Nora야.

 

고차함수에서 요소의 key에 접근할 때 사용한다.

디스트럭쳐링을 사용하지 않으면, 요소.property로 일일이 작성 해야한다.

 

const arr = [

  {name: '사과', 카테고리: '과일', 가격: 300},

  {name: '시금치', 카테고리: '채소', 가격: 200},

  {name: '딸기', 카테고리: '과일', 가격: 400}

];

const fruits = arr.filter(({카테고리}) => 카테고리 === '과일');

console.log(fruits);

const name = fruits.map(({name}) => name);

console.log(name); // ['사과, '딸기']