ES6 맛보기-2

Nomad Coders 강의를 참고로 작성했습니다!

1. Destructuring

배열과 객체에서 필요한 부분만 추출하여 사용할 수 있다.

아래의 객체에 있어,

const human = {
  name: "jacob",
  age: 24,
  nationality: "korean",
};

예전 방법

const name = human.name;
const age = human.age;
const nationality = human.nationality;

console.log(name, age); // jacob 24 korean

Destructuring 사용

const { name, age, nationality } = human; // 새로운 변수의 이름은 object에 있는 것들을 기반으로 생성된다.

console.log(name, age, nationality); // jacob 24 korean

만약 nationality라는 이름을 사용하고 싶지 않다면 어떻게 해야 할까?

const { name, age, nationality: nation } = human;

console.log(name, age, nation); // jacob 24 korean

human object로 가서 nationality값을 가져오고 그 값을 nation에 넣어주라는 뜻이다.

밑에처럼 깊은 단계의 객체에서도 사용이 가능하다.

const human = {
  name: "jacob",
  age: 24,
  nationality: "korean",
  favorite: {
    sport: "soccer",
    food: "kimchi",
    snack: "haribo",
  },
};

const { name, age, favorite: { sport, food, snack } } = human;

console.log(name, age, sport, food, snack); // jacob 24 soccer kimchi haribo 

2. Spread Operator

const month1 = ["1월", "2월", "3월"];
const month2 = ["9월", "10월", "11월"];

const month = [month1 + month2];
console.log(month); // [ '1월,2월,3월9월,10월,11월' ]

우리가 원했던 배열의 역할을 하지 못한다.

const month1 = ["1월", "2월", "3월"];
const month2 = ["9월", "10월", "11월"];

const month = [...month1, ...month2];
console.log(month); // [ '1월', '2월', '3월', '9월', '10월', '11월' ]

오! 원한대로 두 배열의 아이템만 합쳐 새로운 배열을 만들었다.
Spread Operator은 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다.

※ 배열로부터 아이템을 가져와서 unpack해준다.
※ 객체에서도 사용 가능!

const month1 = {
  january: "추워",
};

const month2 = {
  july: "더워",
};

const month = { month1, month2 };
console.log(month);
// { month1: { january: '추워' }, month2: { july: '더워' } }

const month = { ...month1, ...month2 };
console.log(month);
// { january: '추워', july: '더워' } -> 객체로부터 아이템들을 가져오는 것을 볼 수 있다.

※ 나는 month1, month2의 객체를 들고와서 내용물만 month 객체 안에 탈탈 털어준다고 생각하니까 이해가 잘 됐다.

참고자료

https://poiemaweb.com/es6-destructuring
https://joshua1988.github.io/es6-online-book/spread-operator.html#%EC%8A%A4%ED%94%84%EB%A0%88%EB%93%9C-%EC%98%A4%ED%8D%BC%EB%A0%88%EC%9D%B4%ED%84%B0-%EC%82%AC%EC%9A%A9%EB%B2%95