19. 화살표 함수 (Arrow Functions)

안녕하세요. 박기린입니다.

오늘은 저번 함수 설명글에 이어서 화살표 함수에 대해 알아보겠습니다. (JS의 함수에 대해 처음 접하시는 분이면, 이전 글을 꼭 보고 오시는 것을 추천드립니다.)

 

Arrow Functions

화살표 함수는 Function Expression의 special한 형태입니다.

 

화살표 함수는 세 가지 유형가 있습니다.

1. 한 줄 함수일 경우

const calcAge3 = birthYear => 2022 - birthYear;

'인자(parameter) => return할 expression'의 형태입니다.

이때는 '(),{}'와 같은 괄호들을 쓰지 않는 대신에 return 키워드를 쓰지 않습니다.

 

2. 여러 줄의 코드를 필요로 하는 경우

const yearsUntilRetirement = birthYear => {
    const age = 2037 - birthYear;
    const retirement = 65 - age;
    return retirement;
}

{중괄호}를 삽입하고 그 안에 return 키워드를 사용합니다.

 

 

 

3. 여러 개의 인자를 필요로 하는 경우

const yearsUntilRetirement2 = (birthYear, firstName) => {
    const age = 2037 - birthYear;
    const retirement = 65 - age;
    // return retirement;
    return `${firstName} retires in ${retirement} years`;
}
console.log(yearsUntilRetirement2(2000, 'joseph'));

인자를 적는 부분에 (괄호)를 넣고, 여러 개의 인자를 넣어줍니다.

 

 

const calcAge3 = (birthYear) => {
	return 2022 - birthYear;
};

물론, 하나의 인자와 한 줄의 코드여도 괄호를 넣을 수 있습니다.

편하신대로 사용하시면 되겠습니다.

 

---

 

 

 

화살표 함수가 존재하는 이유

화살표 함수는 보기 쉽게 만들려는 목적도 있지만, 기존의 함수보다 가볍게 작동하도록 설계하였습니다. 함수의 성능을 높이기 위해 변화한 부분으로 '생성자 기능, this 키워드, prototype property'를 제거하였습니다. 입니다. 화살표 함수 내부의 this 키워드를 제거함으로써 성능을 향상시켰습니다. 하지만 이러한 점 때문에 화살표 함수를 쓰지 말아야 하는 상황이 생깁니다.

---

 

 

 

 

 

화살표 함수를 사용하면 안 되는 경우

1. 생성자로 사용할 수 없습니다. 

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor

그냥 처음부터 에러를 띄웁니다.

 

생성자가 되지 못함에 이어서 prototype property를 사용할 수 없습니다.

const Foo = () => {};
console.log(Foo.prototype); // undefined

 

2. 객체의 메소드를 선언할 때는 적절하지 않습니다. 왜냐하면 this 키워드 사용에 문제가 발생하기 때문입니다.

함수의 성능 향상을 위해서 화살표 함수에서는 this 변수를 제거했습니다. 그래서 일반 함수와 this 키워드의 작동 매커니즘이 다릅니다.

 

일밤함수의 this

일반적인 함수의 this는 상황에 따라 다양하게 바인딩 됩니다.

1. 전역 공간에서 선언된 함수의 this : 전역 객체(window)

this === window; // true

function f1() {
  return this;
}
f1() === window; // true

 

2. 객체의 메소드로 선언된 함수의 this : 해당 메소드가 포함된 객체

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // 37

 

화살표 함수의 this

화살표 함수의 this는 일반적인 함수의 this와는 다르게 정적으로 결정됩니다. 항상 '상위 스코프의 this'를 가리킵니다.

일반함수에서 화살표함수로 변경후 this 키워드가 객체 o를 가리키는 것이 아니라 객체 o의 상위 스코프인 전역 객체(window)를 가리키고 있습니다. 결국 화살표함수로 선언된 메소드 f()는 window 객체에서 'prop'을 찾지 못한 채 undefined를 return 합니다.

 

이러한 작동원리를 지니기 때문에 객체의 메소드로는 화살표 함수를 사용할 수 없습니다.