ES6 Destructuring and Rest Parameter, 구조분해할당

ES6에서 추가된 Destructuring과 Rest Parameter를 이용해 좀 더 쉽게 변수에 값을 할당할 수 있습니다.

 

아래 코드로 바로보시죠!

 

// Destructuring Assignment

// 배열의 구조분해할당
let a, b;
[a, b] = [100, 200];

console.log(a); // 100
console.log(b); // 200

// Rest parameter
// 정해지지 않은 수를 배열 또는 객체로 나타낼 수 있도록 함
[a, b, ...rest] = [100, 200, 300, 400, 500];

console.log(rest);  // 300, 400, 500

// 객체의 구조분해할당
({a, b, ...rest} = {a: 100, b: 200, c: 300, d: 400, e: 500});

console.log(a, b);
console.log(rest);

// Array Destructuring example
function getPeople() {
  return ["John", "Beth", "Mike"];
}

let [person1, person2, person3] = getPeople();
console.log(`${person1} ${person2} ${person3}`);

// Object Destructuring example
const person = {
  name: "John Doe",
  age: 32,
  city: "Miami",
  gender: "Male"
}

// Old ES5 (kind of shxt...)
const nameEs5 = person.name,
      ageEs5 = person.age;

// ES6 (Wow..)
const {name, age, city, gender} = person;
console.log(name);
console.log(age);
console.log(city);
console.log(gender);