ES6 - Destructuring & Spread Operator

Destructuring (구조 분해 할당)

구조화된 객체나 배열을 분해하여 개별적인 변수에 할당하게 해주는 문법. 필요한 값만 추출해 변수에 할당하거나 반환하고 함수의 매개변수로 전달할 수 있다.

1. Object

const user1 = {
  name: '성이름',
  age: 20, 
  favColor: 'red',
  favFood: {
    korean: '떡볶이',
    dessert: '케이크'
  }
};

// es5
const name = user1.name;
const age = user1.age;

// es6 
const {name, age} = user1;
console.log(name, age) // 성이름 20 

// 기본값
const {name, age, hobby='등산'} = user1;
console.log(hobby); // 등산

// 키와 다른 이름의 변수에 저장
const { favColor: color } = user1;
console.log(color); // red

// 중첩객체
const { favFood: {korean, dessert} } = user1;
console.log(korean, dessert); // 떡볶이 케이크

// 나머지 요소
const box1 = {
  color: 'blue',
  width: 100,
  height: 200
};
const {color, ...rest} = box1;
console.log(rest); // { width: 100, height: 200 }

// 함수에 전달
function showBox({ color='none', width=100, height=100}) {
  console.log(`${color}/${width}/${height}`);
}
showBox({color: 'red'}); // red/100/100

2. Array

const fruitArr = ['apple', 'banana', 'orange', 'grape', 'lemon'];

// es5
const a = fruitArr[0];
const b = fruitArr[1];

// es6
const [a, b, c] = fruitArr;
console.log(a, b, c); // apple banana orange

// 나머지 요소 가져오기
const [a, b, c, ...rest] = fruitArr;
console.log(rest); // ['grape', 'lemon']

// 쉼표를 사용하여 요소 무시하기
const [a, , b] = fruitArr; 
console.log(b); // orange

// 기본값
const numArr = [1, 2, 3];
const [one, two, three, four = 4] = numArr;
console.log(one, two, three, four); // 1 2 3 4

Spread Operator (전개 연산자)

객체 배열이나 문자열과 같이 반복 가능한 이터러블을 펼쳐서 나열할 수 있는 연산자로 가독성이 높다.

1. Array

const colors = ['red', 'orange', 'yellow', 'green'];
const otherColors = ['blue', 'Indigo', 'Violet'];

const rainbowColor = [...colors, ...otherColors];
console.log(rainbowColor);
// [ "red", "orange", "yellow", "green", "blue", "Indigo", "Violet" ]

console.log(...[1, 2, 3]); // 1 2 3
console.log(...'hello!'); // h e l l o !
console.log([...[1, 2, 3], 4]) // [1, 2, 3, 4]

// 값이 아니므로 단독 사용 불가능
const list = ...[1, 2, 3] // SyntaxError

// rest parameter
const sum = (a, b) => console.log(a + b);
sum(...[1, 3]); // 4

const foo = (something, ...args) => console.log(...args);
foo(1, 2, 3, 4); // 2 3 4
foo(1, [2, 3, 4]); // [2, 3, 4] 

2. Object

const obj1 = {
  a: 1,
  b: 2
};
const obj2= {
  c: 3,
  d: 4
};

// es5
Object.assign(obj1, obj2);

// es6
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {a: 1, b: 2, c: 3, d: 4}

// 결합
const user1 = {
  name: '성이름',
  age: 20,
  gender: 'female'
};
const user2 = {
  ...user1,
  name: '모아나',
  age: 16
};
const user3 = {
  ...user1,
  name: '마우이',
  gender: 'male',
  hobby: '여행'
};

console.log(user2); 
// { name: "모아나", age: 16, gender: "female" }
console.log(user3);
// {name: '마우이', age: 20, gender: 'male', hobby: '여행'}