JS - 화살표 함수(Arrow function)

화살표 함수(Arrow function)는 ES6문법으로 전통적인 함수표현(function)을 간편하게 할 수 있습니다.
function을 생략하고 그 대신에 화살표(=>)를 이용하여 코드를 축약해 더 직관적으로 볼 수 있습니다.

 

1. 화살표 함수의 기본 구조

화살표 함수의 기본 구조는 아래와 같습니다.

const 함수명 = (매개변수1, 며개변수2, ... ) => {
	
    ~ 로직 전개 ~
   
    return 반환할 값
}

Example)

• 화살표 함수는 항상 익명 입니다.
• 기존의 함수 표현식에서 function 키워드를 지우고, 매개변수를 담는 괄호와 함수 몸통 코드 블록  사이에 화살표를 넣어 만듭니다.
• 함수 몸통 내부에 반환할 값이 있다면 중괄호({})와 return을 생략할 수 있습니다.
    중괄호를 사용하면 값을 반환할 때 return을 사용해야 합니다. (return 없으면 undefined 반환)
    중괄호를 사용하지 않을 때는 한 줄만 써야 합니다.
• 매개변수 하나만 받는다면 매개변수를 담는 괄호도 생략 가능합니다.
    매개변수가 여러 개이면 괄호 생략이 불가합니다.
    매개변수가 없어도 괄호 생략이 불가합니다.
• 콜백 함수에도 사용 가능합니다.

2. 화살표 함수에서의 this

*this 에 관해서는  한 번 읽어보시는 거 추천드립니다! => https://ji-musclecode.tistory.com/19

 

   2-1. 일반 함수에서의 this?

 

위처럼 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다. (this를 명시하는 방법은 여러 개가 있는데 이는 따로 정리하도록 하겠습니다.)

 

   2-2. 화살표 함수에서의 this?

 

화살표 함수에는 'this'에 바인딩할 객체가 정적으로 결정되며, 이는 항상 상위 스코프의 this를 가리킵니다.

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

   3-1. 객체의 메서드를 정의할 때

 

메소드로 정의한 화살표 함수 내부의 this는 메소드를 소유한 객체, 즉 메소드를 호출한 객체를 가리키지 않고 상위 컨택스트인 전역 객체를 가리킵니다. (따라서 위 코드처럼 ES6의 축약 메소드 표현을 사용하여 해결합니다.)

 

   3-2. prototype으로 메서드를 정의할 때

 

객체의 메소드로 정의하였을 때와 마찬가지로 화살표 함수 내부의 this는 생성자 함수를 호출한 Instance를 가리키지 않고 상위 컨택스트인 전역 객체를 가리킵니다. (따라서 위 코드처럼 prototype에 메소드를 할당하는 경우에는 일반 함수를 할당하는 것이 좋은 방법입니다.)

 

   3-3. 생성자 함수로 사용할 때

 

생성자 함수는 prototype 프로퍼티를 가지며 prototye 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용합니다.
하지만 화살표 함수는 prototype 프로퍼티를 가지고 있지 않습니다.
=> 화살표 함수는 생성자 함수로 사용할 수 없습니다.

 

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

 

addEventListener 함수의 콜백 함수를 화살표 함수로 정의하면 this가 상위 컨택스트인 전역 객체를 가리킵니다.
addEventListener 함수의 콜백 함수 내에서 this를 사용하는 경우, function 키워드로 정의한 일반 함수를 사용하여야 합니다.
addEventListener 함수의 일반 콜백 함수 내부의 this는 이벤트 리스너에 바인딩된 요소(currentTarget)를 가리킵니다.

 

 

화살표 함수는 굉장히 유용하지만 그만큼 잘못 사용하면 원하지 않는 결과나 로직상 오류를 낼 수 있다! 따라서 잘 공부해서 내가 원하는 결과를 도출하고자 할 때 적절하게 사용해야겠다!

 

 

*참조 https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb