화살표 함수(Arrow function)

익명 함수처럼 함수(Function)를 정의할 때 사용한다.
화살표함수로 선언하면 메서드(Method) 바인딩(binding)을 생략할 수 있다.
값을 바로 반환하고 싶다면 코드 블록 {}를 생략하면 된다.
this가 필요한 경우에는 function를 사용하고 this가 필요 없는 경우에는 전부 화살표 함수로 함수(Function)를 선언한다고 생각하면 편하다.
주로 콜백 함수(Callback Function)를 정의 할때 사용한다.

콜백 함수(Callback Function)로 사용되는 경우

비동기(asynchronous) 함수인 setTimeout()에도 콜백 함수(Callback Function) 형태로 화살표 함수가 들어간다.

JSX

JSX

function 키워드(Keyword)로 대체할 수 없는 경우

function 키워드(Keyword)를 대체할 수 없는 것은 용도가 다르기 때문이다.
무엇보다 서로 가리키고 있는 this 값이 다르다.

JSX

위의 코드에서 function을 사용했을 때는 검둥이가 나타나고, 화살표 함수를 사용했을 때는 흰둥이가 나타난다.
또한 addEventListener()를 예시로 this의 차이를 설명할 수 있다.

JavaScript

위의 경우 addEventListener()가 콜백 함수(Callback Function)를 호출할 때 this를 이벤트 대상(이벤트(event) target)인 button 객체(Object)로 바인딩(binding)한다.
그러나 아래의 화살표 함수로 선언한 경우 this가 함수가 정의된 위치의 외부 this (렉시컬 환경(Lexical Environment)상의 this)를 가리키므로 button 객체(Object)가 아니다.
브라우저 전역에서 정의했다면 this는 window를 가리키고, strict mode 또는 ES module 환경에서는 undefined가 되어 this.textContent 접근 시 에러가 발생한다.

JavaScript

따라서 위의 코드를 화살표 함수(Arrow function)로 버튼 객체(Object)를 동작하게 하기 위해서는 이벤트(event) 객체(Object)를 받아 e.target.textContent로 접근할 수 있다.

JavaScript

일반 함수(Function)는 호출되는 방식에 따라 this가 동적으로 결정된다(메서드 호출 시 메서드를 소유한 객체(Object), 생성자 호출 시 새로 만들어진 인스턴스(Instance), 일반 호출 시 window/undefined).
반면 화살표 함수는 자신만의 this를 가지지 않고, 함수가 **정의될 때의 외부 렉시컬 환경(Lexical Environment)**의 this를 그대로 사용한다(이를 lexical this라고 한다).

화살표 함수에서 값 바로 반환하기

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

JSX

따로 {}를 열어 주지 않으면, 연산한 값을 그대로 반환한다는 의미이다.
() 소괄호는 바로 리턴을 한다는 의미이다.
객체(Object)를 바로 리턴하는 경우에는 소괄호가 필수적이다.

JavaScript

function 키워드(Keyword)로 대체할 수 없는 경우

function 키워드(Keyword)를 대체할 수 없는 것은 용도가 다르기 때문이다.

무엇보다 서로 가리키고 있는 this 값이 다르다.

JSX

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을 사용했을 때는 검둥이가 나타나고, 화살표 함수를 사용했을 때는 흰둥이가 나타난다.

또한 addEventListener()를 예시로 this의 차이를 설명할 수 있다.

JavaScript

button.addEventListener('click', function() {
	console.log(this.textContent); // 정상 작동
});

위의 경우 addEventListener()가 콜백 함수(Callback Function)를 호출할 때 this를 이벤트 대상(이벤트(event) target)인 button 객체(Object)로 바인딩(binding)한다.

그러나 아래의 화살표 함수로 선언한 경우 this가 함수가 정의된 위치의 외부 this (렉시컬 환경(Lexical Environment)상의 this)를 가리키므로 button 객체(Object)가 아니다.

브라우저 전역에서 정의했다면 this는 window를 가리키고, strict mode 또는 ES module 환경에서는 undefined가 되어 this.textContent 접근 시 에러가 발생한다.

JavaScript

button.addEventListener('click', () => {
	console.log(this.textContent); // 의도와 다르게 동작 / 에러
});

JavaScript

button.addEventListener('click', (e) => {
	console.log(e.target.textContent); // 정상 작동
});

일반 함수(Function)는 호출되는 방식에 따라 this가 동적으로 결정된다(메서드 호출 시 메서드를 소유한 객체(Object), 생성자 호출 시 새로 만들어진 인스턴스(Instance), 일반 호출 시 window/undefined).

반면 화살표 함수는 자신만의 this를 가지지 않고, 함수가 **정의될 때의 외부 렉시컬 환경(Lexical Environment)**의 this를 그대로 사용한다(이를 lexical this라고 한다).

화살표 함수에서 값 바로 반환하기

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

JSX

function twice(value) {
	return value * 2;
}

const triple = (value) => (value * 3) // () 생략 안한 코드

const triple = (value) => value * 3; // () 생략 한 코드

따로 {}를 열어 주지 않으면, 연산한 값을 그대로 반환한다는 의미이다.

() 소괄호는 바로 리턴을 한다는 의미이다.

객체(Object)를 바로 리턴하는 경우에는 소괄호가 필수적이다.

JavaScript

const obj = (x, y) => ({ x, y }) // 객체 리턴

콜백 함수(Callback Function)로 사용되는 경우

function 키워드(Keyword)로 대체할 수 없는 경우

화살표 함수에서 값 바로 반환하기

Synapse Map Insight

화살표 함수(Arrow function)

콜백 함수(Callback Function)로 사용되는 경우

function 키워드(Keyword)로 대체할 수 없는 경우

화살표 함수에서 값 바로 반환하기

Synapse Map Insight