[JavaScript] ES6 - 화살표 함수(arrow function) 개념 정리

ES6이 도입되기 전 까지 자바스크립트에서 함수를 선언할 때, 아래와 같은 방식을 사용하였습니다.

 

function greeting(name) {
	return `Hello! ${name}`
}

console.log(greeting("Kariu");

 

다른 프로그래밍 언어에서 함수를 선언할 때 위와 같은 방식을 많이 사용합니다. 이러한 방식은 매우 친숙하죠. 하지만 ES6 등장 이후로 자바스크립트에는 새로운 함수 선언 방식이 등장하였습니다.

 

 

화살표 함수(Arrow function)란?

 

ES5에서 일반적으로 쓰인 전통적인 함수(위의 코드 참조)를 간편하게 표현할 수 있는 함수입니다. 위의 코드를 화살표 함수로 바꾸면 아래와 같습니다.

 

const greeting = (name) => return `Hello! ${name}`;
 

console.log(greeting("Ray"));

 

새로 도입된 화살표 함수를 이용하면 코드를 더욱 간결하게 작성할 수 있습니다. 화살표 함수가 처음에는 낯설어서 적응하기 힘들수도 있지만 익숙해지면 매우 편한 문법입니다.

 

 

화살표 함수(Arrow function) 사용 시, 주의해야할 점

 

this의 값은 함수가 호출되는 방식에 따라 다릅니다.

 

전통적인 함수에서 this를 사용할 땐 정상적으로 작동하지만 화살표 함수에서 사용하면 에러가 뜨는 것을 확인할 수 있습니다.

 

 

예시 1) 전통적인 함수에서 this를 사용했을 경우. -> button에 정상 작동

button.addEventLister("click", function(){
  console.log(this);
})

 

예시 2) 화살표 함수에서 this를 사용했을 경우. -> 에러

button.addEventLister("click", () => {
  console.log(this);
})

 

화살표 함수에서 this가 에러를 일으키는 이유는 다음과 같습니다.

 

화살표 함수(arrow function)의 this는 Window 객체를 가르키기 때문이다.

 

그러므로 화살표 함수에서 this를 사용할 땐 주의해야 합니다.

 

 

 

 

참고자료

• 모던 자바스크립트 핵심 가이드(한빛미디어) - 알베르토 몬탈레시
• 노마드코더 - ES6의 정석