ES6 주요 문법

spread 문법

• 주로 배열을 풀어서 인자로 전달
• 배열을 풀어서 각각의 요소로 넣을때 사용

function sum(x, y, z) {
    return x + y + z;
}

const numbers = [1,2,3];
sum(...numbers)   // 6

rest 문법

• 파라미터를 배열의 형태로 받아서 사용
• 파라미터 개수가 가변적일때 유용
• ...args : rest parameter, rest syntax

function sum(...theArgs) {
    return theArgs.reduce((previous, current) => {
        return previous + current;
    });
}

sum(1, 2, 3)    // 6
sum(1,2,3,4)    // 10

• 배열에서 사용하기

  1. 배열합치기

     let parts = ['shoulders', 'knees'];
     let lyrics = ['head', ...parts, 'and', 'toes'];
     
     lyrics // ['head', 'shoulders', 'knees', 'and', 'toes']

     let arr1 = [0, 1, 2];
     let arr2 = [3, 4, 5];
     arr1 = [...arr1, ...arr2];
     
     arr1 // [0, 1, 2, 3, 4, 5]

     → spread 문법은 기존 배열 변경X

     → arr1의 값을 바꾸려면 새롭게 할당해야함

  2. 배열 복사

     let arr = [1, 2, 3];
     let arr2 = [...arr]; // arr.slice() 와 유사
     arr2.push(4);
     
     arr  // [1, 2, 3]
     arr2 // [1, 2, 3, 4]

     → arr2를 수정해도 arr 변화 X

• 객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

clonedObj  // {foo: 'bar', x: 42}
mergedObj  // {foo: 'baz', x: 42, y: 13}

• 함수에서 나머지 파라미터 받아오기

  function myFun(a, b, ...manyMoreArgs) {
    console.log("a", a);
    console.log("b", b);
    console.log("manyMoreArgs", manyMoreArgs);
  }
  
  myFun("one", "two", "three", "four", "five", "six");
  // a one
  // b two
  // manyMoreArgs (4) ['three', 'four', 'five', 'six']

function getAllParams(required1, required2, ...args) {
      return [required1, required2, args];
}

	getAllParams(123)    // [123, undefined, []];

→ Rest Parameter는 전달인자의 일부에만 적용할 수도 있다.

let arr = [10, 30, 40, 20]
Math.max(arr) -> NaN
Math.max(...arr) -> 40

→ arr의 모든 요소를 ... 으로 펼쳐서 전달

구조분해할당

: spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정
분해 후 새 변수에 할당

• 배열

const [a, b, ...rest] = [1,2,3,4,5];

a: 1
b: 2
rest: [3,4,5]

• 객체

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}

a // 10
b // 20
rest // {c: 30, d: 40}

→ 객체에서 구조 분해 할당을 사용할때, const let var 와 함께 사용하지 않으면 에러 발생

• 함수에서 객체 분해