[JavaScript / ES6] 화살표 함수

화살표 함수는 ES6에 추가된, 함수를 정의할 수 있는 또 다른 방법이다.

function order(name, menu) {
    return `${name}님이 ${menu}를 주문하셨습니다.`)
}

console.log(order('manzoo', 'pizza'))

 

화살표 함수를 사용하면 간단하게 함수를 만들 수 있다.

function 키워드를 쓰지 않아도 되며, return도 생략 가능하다.

(아래와 같이 한 줄로 값을 반환할 때만 생략할 수 있다.)

const order = (name, menu) => `${name}님이 ${menu}를 주문하셨습니다.`

console.log(order('manzoo', 'pizza'))

 

 

파라미터가 없는 경우에는 빈 괄호를 표시하며, 하나일 때는 괄호를 생략할 수 있다.

const order = () => '주문이 들어왔습니다.'

const order = menu => `${menu} 주문이 들어왔습니다.`

 

 

this

화살표 함수는 this를 새로 바인딩하지 않는다. 외부 함수의 this를 상속받는다.

var gangwon = {
	resorts: ["용평", "평창", "강촌", "강릉", "홍천"],
	print: function(delay=1000) {
    								// this -> gangwon
    	setTimeout(function() {
        	console.log(this.resorts.join(","))		// this -> window
        }, delay)
    }
}

gangwon.print()	// Cannot read property 'join' of undefined 오류 발생

print 함수는 객체 내의 함수이므로, print 안에서 this를 쓰게 된다면 그것은 gangwon 객체를 가리킨다.

하지만 setTimeout() 함수는 객체내에서 정의된 함수가 아니므로 setTimeout() 함수 안의 this는 window를 가리킨다.

따라서 위 예제는 오류가 발생하게 된다.

 

var gangwon = {
	resorts: ["용평", "평창", "강촌", "강릉", "홍천"],
	print: function(delay=1000) {
    	setTimeout(() => {
        	console.log(this.resorts.join(","))		// this -> gangwon
        }, delay)
    }
}

gangwon.print()	// 용평, 평창, 강촌, 강릉, 홍천

하지만 화살표함수를 사용하게 되면, 외부 함수(print)의 this를 상속받게 되어 setTimeout() 함수 안의 this는 gangwon 객체를 가리키게 된다.