[JavaScript] Arrow Function 이해하기

이번 글에는 화살표 함수라는 것에 대해 알아보겠습니다.

화살표 함수란?

기존 ES5 이하 자바스크립트에서는 함수를 정의할때 function 함수() {} 혹은 var 함수 = function(){} 와 같은 방법을 사용하였습니다. 하지만 ES6 이후 버전에서 var 함수 = () => {} 이런식으로 사용하는 화살표 함수가 등장하게 됩니다. 사용방법은 같지만 몇가지 편리한 장점이 있어서 사용하는 것이 좋을때가 많습니다.

화살표 함수를 사용하는 이유(1)

일반 함수에 비해 훨씬더 직관적입니다.

예를들어 특정 매개변수를 넣으면 곱하기 2 를 해주는 함수를 만든다고 가정해봅시다.
ES5 자바스크립트에서는

var double = function(a) {
	return a * 2;
}

console.log(double(2))
//4

이런식으로 표현해야합니다. 하지만 화살표함수는

var double = (a) =>{return a*2}
console.log(double(2))
//4

이런식으로 훨씬 직관적이며, 프로그래밍을 전혀 모르는 사람도 뭐가 나올것인지 예측해볼 수 있습니다.

화살표 함수를 사용하는 이유(2)

축약형으로 사용이 가능합니다.

앞서 만든 화살표 함수를 축약형으로

var double = a =>{return a*2}
console.log(double(2))
//4

var double = a =>return a*2
console.log(double(2))
//4

이런식으로 한줄로 표현시 소괄호와 중괄호를 생략 가능하여 짧게 코딩이 가능합니다. 이런것들이 습관화가 되고 자주 쓰다보면 일반함수보다 개발시간이 많이 단단축 될 것입니다 :)

---

추가적으로, 일반함수와 화살표함수는 this 값을 정의할때 차이를 보입니다.

    <button id="button">버튼</button>
    <button id="button2">버튼</button>
    <script>
      document.getElementById("button").addEventListener("click", function () {
        console.log(this);
        //버튼 요소
      });

      document.getElementById("button2").addEventListener("click", () => {
        console.log(this);
        //윈도우 객체
      });
    </script>

이런식으로 각각 일반함수와 화살표함수의 콜백함수를 이용한 이벤트를 줬을때 값이 다르게 나옵니다. 그 이유는 화살표함수는 this를 재정의해주지 않기때문에 내부에서 this값을 변화시켜주지 않습니다. 때문에 윈도우가 출력이 되는 것입니다.
그렇다면 버튼요소를 사용하기 위해선 어떻게 해야할까요? 간단합니다.

document.getElementById("button2").addEventListener("click", (e) => {
       console.log(this);
       //윈도우 객체
       
       console.log(e.currentTarget)
       //버튼요소
     });

이런식으로 매개변수를 넣어주고 currentTarget 메서드를 이용해주시면 일반함수의 this와 같은 값이 출력됩니다.

참고자료
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions