[TIL] Javascript Arrow function

javascript logo

1. Arrow function이란

◎ 화살표 함수(Arrow functioin)는 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있는 ES6문법 중 하나이다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다.

2. 문법

◎ 이름이 없는 함수의 기본적인 문법을 봐보자.

ES6에서는 function이라는 키워드가 빠지고 소괄호만 남았다. 그리고 =>(arrow)가 추가되었다.

// ES5
function(){}

// ES6
() => {}

◎ 이름이 있는 함수를 만들 때는 다음과 같다.

// ES5
function getName() {}

// ES6
const getName = () => {}

호출할 때는 둘 다 같다.

getName();

◎ 화살표 함수의 매개변수 지정방법을 알아보자.

() => { ... } // 매개변수가 없을 경우.
x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x,y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

◎ 함수 몸체 지정방법을 알아보자.

x => { return x * x } // single line block.
x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return {a : 1}; }
() => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => { // multi line block.
 const x = 10;
 return x * x;
};

◎ 화살표 함수는 콜백 함수에서도 사용할 수 있다. 이 경우 일반적인 함수 표현 식보자 표현이 간결하다.

 

es6 function

ES6 Arrow function

위의 화살표 함수를 더 간결하게 표현하자면 다음과 같다.

 

ES6 Arrow function

3. this

◎ function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.

3-1. 일반 함수의 this

◎ 자바스크립트는 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

콜백 함수 내부의 this는 전역 객체 window를 가리킨다.

다음 코드를 봐보자.

 

결과는 prefix가 undefined라고 나온다. 그 이유에 대해 살펴보자

 

•  (A) 지점에서의 this는 생성자 함수 Prefixer가 생성한 객체, 즉 생성자 함수의 인스턴스

• (B) 지점에서 사용한 this는 아마도 생성자 함수 Prefixer가 생성한 객체(위 예제의 경우 pre) 일 것으로 기대하였겠지만, 이곳에서 this는 전역 객체 window를 가리킨다. 이는 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함) 내부의 this는 전역 객체를 가리키기 때문이다.

 

콜백 함수 내부의 this가 메소드를 호출한 객체(생성자 함수의 인스턴스)를 가리키게 하려면 아래의 방법으로 하면 된다.

• 콜백 함수 내에서 this를 하나의 변수에 담고 사용하면 this가 메소드를 호출한 객체를 사용할 수 있다.

 

Solution 1: isThis = this

• ES5에 추가된 Function.prototype.bind()로 this를 바인딩한다.

 

Solution 2: bind(this)

위 두 개의 결과는 같다.

 

3-2. 화살표 함수의 this

◎ 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수화는 달리 화살표 함수의 this는 언제가 상위 스코프의 this를 가리킨다. 이를 Lexical this라 한다.

화살표 함수의 코드를 봐보자.

 

화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다. (일반 함수에서는 가능하다.)

 

4. 화살표 함수를 사용해서는 안 되는 경우

◎ 화살표 함수는 Lexical this를 지원하므로 콜백 함수로 사용하기 편리하다. 하지만 화살표 함수를 사용하는 것이 오히려 혼란을 불러오는 경우도 있으므로 주의하여야 한다.

4-1. 메소드

◎ 화살표 함수로 메소드를 정의하는 것은 피해야 한다. 화살표 함수로 메소드를 정의하여 보자.

 

Bad method

위 예제의 경우, 메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체 window를 가리킨다. 따라서 화살표 함수로 메소드를 정의하는 것은 바람직하지 않다.

이와 같은 경우는 메소드를 위한 단축 표기법인 ES6의 축약 메소드 표현을 사용하는 것이 좋다.

 

Good method

4-2. prototype

◎ 화살표 함수로 정의된 메소드를 prototype에 할당하는 경우도 동일한 문제가 발생한다. 화살표 함수로 정의된 메소드를 prototype에 할당하여 보자.

 

Bad prototype

화살표 함수로 객체의 메소드를 정의하였을 때와 같은 문제가 발생한다. 따라서 prototype에 메소드를 할당하는 경우, 일반 함수를 할당한다.

 

Good prototype

4-3. addEventListener 함수의 콜백 함수

◎ addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체 window를 가리킨다.

 

Bad 콜백 함수

따라서 addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우, function 키워드로 정의한 일반 함수를 사용하여야 한다.

일반 함수로 정의된 addEventListener 함수의 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킨다.

 

Good 콜백 함수

6. 느낀 점

◎ 일반 함수보다 화살표 함수가 더 간결하고 최신 문법이라 사용하는 것이 좋다고 생각했지만, 상황에 따라 화살표 함수를 사용했을 때 원하는 결과를 가져오기 어려울 수 있다. 상황에 맞게 일반 함수와 화살표 함수를 적절히 사용하여 코드의 질을 높여야겠다.

계속된 실습과 프로젝트를 통해 익숙해지자!

 

※  참조

https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb

https://exploringjs.com/es6/ch_arrow-functions.html

13. Arrow functions