[Deep Dive] ES6 함수의 추가 기능 (화살표 함수, REST 파라미터, 매개변수 기본값)

✔️ 이번 정독을 통해 알게 된 것
화살표 함수
REST 파라미터
매개변수 기본값

 

---

✔️ 화살표 함수

함수 표현식으로 정의해야 합니다. 

함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있습니다. 

// concise body
const power = x => x ** 2;

// 위 표현은 다음과 동일하다.
// block body
const power = x => { return x ** 2; };

power(2); // -> 4

 

단, 함수 몸체가 하나의 몸으로 구성된다 해도 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다. 

const arrow = () => const x = 1; // SyntaxError: Unexpected token 'const'

// 위 표현은 다음과 같이 해석된다.
const arrow = () => { return const x = 1; };

 

객체 리터럴을 반환하는 경우 객체 리터럴을 소괄호 ()로 감싸 주어야 한다. 

const create = (id, content) => ({ id, content });

// 위 표현은 다음과 동일하다.
const create = (id, content) => { return { id, content }; };

create(1, 'JavaScript'); // -> {id: 1, content: "JavaScript"}

 

화살표 함수는 콜백함수로서 정의할 때 유용하다.

// ES5
[1, 2, 3].map(function (v) {
  return v * 2;
});

// ES6
[1, 2, 3].map(v => v * 2); // -> [ 2, 4, 6 ]

 

---

✔️ REST 파라미터

함수에 전달된 인수들의 목록을 배열로 전달받는다. 

함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않는다. 

function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);
console.log(foo.length) // 1

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);
console.log(bar.length) // 2

 

---

✔️ 매개변수 기본값

인수가 전달되지 않은 매개변수의 값은 undefined이지만 ES6에서 도입된 매개변수 기본값을 사용하면 함수 내에서 수행하던 인수 체크 및 초기화를 간소화할 수 있다. 

 

ES5

function sum(x, y) {
  // 인수가 전달되지 않아 매개변수의 값이 undefined인 경우 기본값을 할당한다.
  x = x || 0;
  y = y || 0;

  return x + y;
}

console.log(sum(1, 2)); // 3
console.log(sum(1));    // 1

ES6

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

console.log(sum(1, 2)); // 3
console.log(sum(1));    // 1

 

 

 

👩‍💻 모던 자바스크립트 Deep Dive를 정독하고 제가 이해한 내용을 정리한 글입니다 👩‍💻