💼ES6 주요 문법

JavaScript에도 버전이 있다. ES는 ECMAScript의 준말이다. 최신 버전은 ES2019지만 ES6에서 가독성과 유지보수성을 획기적으로 향상시킨 문법이 추가되어서 배워야 한다. let const template literal 등 이제 배우는 문법들이 ES6에서 추가된 것들이다.

🗂️spread / rest 문법

📑spread 문법

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

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

const numbers = [1, 2, 3];

sum(...numbers)  // 6

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

📑rest 문법

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

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

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

Args를 배열로 취급하기 때문에 배열 메서드인 .reduce()를 사용해서 누적해서 더할 수 있다

📑배열에서 사용하기

1. 배열 합치기

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

console.log(lyrics);  // ['heade', 'shoulders', 'knees', 'and', 'toes']

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // spread 문법은 기존 배열을 변경하지 않는다. 변경하려면 재할당 하자.

console.log(arr1);  // [0, 1, 2, 3, 4, 5];

2. 배열 복사

let arr1 = [1, 2, 3];
let arr = [...arr];  // arr.slice()와 유사.
arr2.push(4);   // spread 문법은 기존 배열을 변경하지 않는다. arr2를 수정한다고 arr이 변경되지 않는다.

📑객체에서 사용하기

let obj1 = { name: "John", x: 21};
let obj2 = { name: "Mary", y: 5};

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

console.log(clonedObj) // { name: "John", x: 21};
console.log(mergedObj) // { name: "Mary" , x: 21, y: 5}

clonedObj는 기존 obj1를 변경시키지 않고 복사.
mergedObj는 순서대로 obj1을 spread, 두번째로 obj2를 spread한다. 여기서 프로퍼티의 키값이 같은 것이면 재할당을 해서 값을 바꾼다.

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

function abc(a, b, ...manyMoreArgs) {
	console.log("a", a);
  	console.log("b", b);
  	console.log("manyMoreArgs", manyMoreArgs);
}

abc("one", "two", "three", "four", "five", "six")

a one
b two
manyMoreArgs ['three', 'four', 'five', 'six']

🗂️구조분해할당

📑배열

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

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

📑객체

const { a, b, ...rest } = { a: 1, b:2, c: 3, d:4 }

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

객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러 발생할 수 있다.

🗂️화살표 함수

ES6에서는 함수를 정의하는 방법이 하나 더 생겼다. 바로 화살표 함수(arrow function). function 키워드 대신 화살표( => )를 쓴다.

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

const square = x => { return x * x }

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

const square =  x => x * x

📝마지막으로

spread는 펼쳐주고, rest는 모아주고