Javascript - 화살표 함수(Arrow Functions)

자바스크립트에서 함수를 생성하기 위해서는 주로 function 키워드를 사용합니다.

function 키워드는 2가지 방법으로 함수를 생성할 수 있는데요, 

// 함수 선언(Function Declaration)
function sayHi(){ 
  console.log("hi!");
}

// 함수 표현(Function Expression)
var sayHi2 = function(){
  console.log("hi!");
};

이 중 함수 표현은 무명(anonymous:이름이 없음) 함수를 생성한 후 변수에 담는 방식입니다.
이 함수 표현 방법으로 함수를 생성할 때 화살표 함수를 사용하여 함수를 생성할 수 있습니다.
위 sayHi2를 화살표 함수로 생성하면 아래와 같습니다.

var sayHi2 = () => console.log("hi!");

이와 같이 화살표 함수는 무명 함수를 생성하는 방법 중의 하나로 기본 형태는  (파라메터1, 파라메터2,...) => { 함수내용 }입니다.

화살표 함수의 형태상 특징은 다음과 같습니다.

1. 함수 내용이 한줄인 경우 함수내용을 감싸는 {}를 사용하지 않아도 됩니다.
2.  {}가 없는 경우 해당 함수의 실행결과를 자동으로 이천 합니다.
3. 함수 내용이 한줄 이상인 경우 return을 사용해서 결과를 리턴합니다.
   
4. 파라메터가 한개인 경우 파라메터를 감싸는 ()를 생략할 수 있습니다. (파라메터가 없는 경우에는 위의 sayHi2의 경우 처럼 파라메터 없이 빈 ()를 표시하여야 합니다.)

위 내용을 사용해서 함수 표현과 화살표 함수를 비교해 봅시다.

// 함수 표현
filteredArray = myArray.filter(function(element){
  return element > 2;
});

// 화살표 함수
filteredArray = myArray.filter(element => element > 2);

동일한 역할을 하는 코드지만 화살표 함수로 더 깔끔합니다.

화살표함수는 단순히 코드 수를 줄이는 역할이 아니라 일반 함수와 비교하여 this가 바인딩하지 않는다는 기능상의 차이가 있습니다.

var myObj = { 
  myText: "hi!",
  myFunc: function(){
    setTimeout(function(){
      console.log(this.myText);
    }, 1000)
  },
  myFunc2: function(){
    setTimeout(()=>console.log(this.myText), 1000);
  }
};

myObj.myFunc(); // undefined
myObj.myFunc2(); // "hi!"