오늘의 생각

시작하며/끝나며
오늘은 ES6의 주요 문법 중, 심화 내용을 다루었다.
시간이 지날수록 점점 이해의 폭이 넓어지는 느낌이 든다.
사실 오늘과 내일의 중요한 내용은 JS문법을 직접 적용해보는 Koans 과제다!
내일의 회고록에 본격 오류사항과 해결방법을 적어 볼 예정이다.

오늘의 학습내용

1. ES6 주요 문법 개요

1) Spread

• 내용을 풀어서 인자로 전달하거나, 각각의 요소로 넣을 때에 사용
• 객체 혹은 배열에서 사용 가능
• 기존 요소를 변경하지 않음(immutable)

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

const numbers = [1, 2, 3];

sum(...numbers) // 6

• 배열 합치기

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

// ['head', 'shoulders', 'knees', 'and', 'toes']

• 배열 복사

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

// arr = [1, 2, 3]
// arr2 [1, 2, 3, 4]

2) Rest

• 파라미터를 배열의 형태로 받아서 사용할 수 있음. 파라미터 개수가 가변적일 때 유용
• 객체, 배열, 함수의 매개변수에서 사용 가능.

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

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

• 객체에서 사용하기

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

let mergedObj = { ...obj1, ...obj2 };
// 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 ['three', 'four', 'five', 'six']

3) 구조분해할당

: 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정

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

console.log(value)
// ['code', 'states', 'pre', 'course', 'student']