Arrow Function

ES6에서 추가된 함수 표현식으로 주로 실행을 위한 함수로 사용.

ex)

// 기존 함수
function add(a) {
  var b = 5;
  if (a && typeof(a) === 'number')
    return a+b;
  else
    return undefined;
}

// arrow fucntion
const add = (a) => {
  var b = 5;
  if (a && typeof(a) === 'number')
    return a+b;
  else
    return undefined;
}

차이점

일반 함수는 this객체를 동적 바인딩을 통해 얻는다.
화살표 함수는 this객체를 정적 바인딩을 통해 얻는다.

• 일반 함수의 this 바인딩

  함수 -> 전역(window) 객체
  메소드 -> 메소드 소유 객체
  생성자 -> 새롭게 만든 객체

• 화살표 함수 this 바인딩
  함수가 선언될 때 상위 객체
  

ex)

// this === window 이므로 ERROR발생
const obj = {
	a() {
		setTimeout(function() {
			this.b(); 
		}, 200);
	},
	
	b() {
		console.log("HI");
	}
} 

// this === obj ( 외부에서 바인딩 해줌 )
const obj = {
	a() {
		setTimeout(function() {
			this.b(); 
		}.bind(this), 200); // 이곳에서 a에 obj(this)를 바인딩 해줌
	},
	
	b() {
		console.log("HI");
	}
} 

// use Arrow function
// this === obj
const obj = {
	a() {
		setTimeout(() => {
			this.b();
		}, 200);
	},
	
	b() {
		console.log("HI");
	}
}