[JavaScript] 화살표 함수 (Arrow Function)

화살표 함수

function 키워드 대신 화살표 ( => ) 를 사용하여 간략하게 함수를 정의.

콜백 함수 내부에서 this 가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하게 사용.

 

화살표 함수의 정의

const add = (x, y) => x + y;
add(2,3); // 6

매개변수가 한 개인 경우 소괄호 생략 가능.

const arrow = x => { console.log(x); };

함수 내부가 하나의 문으로 구성된다면 중괄호 생략 가능.

const power = x => x**2

 

화살표 함수와 일반 함수의 차이

화살표 함수는 함수 자체의 this 바인딩을 가지지 않음.

따라서, 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 참조 = lexical this 

 

화살표 함수의 this는 일반 함수의 this와 다르게 동작.

이는, [콜백 함수 내부의 this문제] 를 해결 하기 위해 의도적으로 설계됨.

 

콜백 함수 내부의 this 문제

class Calculator {
	constructor(number) {
    	this.number = number;
    }
    
    add(arr) {
    	return arr.map(function(item) {
        	return this.number + item;
        });
    }
}

const calculator = new Calculator(3);
console.log(calculator.add([4,5]));

위의 코드를 실행하였을 때 기대하는 결과는 12이다. 하지만 TypeError가 발생.

그 이유는,

add 내부에서 선언한 this는 add 메서드를 호출한 객체인 calculator를 가리키지만,

array.map 의 인수인 콜백 함수는 일반 함수로서 호출이되고, 일반 함수의 내부에서 선언한 this 는 전역 객체를 가리키게된다. 따라서 undefined 가 바인딩 되기 때문이다.

 

이를 해결하기 위해 화살표 함수를 사용한다.

class Calculator {
	constructor(number) {
    	this.number = number;
    }
    
    add(arr) {
    	return arr.map(item => this.number + item);
    }
}

const calculator = new Calculator(3);
console.log(calculator.add([4,5]));