ES2015 함수

🗓2018년 10월 27일 ∙ 🖊TutorialPost ∙ ⏳2분

ES6에서 함수를 편리하게 사용할 수 있는 여러 기능이 추가되었습니다. 함수 파라미터의 기본값을 지정할 수 있으며, 레스트 파라미터를 이용해 기존의 arguments를 대신해 편리하게 가변 인수를 사용할 수 있습니다.

그리고 화살표 함수를 사용해 함수 표현식을 간략하게 표현할 수 있게 되었습니다.

파라미터 기본값

ES6에서는 함수의 파라미터에 기본값을 지정할 수 있습니다.

function f(x, y = 7, z = 42) {
  return x + y + z;
}

console.log( f(1) );  // 50

위의 예시와 같이 함수의 기본값을 지정해 놓을 경우, 함수 호출 시 생략된 인수에 대해서는 기본값을 사용하게 됩니다.

나머지 매개변수

ES6에서는 함수의 파라미터에서 ... 을 사용하면 해당하는 파라미터를 함수 내부에서 배열로 받을 수 있습니다. 이러한 인자를 나머지 매개변수 (Rest Parameter) 라고 합니다.

function sum(...numbers) {
  let result = 0;
  numbers.forEach(function(n){
    result += n;
  });
  return result;
};

sum(1, 2, 3);  //-> 6

기존의 자바스크립트에서 가변인수를 사용하기 위해서는 arguments 를 사용했습니다. 하지만 arguments 는 유사배열 객체이므로 편리한 조작을 위해 배열로 변환하거나 for 문을 사용해야 했습니다.

하지만 ES6의 레스트 파라미터는 배열로 인수를 받으므로 메서드를 이용해 인수를 조작할 경우 더 편리하게 사용할 수 있습니다.

화살표 함수 (Arrow Function)

ES6에서는 화살표 함수 표현식을 이용해 함수 표현식 (리터럴 함수)를 간략하게 표현할 수 있습니다.

아래는 기존 자바스크립트에서 사용하는 함수 표현식입니다.

var sum = function(a, b) {
  return a + b;
}

sum(1, 2);  // 3

화살표 함수 표현식을 사용하면 아래와 같이 표현할 수 있습니다.

let sum = (a, b) => {
  return a + b;
}

이렇게만 사용한다면 그다지 간략한 것 같지 않습니다만, 화살표 함수는 여러가지 경우에 함수 표현식을 생략할 수 있는 기법들을 제공합니다.

만약 함수의 인수가 하나라면 인수를 감싸는 괄호를 생략할 수 있습니다.

let twice = a => { return a + a };

함수 내부의 문장이 return 문 한줄이라면 중괄호와 return 키둬드 역시 생략할 수 있습니다.

let twice = a => a + a;

단, 인수가 없는 함수라면 괄호는 생략할 수 없으며, 빈괄호를 사용해서 화살표 함수 표현식임을 드러내야 합니다.

let hello = () => { console.log("Hello"); }

이러한 화살표 함수는 다른 함수의 콜백함수로 사용될 때 아주 효과적으로 사용됩니다.

배열의 map 함수에 사용해보겠습니다.

let evens = [2, 4, 6, 8];
let odds = evens.map(v => v + 1)
console.log(odds);  // [ 3, 5, 7, 9 ]

특히나 화살표 함수를 사용할 경우 this 의 바인딩 방식이 기존 함수와 다릅니다. 화살표 함수를 사용할 경우 함수 내부의 this는 함수를 호출하는 시점에 결정되는 것이 아니라, 화살표 함수 바깥의 this 값을 화살표 함수 내부의 this 값으로 사용합니다.

SHARE