자바스크립트 문법(6) 화살표 함수

본 게시글은 아래의 글을 필사하였습니다.

https://webdoli.tistory.com/68?category=833233

자바스크립트 문법 (6) 화살표 함수

자바스크립트가 ES2015 문법을 사용함으로써 체감상 가장 큰 변화는 화살표 함수가 아닐까 한다. 특히, 익명함수라는 자바스크립트만의 특별한 함수가 더 특별해졌다. 화살표 함수를 사용하면 코드를 경제적으로 작성할 수 있다.

단순하게 생각하면, 화살표 함수는 기존 자바스크립트 문법에서 'function' 키워드를 뺀 함수를 의미하지만 익명 함수의 콜백지옥을 생각해보면 굉장히 발전했음을 느낄 수 있다. 일단, 화살표 함수의 사용법부터 알아보자. 다음과 같은 익숙한 덧셈 'plus()'함수를 화살표 함수로 변경하면 어떻게 될까.

function plus(x, y) {
  return x + y;
}

화살표 함수에서는 이렇게 작성한다.

var plus = () => {
  x + y;
}

return을 사용하지 않아도 되며, 익명함수일 경우 ()만 게재하고 옆에 화살표만 붙이면 끝난다. 굉장히 간편해졌음을 알 수 있다.

가변길이함수

ES2015에서는 인자(arguments)에 점을 3개 부여하면 가변길이 함수를 만들 수 있다.

function sum(...nums) {
  let result = 0;
  for(let num of nums) {
    if(typeof num !== 'number') {
      throw new Error('지정값이 숫자가 아닙니다.'+num);
    }
    result += num;
  }
  return result;
}

try {
  console.log(sum(1,3,4,6,7));
} catch(e) {
  window.alert(e.message);
}

ES2015버전 이후부터, 더 이상 arguments 객체를 만들지 않고, 가변인수를 넣을 수 있는 함수를 만들 수 있다.