S1. ES6

노션으로 보기

ES6

---

• ES6 : JavaScript의 일종의 버전인 ECMAScript6

ES6에서 ... 기호의 두가지 용법 : spread 와 rest

• **JavaScript(ES6)의 Spread 와 Rest 쉽게 설명하기**

💡 ***spread operator**는 **기존의 변수**를 **펼쳐서** **주는** 쪽이고,*

*rest parameter는 여러개의 인자를 받고 그것들을 합쳐서 새로운 배열/객체를 만든다.*

---

Spread 문법

• 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을때 사용
• 객체, 배열에서 사용 가능
• 기본 배열을 변경하지 않는다.

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

const number = [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

• reduce 함수 : arr.reduce(callback, 누적되는 값, 현재 배열의 요소)

  : 배열의 요소를 순차적으로 순회 → 하나의 결과값을 반환한다.

//만약 rest parameter의 인자가 2개라면??
// -> 앞쪽에서 받은 인자를 제외한 나머지 인자들로 배열을 합쳐서 리턴한다.

let foo = ['a', 'b', 'c', 'd']

function foo(a, ...rest) {
 console.log(rest) // ['b', 'c', d']
 }

foo = ['a', 'b', 'c', 'd']

// 3개라면 ?
function myFun(a, b, ...manyMoreArgs) {} //매개변수 a,b를 제외한 나머지 인자를 받아 배열을 생성한다.

배열에서 사용하기

---

• spead 문법은 배열에서 강력한 힘을 발휘

1. 배열 합치기

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

// 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr1의 값을 바꾸려면 새롭게 할당해야 한다.
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

//arr1의 값 : [0, 1, 2, 3, 4, 5]

1. 배열 복사

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

// arr의 값 : [1, 2, 3]
// arr2의 값 : [1, 2, 3, 4]

➕ spread문법 배열 추가학습

---

1. concat 메소드처럼 활용

• 기존 배열의 요소를 새로운 배열 요소의 일부로 만들고 싶을 때 → concat 메소드를 사용

const arr = [1, 2, 3];
// ...arr은 [1, 2, 3]을 개별 요소로 분리한다
console.log([...arr, 4, 5, 6]); // [ 1, 2, 3, 4, 5, 6 ]

1. **push 메소드처럼 활용**

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// ...arr2는 [4, 5, 6]을 개별 요소로 분리한다
arr1.push(...arr2); // == arr1.push(4, 5, 6);

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

1. splice 메소드처럼 활용

const arr1 = [1, 2, 3, 6];
const arr2 = [4, 5];

// ...arr2는 [4, 5]을 개별 요소로 분리한다
arr1.splice(3, 0, ...arr2); // == arr1.splice(3, 0, 4, 5);

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

객체에서 사용하기

---

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

let clonedObj = { ...obj1 }; //결과 : { foo: 'bar', x: 42 }
let mergedObj = { ...obj1, ...obj2 }; // 결과 : { foo: 'baz', x: 42, y: 13 };
 // => 기존에 있는 값이면 값을 가져오지 않고, 새로운 값에 대해서만 가져온다.

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

---

function myFun(a, b, ...manyMoreArgs) {   //rest 파라미터는 마지막 인자로만 들어갈 수 있다
  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"];
 // -> 대응하고 **남은** 인수들로 배열을 만든다 

분해 후 새 변수에 할당 (구조 분해 할당)

• [구조 분해 할당](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) : spread 문법을 이용하여 값을 해체 후 → 개별 값을 변수에 새로 할당하는 과정을 말함.

---

1. 배열

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

// 질문: a, b, rest는 각각 어떤 값인가요?
//a : 10
//b : 20
//rest : [30, 40, 50]

1. 객체

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

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

// 질문: a, b, rest는 각각 어떤 값인가요?
//a : 10
//b : 20
//rest : {c: 30, d: 40}

1. 함수에서 객체 분해

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user) // 질문: 콘솔에서 어떻게 출력될까?

//"jdoe is John"

Reference

---

• 전개 구문
• Rest 파라미터

종합퀴즈

---

1. 반복문의 활용

function findBiggestArg(...args) {
  let biggestArg = 0;
  for (let i = 0; i < args.length; i += 1){
    if (biggestArg < args[i]){
      biggestArg = args[i]
    }
  }
  return biggestArg
}

let value = findBiggestArg(10, 30, 40, 20)

//value의 값 : 40

1. 배열의 오류 활용

• Math.max는 숫자(number)인 인자 중 가장 큰 수를 리턴하는 메서드로, 배열을 전달했기 때문에 오류 발생

let arr = [10, 30, 40, 20]
let value = Math.max(arr)

//value의 값 : NaN

//따라서 spread syntax(구문)을 통해 -> *iterable한 모든 요소를 펼쳐주는 문법을 사용한다.
//*iterble : 한번에 하나의 member를 반환할 수 있는 객체를 의미, 반복가능한 객체(대표적으로 string, array, typearray, map, set)

let arr = [10, 30, 40, 20]
let value = Math.max(...arr) // 다음과 같이 실행하면 답이 40으로 출력된다.

1. spread 파라미터의 배열 합치기

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

// 둘 중 정답은?
//(a) [['code', 'states'], 'pre', ['course', 'student']]
//(b) ['code', 'states', 'pre', 'course', 'student']

//정답은 b이다. spread 문법은 요소를 펼쳐서 넣어주는것이기 때문이다.

1. 배열의 중복값이 있다면?

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

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

console.log(mergedObj) //결과는 {foo: 'baz', x: 42, y: 13}가 된다. 
  // -> obj1과 obj2의 키가 같을 경우 -> 값이 덮어 씌워지고, 
  //    그렇지 않은 경우 -> 각각의 키와 값이 모두 그대로 전달된다.