Javascript - 화살표 함수(Arrow Functions)

// 함수 선언(Function Declaration)

function a(){ 

  console.log("hi!");

}

// 함수 표현(Function Expression) 무명(anonymous:이름이 없음) 함수를 생성한 후 변수에 담는 방식

var aa = function(){

  console.log("hi!");

};

//함수 표현(Function Expression) 무명(anonymous:이름이 없음) 함수를 생성한 후 변수에 담는 방식

//이 함수 표현 방법으로 함수를 생성할 때 화살표 함수를 사용하여 함수를 생성할 수 있다.

var aaa = () => 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 testObj = { 

  testText: "hi!",

  testFunc: function(){

    setTimeout(function(){

      console.log(this.testText);

    }, 1000)

  },

  testFunc2: function(){

    setTimeout(()=>console.log(this.testText), 1000);

  }

};

testObj.testFunc(); // undefined

testObj.testFunc2(); // "hi!"

위 예제에서 testFunc의 경우 setTimeout의 callback으로 function으로 생성된 무명 함수가 들어갑니다. 

이 경우에 this는 새로 생성된 무명함수가 되어 this.testText는 undefined가 됩니다. 

하지만 testFunc2처럼 화살표 함수를 사용하면 this는 그대로 testObj로 남게 되고 testObj.testText 역시 "hi!"로 남게 됩니다. 이처럼 객체에서 무명 함수를 callback으로 사용하는 경우this로 인해 헷갈리는 부분이 줄어들게 되었습니다.

원문 출저 

https://www.a-mean-blog.com/ko/blog/%ED%86%A0%EB%A7%89%EA%B8%80/_/Javascript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-Arrow-Functions