---

🕖 DAY +14 / 2022. 11. 08

SEB FE / Section1 / Unit9 / JavaScript 핵심 개념과 주요 문법

---

📌 Today I Learned

• ES6

💬 ES6

📂 spread/rest 문법

spread 문법

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

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

const numbers = [1, 2, 3];

sum(...numbers) // 질문: 어떤 값을 리턴하는가?

rest 문법

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

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

sum(1,2,3) // 질문: 어떤 값을 리턴하는가?
sum(1,2,3,4) // 질문: 어떤 값을 리턴하는가?

`...args`는 `rest parameter`, `rest syntax`라고 부른다.

남아있는 모든 인자를 하나의 배열에 담기 때문에 이렇게 부른다.

function printMaxNums(...args) {
  console.log(args)
}

실행이 되면 rest parameter args는 모든 남아있는 인자를 할당받는다. 따로 매개변수를 빼놓지 않았으므로 args는 배열의 형태로 모든 인자를 할당 받는다. 그렇기 때문에 답은 [10, 30, 40], A이다

function printMaxNums(num1, ...args) {
  console.log(args) // [30, 40]
}

따로 매개변수를 지정했었다면, 남은 매개변수만 배열의 형태로 rest parameter args에 할당한다.

📂 구조 분해 할당

배열

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

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

객체

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

객체에서 구조 분해 할당을 사용하는 경우, 선언(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) // 질문: 콘솔에서 어떻게 출력될까?