14. ES6 주요 문법

spread 문법

주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용함.

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

const numbers = [1, 2, 3];

sum(...numbers) // 6 

rest 문법

파라미터를 배열의 형태로 받아서 사용할 수 있음. 파라미터 개수가 가변적일 때 유용

function sum(...theArgs) { //배열형태로 변환
  return theArgs.reduce((previous, current) => { // reduce 메서드 사용하여 previous에는 누적값, current에는 현재값
    return previous + current;
  });
}

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

구조 분해(destructing)

배열 디스트럭처링을 사용하여, [10, 20, 30, 40, 50] 배열에서 첫 번째 요소를 a에 할당하고, 두 번째 요소를 b에 할당합니다. 그리고 나머지 요소들은 rest 배열에 할당

const [a, b, ...rest] = [10, 20, 30, 40, 50];


console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

화살표 함수(arrow function)

함수표현식으로 함수를 정의할 때 function 키워드 대신 화살표(=>)를 사용

// 함수표현식
const subtract = function (x, y) {
	return x - y;
}

// 화살표 함수
const multiply = (x, y) => {
	return x - y;
}

화살표 함수로 함수를 정의할 때 생략할 수 있는 규칙

1. 매개변수가 한 개일 때, 소괄호()를 생략할 수 있다.

   // 매개변수가 한 개일 때, 소괄호를 생략할 수 있습니다.
   const square = x => { return x * x }
   
   // 위 코드와 동일하게 동작합니다.
   const square = ( x ) => { return x * x }
   
   // 단, 매개변수가 없는 경우엔 소괄호를 생략할 수 없습니다.
   const greeting = () => { return 'hello world' }

2. 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호{}를 생략할 수 있다. 이때 코드 블록 내부의 문이 값으로 평가될 수 있으면 return 키워드를 생략할 수 있다.

   const squre = x => x * x
   
   // 위 코드와 동일하게 동작합니다.
   const square = x => { return x * x }
   
   // 위 코드와 동일하게 동작합니다.
   const square = function (x) {
       return x * x
   }