화살표 함수와 this

화살표 함수는 ES6에서 함수를 표현하는 새로운 방식이다.
기존 함수와 용도가 조금 다르다.
함수를 파라미터로 전달할 때 유용하다.

setTimeout(function(){
	console.log('hi');
},1000)

setTimeout(() => {
	console.log('hi');
},1000)

기존 함수와 화살표 함수의 가리키는 this가 다르다. [[this 바인딩]]

function BlackDog(){
	this.name = '흰둥이';
	return {
	name : '검둥이',
	bark: function() {
		console.log(this.name + ': 멍멍');
		}
	}
}

const blackDog = new BlackDog();
blackDog.bark(); // 검둥이 멍멍

function WhiteDog(){
	this.name = '흰둥이';
	return {
	name : '검둥이',
	bark: () => {
		console.log(this.name + ': 멍멍');
		}
	}
}

const whiteDog = new WhiteDog();
WhiteDog.bark(); // 흰둥이 멍멍

일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표함수는 자신이 종속된 인스턴스를 가리킨다.

화살표함수는 값을 연산하여 바로 반환해야 할때 사용하면 가독성을 높일 수 있다.

화살표 함수의 주요 동작 원칙 중 하나는 "자신만의 (별도로 바인딩된) this가 없다"이다.
대신 상위 스코프의 this 값을 가져온다(lexical scoping).
따라서 콜백함수 안에서 외부 스코프의 this 값을 사용할 수 있게 된다.