[Javascript] Arrow function (화살표 함수)

화살표 함수는 함수표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이다.

//함수표현식
let func = (arg1, arg2, ... argN) {
	return expression;
}

//화살표함수
let func = (arg1, arg2, ... argN) => expression

 

기존의 함수 표현식에서 function 키워드를 삭제하고, 인자를 받는 매개변수의 괄호와 코드블록 사이에 화살표만 넣어주면 화살표 함수이다.

 

그리고 함수 내부의 내용이 반환값(return)만 있다면 코드블록인 중괄호와 return을 생략할 수 있다.

 

또한 인자가 하나만 있다면 매개변수의 괄호도 생략 가능하고, 만약 인자가 없다면 생략이 불가능 하다.

 

그리고 return을 생략할 수 있는 조건에서 만약 return의 내용이 객체인경우, 객체리터럴을 표현하려고 써놓은 중괄호가 코드블록의 중괄호로 인식 되므로 return을 생략하며 객체를 리턴해야 하는 경우엔 소괄호를 먼저 씌운다.

let step1 = (x) => {
    return {
        x : x
    }
};

let step2 = (x) => ({
    x : x
});

let step3 = x => ({
    x : x
});

let step4 = x => ({ x });

 

this

일반 함수와 화살표함수의 가장 큰 차이점은 this이다.

 

일반함수의 this

자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩 할 어떤 객체가 동적으로 결정된다. 즉 함수를 선언할 때 this에 바인딩 할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩 할 객체가 동적으로 결정된다.

*콜백 함수 내부의 this는 전역 객체 window를 가리킨다.

 

화살표함수의 this

화살표 함수는 함수를 선언할 때 this에 바인딩 할 객체가 정적으로 결정된다. 동적으로 결정되는 일반 함수와 달리 화살표 함수의 this는 언제나 상위 스코프의 this를 가리킨다. 이를 Lexical this 라고 한다.

 

화살표함수를 사용해서는 안되는 경우

1. 메소드

화살표 함수로 메소드를 정의하는것은 피해야 한다.

const person = {
	name : "민수",
    call : ()=>console.log(`안녕하세요 ${this.name} 있나요?`)
};
person.call(); //안녕하세요 undefined 있나요?

위처럼 this는 전역객체 window를 가리키므로 메소드를 정의하는 것은 바람직하지 못하다.

 

2. prototype

화살표 함수로 정의된 메소드를 프로토타입에 할당하는 경우에도 동일한 문제가 발생한다.

 

3. 생성자함수

화살표 함수는 생성자 함수로 사용할 수 없다.

생성자 함수는 prototype 프로퍼티를 가지며 prototype 프로퍼티가 가리키는 프로토타입 객체의 constructor를 사용한다.

하지만 화살표함수는 prototype 프로퍼티가 없으므로 이를 사용할 수 없다.