자바스크립트 화살표 함수 사용 방법 정리

자바스크립트의 화살표 함수는 ES6에서 도입되었으며, function 키워드 대신 =>(arrow notation 또는 fat arrow라 함)를 사용한다.

 

다음 예시에서 보듯, 화살표 함수 생성은 아규먼트[파라미터] 다음에 =>를 사용하고 함수의 바디를 적는다. 함수가 하나의 아규먼트를 취할 경우 괄호를 생략할 수 있으며, 함수 바디가 하나의 구문만을 포함하는 경우 중괄호와 return구문을 생략할 수 있다.

 

또한 화살표 함수는 언제나 익명이며, 따라서 이를 변수에 할당할 수는 있으나, function 키워드처럼 이름을 만들 수는 없다. 다음은 <Learning JavaScript>에서 가져온 화살표 함수 예시다.

const f1 = function() {
    return "hello!";
} // 또는
const f1 = () => "hello!";

const f2 = function(name) {
    return 'Hello, ${name}!';
} // 또는
const f2 = name => 'Hello, ${name}!';

const f3 = function(a, b) {
    return a + b;
} // 또는
const f3 = (a, b) => a + b;

또 다른 예를 살펴보자. 화살표 함수를 map 메소드에 활용하는 경우다.

let myNumbers = [10, 50, 200];
let doubleNumbers = myNumbers.map(function(x){
  return x * 2
}) // 또는

let anotherDoubleNumbers = myNumbers.map(x => x * 2);

마지막으로 화살표 함수에서의 this를 살펴보자. 자바스크립트의 일반 함수와 메소드에서는 함수를 선언할 때가 아닌 함수를 호출하는 방식에 따라 this가 바인딩 되는 객체가 동적으로 결정되지만, 화살표 함수에서는 언제나 상위 스코프의 this를 정적으로 가리키게 된다. 따라서 화살표 함수는 메소드를 정의하는 데 사용하지 않는 게 좋으며, 또한 call, apply, bind 메소드를 사용하여 this를 변경할 수도 없다.

 

더 읽어볼 자료
https://poiemaweb.com/es6-arrow-function