Modern Javascipt (화살표 함수)

함수의 3가지 표현 방법

1. 함수 선언문
   function func1() {}

2. (익명) 함수 표현식
   const func2 = function() {};

3. 화살표 함수
   const func3 = () => {};

함수 선언문과 함수 표현식은 앞서 코어 자바스크립트책에서 정리한 적이 있으므로 화살표함수에 대해 알아보겠습니다.

화살표 함수의 특징

화살표 함수는 항상 익명이기 때문에 재사용하기 위해선 함수 표현식 방식으로 작성해야합니다.

하지만 재사용을 하지 않는 경우 함수 선언문방식 으로도 작성할 수 있습니다.

때문에 용도에 맞춰 두가지 방식의 사용법을 알아보겠습니다.


1. 화살표함수를 재사용할 경우
var/let/const 함수명 = (매개변수) => {실행문}

// 기본형
const func1 = (a, b) => { return console.log(a,b) };

// 매개변수가 1개인 경우 () 생략가능
const func2 = a => { return console.log(a) };

// 1개의 실행문만 갖는 경우 {} 생략가능
const func3 = (a, b) => console.log(a,b);

이 경우에는 함수명을 통해 화살표 함수를 불러와 재사용할 수 있습니다.

2. 화살표 함수를 재사용하지 않을경우

기본적으로 화살표 함수를 단독으로 함수 선언문방식으로 사용할 순 없습니다.

function (a,b) => { return console.log(a,b); };  // Uncaught SyntaxError: Function statements require a function name

오류 메세지에 나와있듯 function name이 필요하기 때문입니다.

하지만 재사용이 필요하지 않은 콜백함수에 사용할 경우 유용하게 사용할 수 있습니다.

const array = ['a', 'b', 'c'];

array.forEach((value) => console.log(value + value)); // aa bb cc

만약 화살표 함수를 사용하지 않고 함수 선언문으로 작성할 경우

const array = ['a', 'b', 'c'];

array.forEach(function (value) {
  console.log(value + value);
}); // aa bb cc

이처럼 코드의 가독성이 떨어지게됩니다. (간단한 예제라 별 차이가 없지만 긴 코드에서는 더 복잡해집니다.)

3. 화살표 함수 사용할 수 없는 경우

1. 객체의 메소드를 정의하는 경우(사용할 순 있지만 권장하지 않음)
   화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다. (아래 자세히 설명)

2. prototype에 메소드를 할당하는 경우
   화살표 함수는 prototype 속성이 없습니다.

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

3. 생성자 함수로 사용하는 경우
   화살표 함수는 생성자로서 사용될 수 없으며 new와 함께 사용하면 오류가 발생합니다.

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

==> 화살표 함수를 사용할때 자주 하는 실수를 잘 정리한 블로그

화살표 함수의 this

일반 함수나 메서드는 자신이 호출될때 생성된 실행 컨텍스트에 this binding 정보를 생성합니다.

하지만 화살표 함수는 호출될때 this binding을 하지 않습니다. 쉽게말하면 누가 자기를 호출한지 알지 못합니다.

때문에 화살표함수는 자체적으로 호출되는 시점과 무관하게 화살표 함수가 선언되어 있는 실행 콘텍스트가 참조하는 thisBinding 정보를 참조합니다.

즉, 항상 자신의 상위 스코프의 this를 가리키는 것입니다.

예제를 통해 살펴보겠습니다.

// 일반 함수로 작성한 메서드
var name = 'yun';
var info = {
    name : 'kim',
    getName : function(){
        console.log(this.name);
    },
};
info.getName();     // 'kim'
// .을 기준으로 getName의 상위 스코프인 info를 this로 바인딩하여 'kim'이 출력된다.

var name2 = 'yun';
var info2 = {
    name2 : 'kim',
    getName: () => console.log(this.name),
};
info2.getName();     // 'yun'
// this가 정적으로 바인딩되어 info의 상위 스코프인 window를 가리키고 'yun'이 출력된다.

메서드로 화살표함수를 사용한 두번째 예제는 화살표함수가 선언되어 있는 실행 컨텍스트 ==> 즉, info2의 실행 컨텍스트의 this를 가리킵니다.

때문에 info2의 상위 스코프인 window를 this가 가리키고 window.name인 'yun'이 호출됩니다.