(SEB_FE) Section1 Unit9 ES6 주요 문법

1. spread/rest 문법을 사용할 수 있다.
2. 구조 분해 할당을 사용할 수 있다.
3. 화살표 함수로 함수를 정의할 수 있다.

⭐spread/rest 문법

💫 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) => {
    return previous + current;
  });
}

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

⭐배열에서 사용하기

spread 문법은 배열에서 강력한 힘을 발휘한다!

💫 1. 배열 합치기

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

// 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), 
//arr1의 값을 바꾸려면 새롭게 할당해야 한다. 

💫 2. 배열 복사

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

//참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), 
//arr2를 수정한다고, arr이 바뀌지는 않는다. 

⭐객체에서 사용하기

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

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

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

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

myFun("one", "two", "three", "four", "five", "six");

• 이때, ...manyMoreArgs 는 rest parameter, rest syntax 라고 칭함.
  ➡ 남아있는 모든 인자를 하나의 배열에 담기 때문에!
• 즉, console.log("manyMoreArgs", manyMoreArgs); 의 출력 결과는
  manyMoreArgs = ["three", "four", "five", "six"] 이다.

Quiz

// 1번 예시
let arr = [10, 30, 40, 20]
let value = Math.max(arr) // NaN 

// 2번 예시
let arr = [10, 30, 40, 20]
let value = Math.max(...arr) // 40 

• 1번 예시 ➡ Math.max는 숫자인 인자들을 비교해 가장 큰 수를 리턴하는 메서드인데, 배열을 전달하여 실행하였기 때문에 NaN(Not a Number)
• 2번 예시 ➡ arr의 요소를 모두 "펼쳐서" Math.max 메서드에 전달하여 실행.
  즉, Math.max(10, 30, 40, 20)과 같기 때문에 return 값은 40 이다.

let arr = ['code', 'states']
let value = [
  ...arr,
  'pre',
  ...['course', 'student']
]

• 펼쳐서 넣어서 value = ['code', 'states', 'pre', 'course', 'student']
• 안펼치면 value = [['code', 'states'], 'pre', ['course', 'student']]
• "구조분해할당" = 이처럼 값을 해체 후, 개별 값을 변수에 새로 할당하는 과정

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

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

console.log(mergedObj)

• 위 예시에서 foo와 같이 key값이 같을 경우, 값은 덮어씌워진다.
  즉 ,{foo: 'baz', x: 42, y: 13}

⭐화살표 함수(arrow function)

• ES6가 등장한, 함수를 정의하는 방법

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

• 함수표현식으로 함수를 정의할 때보다 간략하게 함수를 정의할 수 있다

// 함수선언문
function sum (x, y) {
	return x + y;
}

// 함수표현식
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
}