개발을 배우면서 초기에는 함수를 function a() = a x 2 이런식으로 사용했다면 지금의 코드에선 function이라는 단어 자체를 찾아볼 수 없다. 개발 초기에 배운 화살표 함수 덕분에 안그래도 영타에 쥐약인 나는 화살표함수를 사용하면 오타범벅 오류가 나지 않을 뿐 아니라 개발 코스트도 훌륭하게 줄려주었기 때문이다.
사용법은 그저 function a() = a x 2 해서 함수를 선언하는 방식을 const a = () => a x 2 로 수식이 조금 늘어나지만 함수선언 자체를 간결하게 표기할 수 있게 도와주는 식으로만 알고 있었는데, 이 화살표 함수가 가지고 있는 특징들에 대해서 좀 더 알아보자.
화살표함수(arrow function)이란?
화살표 함수는 일반함수 선언방식을 간결하게 바꾼 함수 선언 방식이다.
솔직하게 그냥 간결하게 쓰기위해서만 새로운 함수 선언 방식을 도입했어야 했을까?
화살표 함수의 도입 배경
화살표 함수는 ES6부터 도입된 새로운 함수 선언 방식인데 ES5의 function 함수 선언 방식에 일부 문제점이 있기 때문에 생겨났다.
function으로 선언하는 함수는 유연성과 확장성이 높지만, 코드량이 많아지면 가독성이 떨어지는 문제가 있었다고 한다. 또한, function 키워드로 선언한 함수 내부에서의 this 바인딩이 혼란스러운 문제 또한 있었다고 한다.
예를 들어, 콜백 함수로 전달되는 함수에서 this를 사용하면 현재 객체가 아닌 전역 객체를 참조할 수 있는 문제가 발생했었다.
이에 대한 대안으로 ES6에서 화살표 함수가 도입되었다. 화살표 함수는 함수 표현식을 간결하게 작성할 수 있고, 함수 내부의 this 바인딩을 일반 함수와는 다르게 처리해준다. 화살표 함수 내부에서의 this는 함수가 정의된 곳의 this를 그대로 가리키게 된다. 이로 인해 this 바인딩이 혼란스럽지 않아지고, 코드의 가독성과 유지보수성이 좋아지는 장점이 있다.
화살표 함수의 특징
위의 도입배경을 바탕으로 특징을 적어보자
-
this의 값이 상위 스코프와 동일하다.
화살표 함수 내에서 this 키워드를 사용하면, 함수가 선언된 곳의 this 값을 참조합니다. 이를 lexical this라고 한다. -
함수의 구문이 간결해진다.
함수의 선언 방식이 간단하기 때문에, 함수를 간결하게 작성할 수 있다. -
함수의 반환값이 암시적으로 처리된다.
화살표 함수에서는 return 키워드를 생략할 수 있습니다. 이때 함수의 실행 결과가 암시적으로 반환값으로 처리된다.
1번 항목의 특징으로 this바인딩의 문제를 해결하고 2,3번의 항목으로 코드 자체가 깔끔해지고 가독성이 좋아진다.
예시
그렇다면 이제 위의 특징을 알아볼 수 있게 화살표 함수를 작성해보자
// 기존 함수 선언 방식
function add(x, y) {
return x + y;
}
// 화살표 함수 선언 방식
const add = (x, y) => {
return x + y;
};
// 매개변수가 하나일 경우 괄호를 생략할 수 있습니다.
const square = x => {
return x * x;
};
// 함수의 실행문이 하나일 경우 중괄호와 return 키워드를 생략할 수 있습니다.
const square = x => x * x;
