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

sum(1,2,3) // 질문: 어떤 값을 리턴하나요?  // 6
sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요?  // 10

---

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

 

#배열합치기

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

// 질문: lyrics의 값은 무엇인가요

lyrics = ['head', 'shoulders', 'knees', 'and', 'toes']

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

// 질문: arr1의 값은 무엇인가요?

arr1 = [0, 1, 2, 3, 4, 5]

spread문법은 기존 배열은 변경하지 않는다!!!!

 

#배열복사

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

// 질문: arr와 arr2의 값은 각각 무엇인가요?

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

#객체에서 사용하기

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

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

// 질문: clonedObj와 mergedObj의 값은 각각 무엇인가요?

clonedObj = {foo: 'bar', x: 42}
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");

// 질문: 콘솔은 순서대로 어떻게 찍힐까요?

---

구조분해할당: spread문법을 이용하여 값을 해체한후, 개별값을 변수에 새로 할당하는 과정

 

#배열

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

// 질문: a, b, rest는 각각 어떤 값인가요?

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

#객체

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

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

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

 

#함수에서 객체 분해

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

---

#...args: rest parameter, rest syntax라고 부른다
args는 배열의 형태로 모든 인자를 할당받는다.

#spread syntax는 요소를 펼쳐서 넣어주는 것

---

# rest파라미터 

-항상 배열이다.

-이름그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다. 따라서 rest파라미터는 반드시 마지막 파라미터이어야한다. (함수의 파라미터에 쓰여서 뒤에 남는 요소들을 배열로 받아준다.)
-length프로퍼티에 영향을 주지 않는다.
-전달인자의 수가 정해져 있지 않은 경우에도 유용하게 사용할수 있다.

# arguments : 실제 배열이 아니다. 객체라고생각하면될듯.

ES6의 화살표함수에는 함수 객체의 arguments 프로퍼티가 없다. 따라서 화살표 함수로 가변인자 함수를 구현해야 할때는 반드시 rest 파라미터를 사용해야한다.

---

# rest/spread 문법을 객체 분해

const user = {name: '김코딩',company: {name: 'Code States', department: 'Development',role: {name: 'Software Engineer'}},age: 35}

* const changedUser = {...user, name: '박해커',age: 20}

-> ...user가 앞에 있는경우 : 원래 user에다가   changedUser 이부분이 덮어씌워진다.

changedUser = ({name: '박해커',company: {name: 'Code States', department: 'Development',role: {name: 'Software Engineer'}},age: 20})

 

* const overwriteChanges = {name: '박해커',age: 20,...user} 

->  ...user가 뒤에 있는경우 : 박해커와 20이 앞에 주어졌으니까 바겼다가 다시 user로 덮어씌워진거다. 그래서 결국 user와 같다.

overwriteChanges = {name: '김코딩',company: {name: 'Code States', department: 'Development',role: {name: 'Software Engineer'}},age: 35}

 

* const changedDepartment = {...user,company: {...user.company,department: 'Marketing'}}

-> marketing만 바꼇다!

changedDepartment = {name: '김코딩',company: {name: 'Code States', department: 'Marketing',role: {name: 'Software Engineer'}},age: 35}

---

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


const concatenated = [...arr1,...arr2];    //    ->  [0, 1, 2, 3, 4, 5]
arr1.concat(arr2);                         //    ->  [0, 1, 2, 3, 4, 5]

---

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

여기서 value의 값은 NaN이다. 

Math.max를 MDN에서 검색해 보시면, 숫자인 인자들을 비교하여 가장 큰 수를 리턴하는 메서드인데, 여기서는 배열을 전달하여 실행하였기 때문에 NaN이 나옵니다.

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

여기서 value의 값은 40이다.

여기서는 spread syntax가 사용되었습니다. spread syntax는 iterable 한 모든 것의 (대표적으로 문자열, 배열) 요소를 "펼쳐"주는 문법을 의미합니다. Math.max(10, 30, 40, 20)과 같기때문에 40이 나온다.