JS ES6 - Arrow Function (1)

자바 스크립트의 표준화를 ECMA-262 기술규격에 따라 정의된 6번째 버전이 ECMA Script 6다.
2016년 자바스크립트가 ES6로 버전업되고 많은 변화가 있었다.

ES6에서의 변화점중 하나인 화살표 함수에 대해 알아보도록 하자.

1. 함수의 선언

화살표 함수는 기존 함수에 비해

// 기존 함수 선언
function func1(a){
  console.log(a);
  return a + 1;
}

// 화살표 함수 선언
const fun2 = (a) => {
  console.log(a)
  return a + 1;
}

2. 간결한 표현

화살표 함수의 장점 중 하나로, 내부에 반환값만이 존재한다면 return구문과 {}코드블럭을 생략할 수 있으며 인자가 하나일 경우 인자를 감싸는 ()마저도 생략할 수 있어 더욱 간결한 함수 표현을 할 수 있다.

// return, 코드블럭 생략 가능 
const a = (x, y) => x+y

// 인자가 하나일 경우 ()소괄호 생략 가능
const b = k => {
  console.log(k);
  return k+1;, 
}

3. 함수의 호출

화살표 함수는 기본적으로 익명함수이다. 또한 기존 함수와 마찬가지로 콜백함수로 사용할 수 있으며 훨씬 간결하게 표현이 가능하다.

const arr = [1,2,3];

const plusOne = arr.map(x => x+1); // [2, 3, 4]

화살표 함수를 사용하면 기존의 함수보다 더 간결한 표현을 바탕으로 더욱 편리하게 함수를 사용할 수 있게 된다.

다만 위에 서술한 특징 외에 몇몇 차이점으로 인해 화살표 함수로 모든 함수를 대체할 수는 없다.
this 키워드에 관한 기존 함수와 화살표 함수의 차이점은 다음 포스팅에 기재하겠다.