화살표함수란?

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

 const sum = function(x,y) {
   return x + y;
 }
 
 sum(3,4); //7

funtion 키워드를 생략하고 인자블록()과 본문블록{} 사이에 =>를 표기한다
본문 블록이 결과값을 바로 반환하는 경우에는 중괄호를 생략가능하고 한줄에 표기할 수 있다.
화살표함수를 이용해 위 함수를 아래와 같이 표현할 수 있다.

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

 sum(3,4); //7

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

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

화살표함수와 this

함수가 어떻게 호출되었는지에 따라 바인딩할 객체가 결정되는 일반함수와는 달리, 화살표함수의 this는 언제나 상위 스코프의 this를 가리킨다.
즉, 화살표함수는 자신만의 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를 반환한다.*/