화살표 함수 사용법(arrow function)

 

최근 Front-End작업을 많이 하게 되어서 화살표 함수를 자주 사용하고 있는데, 이 화살표 함수를 사용하다보니 매우 편리한 것은 물론이고, 코드 까지 간결해져서 애용하고 있다. 그래서 오늘은 화살표 함수에 대해서 정리하려고 한다.

※ 화살표 함수의 주의점은 IE의 경우 지원자체를 안하기때문에 사용할 떄 고려할 부분이 많다. 

먼저 화살표 함수의 기본작성법은 다음과 같다.

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 다음과 동일함:  => { return expression; }
 
// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }
 
// 매개변수가 없는 함수는 괄호가 필요:
() => { statements }
 
// 기존 다음과 같은 코드를 화살표 함수로 바꾼다면
function test() {
    console.log('hi');
}
 
() => console.log('hi'); // 이런식으로 바꿀 수 있다.
 

JAVA에서 람다식은 -> 모양의 화살표를 사용하지만 자바스크립트의 경우 => 모양의 화살표를 사용한다.

화살표 함수를 사용했을 때 얻는 가장 큰 장점은 this가 명확해 진다는 것이다. 기존 함수 표현식이나 선언식을 이용할 떄에 this는 window를 가르키게 되지만 화살표 함수를 이용할 때에는 상위 스코프를 가르키게 된다는 것이다.

 

대략 위에 설명한 부분만 이용하면 화살표 함수를 사용하는데 어려움은 없을것 같다.

공식문서를 통해 좀 더 심화적인 내용을 보는 것도 좋은 공부가 될 것 같다.

화살표 함수