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

Fat arrow => 를 사용해서 정의하는 함수

 

 

화살표 함수는 ES6에서 추가된 간단한 형태로 함수를 정의하는 방식이다. 기존에 함수를 정의하려면 function 키워드를 사용했어야 했지만, 화살표 함수를 사용하면 function 키워드 없이 간략하게 함수를 정의할 수 있다. 또한, 화살표 함수는 콜백 함수 안에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대용으로 사용할 수도 있다.

 

 

 

 

 

화살표 함수 정의하기

화살표 함수를 정의할 땐 함수 표현식을 써주어야 한다. 함수 선언으로는 불가능하다.

 

const addNums = (x, y) => x + y;

 

 

1. 매개변수

매개변수가 1개일 경우엔 소괄호 ( ) 를 생략할 수 있으나, 2개 이상인 경우엔 소괄호 ( )를 꼭 써주어야 한다. 매개변수가 없는 경우에도 소괄호 ( )를 꼭 써주어야 한다.

 

// 매개변수가 한 개(x)일땐 소괄호를 생략할 수 있다.
const showYourself = x => { return x }

// 매개변수가 두 개(a와 b)일 경우엔 소괄호 ()를 써주어야 한다.
const multiply = (a, b) => a * b

// 매개변수가 없을 때도 소괄호 ( )를 꼭 써주어야 한다.
cost noPara = () => { return 'Hello from the other side' }

 

 

2. 함수 몸체

 

만약 함수 몸체에 하나의 문밖에 없다면, 함수 몸체를 감싸는 중괄호 { }를 쓰지 않아도 된다. 다만, 중괄호를 생략하는 건 함수 몸체 내부의 문이 표현식일 경우에만 가능하다. 표현식이 아닌 문은 리턴이 불가능하기 때문이다. 그래서, 아무리 함수 몸체의 문이 하나밖에 없다고 해서 모든 경우에 중괄호 {}를 생략하면 에러가 날 수 있다. (그러니까 왠만하면 써주자!!)

 

// 함수 몸체의 중괄호 {}가 생략되어 x * y가 날것 그대로 쓰여있다.
const multiply = (x, y) => x * y;

// 위 함수는 아래 함수와 동일하다.
const multiply = (x, y) => { return x * y }

 

// 아래와 같이 몸체에 중괄호{}를 생략하면 에러가 난다.
const notPossible = (a, b) => const c = a + b

 

그리고 만약에, 화살표 함수의 몸체에서 리턴하는 게 객체일 경우엔 소괄호 ()를 겉에 한번 더 씌어주어야 한다. 객체는 기본이 중괄호 {key: value}로 감싸여져 있기 때문에, 추가로 소괄호()로 감싸지 않으면 함수가 제대로 인식되지 않기 때문이다.

 

// 리턴되는 객체 {key: value}에 소괄호() 옷을 한번 더 입혔다
const returnObj = (key, value) => ({ key: value })

// return을 썼을 경우
const returnObj = (key, value) => { return { key: value }; }

 

 

 

화살표 함수가 유용할 때: 콜백 함수로 정의할 때

화살표 함수는 콜백 함수로 사용될 때 유용하다. 훨씬 짧아지기 때문에 가독성이 올라가기 때문이다.

 

let list = ['Harry','Ron'];

// 콜백 함수가 화살표 함수로 표현되었을 경우
list.forEach( friend => console.log('wingardium leviosa') )


// 아닐 경우
list.forEach( function(friend) {
console.log('Windgardium leviosa') } )

 

 

화살표 함수가 유용할 때: 콜백 함수 내부 this 문제 해결을 원할 때

this는 자기가 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing varaible)이다. 객체의 메소드가 자신이 속한 객체의 상태(state), 즉 프로퍼티(property)를 참조하고자 할 때 this를 사용할 수 있다.

 

const bunny = {
	name: 'Tosoon',
	ears: 'long',
    appearance: 'Cute',
    color: 'White',
    eatCarrots() {
    	return `${this.appearance} ${this.name} eats carrots.`;
    }
};

console.log(bunny.eatCarrots()); // 'Cute Tosoon eats carrots.'

 

그런데, 유의해야할 점이 있다. 바로 자바스크립트의 this는 함수가 호출되는 방식에 따라서 this가 가리키는 대상이 달라진다는 것이다. 즉, this에 바인딩되는 값은 함수의 호출 방식에 따라서 동적으로 결정된다. 전역에서 불러진 this는 window를, 일반 함수 내부에서 불러진 this 또한 마찬가지로 전역 객체 window를, 메소드 내부에서 불러진 this는 메소드를 호출한 객체를, 그리고 생성자 함수 내부에서 불러진 this는 생성자 함수가 만들 인스턴스를 가리킨다. 또한, strict mode가 적용된 상태에서 일반 함수 내부에서 불러진 this는 undefined가 나온다.

 

이때 조심해야할 것이 '일반 함수로 호출되는 콜백 함수'일 경우이다. 예를들어, 고차함수 map이 콜백 함수를 부를 땐 '일반 함수'로 호출을 하게 된다. 위에 언급한 바에 따르면, '일반 함수'로 호출이 되었을 경우엔 this가 '전역 객체 window'를 가리키게 된다. 그런데 문제는, 클래스 내부의 모든 코드에는 strict mode가 적용된다는 것이다. 그렇기 때문에 map이 호출하는 콜백 함수 내부의 this는 undefined가 되버린다.

 

화살표 함수를 사용하면 이와 같은 문제를 해결할 수 있다. 화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문이다. 즉, 화살표 함수 내부의 this는 상위 스코프의 this를 그대로 가져온다는 특징이 있다. (= lexical this)