JavaScript - 아직도 function 쓰니? (feat. Arrow function)

이번 주제는 Arrow function 입니다. 화살표 함수는

ES6 문법으로 자바스크립트에서 

간단하게 함수를 표현할 수 있어요. 

 

// generic function
var apple = function () { console.log("apple") }; // apple

// Arrow function
var apple = () => console.log("apple"); // apple

 

언뜻보면 function하나 없어진 거 아닌가? 싶지만 한번 Arrow 함수를 쓴 사람은

다시 function을 쓰는 때로 돌아가기 어려울 정도로 편리하고 좋습니다 

 

사용시에 몇가지 규칙이 있습니다. 자세히 알아봅시다.

---

1. 기본형

• 함수 표현식으로 사용 가능하다. → var 함수명 = function() { } 형태의 함수식
• function 대신에 =>을 넣는다. =>은 우측의 표현식을 평가하고, 평가 결과를 반환한다.   
• Arrow 함수는 항상 익명함수입니다.

나머지는 이하 동일합니다  

//befor ::
var add = function (x1, x2) {
    var sum = x1 + x2;
    return sum;
};

//after ::
var add = (x1, x2) => {
    var sum = x1 + x2;
    return sum;
};

 

2. 여러가지 유형

1) 본문이 한 줄인 경우

- return 지시자도 안써도 된다.

//before::
var now = function (time) {};
//after::
var now = (time) => {};

 

2) 매개변수가 하나인 경우

- 매개변수의 괄호를 생략할 수 있다.

//before::
var say = function(message) {};
//after::
var say = (message) => {};

 

3) 매개변수가 없을 경우

- ()괄호를 비워놓는다. 이때 괄호는 생략할 수 없다.

//before::
var say = function() {};
//after::
var say = () => {};

 

3. 바인딩 되지 않는 this

일반 함수에서 this 키워드는 함수를 호출 한 객체를 나타낸다. 이 this가 일반 함수와 Arrow 함수의 가장 큰 차이점이다.

 

3.1 일반 함수의 this

자바스크립에서는 this에 바인딩할 어떤 객체가 동적으로 결정된다. 즉, 함수를 호출할 때마다 어떻게 호출했는지에 따라 this에 바인딩할 객체가 달라진다. 

 

예를 들면 이런식으로 this는 얼마든지 바뀔 수 있다. 

  // 브라우저에서
  this == window // true

  // 함수에서
   function sun() {
     console.log("sun's this", this); //window
    }
    sun(); 

   // 메소드에서
    let person = {
       name: "John",
       say: function () {
       console.log(this.name); //person
       }
    }

 

 

3.2 Arrow 함수의 this

Arrow 함수에서는 함수를 선언할 때 this가 정적으로 결정된다. Arrow 함수에서 this는 언제나 상위 scope의 this를 가리킨다. 예제를 보자. 

 

     const apple = "풋사과";
        const fruit = {
            apple: "홍로",
            box() {
                console.log(this); // this === fruit

                const seed = () => {
                    console.log(apple); // 풋사과
                    console.log(this); // fruit
                    console.log(this.apple); // 홍로
                }
            }
        }

이렇게 fruit 객체 안에 선언된 seed 함수의 this는 fruit 객체를 가리킨다. 즉, Arrow 함수에서는 this가 정적으로 고정된다.