[JavaScript] 화살표 함수

　ES6에서 화살표 함수(arrow function)가 도입됐습니다. 화살표 함수는 함수를 표현하는 새로운 방식입니다. 함수를 파라미터로 전달할 때(콜백 함수) 유용합니다.

기존 함수 선언 방식도 여전히 사용되는데요. 사용 용도가 다릅니다. 기존 함수 선언 방식과 화살표 함수를 사용한 함수 선언 방식의 차이를 알아볼까요?

---

화살표 함수

기존 함수 선언 방식은 아래 코드와 같습니다.

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

위 코드에 화살표 함수를 적용하면 아래와 같습니다. function이 사라지고 그 자리에 =>가 들어갔습니다.

setTimeout(() => {
	console.log('hello world');
}, 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();	// 흰둥이: 멍멍!

일반 함수(function())을 사용했을 때는 검둥이가 나타납니다.
화살표 함수(() =>)를 사용했을 때는 흰둥이가 나타납니다.

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

---

💁‍♂️reference

리액트를 다루는 기술

김민준 지음ㅣ길벗ㅣ2019ㅣ도서 정보

EOD.