1. 화살표 함수(arrow function)란?

화살표 함수(Arrow Function)본래 JavaScript에서 함수를 선언할 땐 function 이란 키워드를 썻는데,ES6가 도입되면서 함수를 선언하는 새로운 문법이 등장했고 그것이 바로 화살표 함수이다. 화살표 함수는 말 그대로 화살표 (=>) 표시를 사용해서 함수를 선언하는 방법이다.

//ES5
function getName() {}

//ES6
const getName = () => {}

위에 코드에서 ES6는 함수를 getName 이라는 저장한걸 볼 수 있는데 사실 function(함수)은 변수에 저장할 수 있는 하나의 식이다. 그래서 ES5일 때도 마찬가지로 변수에 저장할 수 있었다.

//ES5
//Function Declaration
function getName() {}

//ES5
//Function Expression
const getName = function() {}

인자가 하나일 때는 소괄호를 생략할 수 있다. 그러나 인자가 두 개 이상일 때는 생략이 불가능하다.

//ES5
const getName = function(name) {}

//ES6
const getName = (name) => {}
const geName = name => {}// 인자가 하나이기 때문에 소괄호 생략

//ES5
 const getName = function(name, age) {}

//ES6
const getName = (name, age) => {} // 인자가 두개이상이기 때문에 소괄호 입력

만약 return 이외의 실행내용 없이 return만 수행한다면 return 키워드와 중괄호를 생략할 수 있다.

//ES5
function introduce(name){
	return '제 이름은 ' + name + '입니다.';
}

//ES6
const introduce = name => {
	return '제 이름은 ' + name + '입니다.';
}

// * retunr, {} 생략
const introduce = name => '제 이름은 ' + name + '입니다.';
//중괄호와 return문이 생략될 경우, 화살표 오른쪽에는 리턴될 "값"만 쓴다.

위에 내용처럼 화살표 함수가 단순히 간단하게 작성할 수 있다는 이유로만 사용되는것일까? 그렇지는 않다. 화살표 함수에는 재약이 있는데, 무조건 익명함수로만 사용할 수 있으며, 메소드나 생성자 함수로 사용할 수 없다. 이런 재약이 있음에도 사용하는것은 this바인딩 때문이다.

2. 화살표 함수의 this 바인딩

JS의 this는 상황에 따라 다르게 바인딩된다. 대표적으로 this에 바인딩되는 값들은 이렇다.

• 전역 공간의 this : 전역 객체
• 메소드 호출 시 메소드 내부의 this : 해당 메소드를 호출한 객체
• 함수 호출 시 함수 내부의 this : 지정되지 않음

const car = {
	name : "benz",
  	getName : function(){
      const innerFunc = function(){
      	console.log("innerfunc", this);
      };
      innerFunc();
    }
};

car.getName(); // undefined

• car.getName() 메소드 호출 시 내부 함수 innerFunc가 실행됨
• 함수가 호출됐으므로 innerFunc 내부의 this는 지정되지 않아서 곧 전역 객체를 가리킴
• 전역 객체에 name이란 속성은 존재하지 않으므로 undefined가 뜸

이러한 문제를 해결하는 방법으로 화살표 함수를 쓸수 있다.

const car = {
	name : "benz",
  	getName : function(){
      const innerFunc => (){
      	console.log("innerfunc", this);
      };
      innerFunc();
    }
};

car.getName();

JavaScript에서는 어떤 식별자(변수)를 찾을 때 현재 환경에서 그 변수가 없으면 바로 상위 환경을 검색합니다. 그렇게 점점 상위 환경으로 타고 타고 올라가다가 변수를 찾거나 가장 상위 환경에 도달하면 그만두게 되는 것이죠. 화살표 함수에서의 this 바인딩 방식도 이와 유사합니다. 화살표 함수에는 this라는 변수 자체가 존재하지 않기 때문에 그 상위 환경에서의 this를 참조하게 됩니다.
->화살표 함수에서의 this는 함수가 속해있는곳의 상위 this를 계승받는다.