[JavaScript] 화살표함수(arrow function) 알기

함수를 훨씬 간단하게 표현할 수 있다는 화살표함수의 존재를 알고
화살표함수 정리 한번 제대로해서 적용해야지!! 하고 생각한지만 벌써 일주일째.

재사용하지 않는 anonymous function의 경우, 화살표함수를 사용해 return과 중괄호{}를 생략할 수 있다고 하는데...
마침내 정리한 나같은 프린이를 위한 화살표함수(a.k.a arrow function expression) 포스팅!

이번 포스팅으로 좀 더 간결하고 가독성 높은 코드를 쓸 수 있게되길 기대해보며 ➡️ ➡️ ➡️

---

화살표함수란?

function이라는 키워드 없이 fat arrow =>를 이용해 함수를 생성하는 방법

const sum = function(x, y) { 
  return x + y; 
} 

sum(3, 4); //7

화살표함수는 return명령어 없이도 함수 실행을 종료시키고 값을 반환한다.
화살표함수를 이용해 위 함수를 아래와 같이 표현할 수 있다.

const sum = (x, y) => x + y;

sum(3, 4); //7

---

화살표함수의 특징

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.
-MDN

MDN에서 설명하는 것처럼 화살표함수를 모든 경우에 사용할 수 있는 것은 아니다.
그렇다면 지금부터 화살표함수의 특징을 알아보자!

1. 화살표 함수의 기본 문법

var/let/const 함수명 = (매개변수) => {실행문}

    var foo = (a, b) => { 
      return (a + b) * 10; 
    };

만일 매개 변수가 하나라면, 다음과 같이 소괄호를 생략할 수 있다. 두 개 이상일 경우에는 반드시 소괄호() 사용!

    var foo = a => {
      return a * 10;
    }; 

만일 함수가 하나의 실행문만을 가지고 있다면, 중괄호를 생략하고 한 줄에 표기할 수 있다. 이 경우, 실행문의 결과가 함수의 반환값이 된다.

     var foo = (a, b) => a + b; 

     foo(1, 2); //3 (foo 화살표함수의 반환값)

2. 기본적으로 화살표함수는 익명 함수로만 사용할 수 있기 때문에, 함수를 호출하기 위해서는 표현식으로 써야한다.

+익명함수: 함수를 재사용하지 않을 목적으로 함수에 이름을 붙이지 않는 것

//표현식을 이용한 화살표함수 
var addNumber (a, b) => {
  return a + b; 
}; 

//표현식을 이용하지 않은 화살표함수 
function (a, b) => { 
  return a + b; 
}; //Uncaught SyntaxError: Function statements require a function name

화살표함수는 일반함수보다 간결하게 콜백함수로 사용될 수 있다.

var numbers = [1, 2, 3, 4, 5]; 
var newArray = numbers.map(a => a + a);

console.log(newArray); //[2, 4, 6, 8, 10]

+.map()메서드: 배열 내 모든 요소에 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드

3. 화살표함수를 사용할 수 없는 경우

1) 객체의 메소드를 정의하는 경우

2) prototype에 메소드를 할당하는 경우

3) 생성자 함수로 사용하는 경우

---

화살표함수와 this

함수가 어떻게 호출되었는지에 따라 바인딩할 객체가 결정되는 일반함수와는 달리, 화살표함수의 this는 화살표함수가 호출되는 시점과는 무관하게 선언되는 시점에 결정되며 언제나 상위 스코프의 this를 가리킨다.

왜냐하면,
화살표함수에는 this와 argument가 없기 때문이다.
그래서 일반적으로 this가 개입되는 경우라면 일반함수를 사용한다.

var obj = { 
    myName: 'Barbie', 
    logName: function() { 
        console.log(this.myName); 
    }
};

obj.logName();   //"Barbie"
//콜백함수로 일반함수표현방식을 사용하면 dot notation법칙에 따라 this는 obj객체가 된다. 

만일 위 예제를 화살표함수로 표현할 경우, this는 달라진다.

var obj = { 
    myName: 'Barbie', 
    logName: () => { 
        console.log(this.myName); 
    }
};

obj.logName();   //undefined 
/*콜백함수로 화살표함수를 사용하면 이 예제의 경우 this는 상위 스코프인 전역스코프 혹은 
window객체가 된다. 
현재 상위 스코프에는 변수 myName이 존재하지 않으므로 undefined를 반환한다.*/

따라서 window객체에 myName의 값을 할당해주면 아래와 같은 결과를 얻게 된다.

window.myName = "Hannah"; 
var obj = { 
    myName: 'Barbie', 
    logName: () => { 
        console.log(this.myName); 
    }
};

obj.logName();   //"Hannah"
//여기서 this는 obj객체의 상위스코프의 this인 window객체가 된다. 

화살표함수의 this 바인딩 객체 결정방식은 렉시컬 스코프(Lexical Scope)와 유사하다.

+렉시컬 스코프(Lexical Scope): 함수를 어디서 선언하였는지에 따라 상위 스코프가 정해지는 방식. 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따름. ↔ 동적 스코프(Dynamic Scope)

화살표 함수에서 this를 사용할 경우 일반 변수와 동일하게 스코프 체인을 따라 탐색하게 되는 것이다.

마지막으로 추가 예제 하나를 더 살펴보자..!

var status = "😎";

setTimeout(() => { 
  const status = "😍"; 
  
  const data = { 
    status: "🥑", 
    getStatus: function() { 
      return this.status;
    }
  }; 
  
console.log(data.getStatus.call(this));        //😎

위 예제의 맨 아랫줄 this를 가지고 있는 함수는 setTimeout() 화살표함수이다.

하지만 앞서 언급한 바와 같이 화살표함수는 this를 갖고 있지 않으므로, 예제의 this값은 상위 스코프인 global scope의 this 가 된다.

따라서 this.status는 😎를 반환하게 된다.

---

Reference

*본 포스팅은 아래 사이트들을 참고 및 인용하여 작성되었습니다.
학습단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 곧바로 정정하도록 하겠습니다 😊
https://poiemaweb.com/es6-arrow-function
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98
https://saegeullee.github.io/category/javascript/javscript-es5-and-es6/#arrow-functions