[JS] 함수 (Closure, Arrow Function)

Arrow Function

JS에서 ES6가 도입되면서 다양한 문법들이 생겼는데 그 중 이 화살표 함수가 가장 잘 쓰이고 있을 것이다. 타 언어에서의 람다식과 형태가 유사하다.

function foo(x){
    return x;
}	//일반

const bar = (x) => {
    return x;
}	//Arrow

선언은 일반 변수 선언하듯이 해주며, ()안에 Argument를, {}안에 로직과 리턴값을 넣어주는 것은 같으며 =>로 이어준다.

 

Closure Function

클로저 함수는 함수의 리턴값이 함수인 형태를 뜻한다.

const getDiscount = function(rate){
    return (function(price){
      return price * rate;
    });
  }

console.log(getDiscount(0.5)(1000));    //500

다음 코드를 보면 getDiscount(rate)(price)의 형태로 함수를 호출하고 있다.

이것을 해석해보면 getDiscount(0.5)까지만 하면 Price를 인자로 받아 0.5배를 해주는 함수가 반환된다. 이를 A라고 하면

결국 식은 A(1000)이 되어 500이 리턴되게 된다. 이를 이용하여 합성함수와 같은 형태를 설계할 수 있다.

const getDiscount2 = rate => price => rate * price;

const getDiscount3 = (rate) => {
    return (price) => {
        return rate * price;
    };
};

이 두 함수는 getDiscount()와 같은 함수이다.

 

Function vs Arrow Function

그렇다면 일반 함수와 화살표 함수의 차이점은 없는 것일까? 화살표 함수는 분명 좋은 문법이지만 항상 일반 함수를 대체할 수는 없다.

가장 큰 차이는 바라보는 this와 arguments 스코프가 다르다는 점이다.

 

Arrow function은 기존 함수의 this의 범위와 달리 본인의 컨텍스트가 아닌 Global 객체의 this를 사용한다.

function test1(arg) {
    //this.str = 'global'인 상태
    console.log('global this`:', this.str); //global
    return {
      str: 'inside',
      out: function(){
          console.log('inside this`:', this.str)    //일반 함수 : inside
        }
    };
  }
  
  //call(this, [arg1, arg2..]) : this값 및 전달된 인수와 함께 함수 호출
  test1.call({str : 'global'}, 'foo').out(); //this를 전달. 오버라이딩

  function test2(arg) {
    //this.str = 'global'인 상태
    console.log('global this`:', this.str); //global
    return {
      str: 'inside',
      out: () => console.log('inside this`:', this.str),  //Arrow function : global
    };
  }
  test2.call({str : 'global'}, 'bar').out();

  //call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다.

call() 메소드는 this 객체와 함께 Argument를 넘겨주어 함수를 호출한다. 위 기능은 test1()과 test2() 안의 closure 함수인 out()을 호출하는 것이다.

• test1()은 일반 Function을 Closure 함수로 호출하고 있다. 이 Closure 함수는 this를 본인의 컨텍스트의 this로 인식하여 str은 inside가 된다.
• test2()는 화살표 함수를 Closure 함수로 호출하고 있다. 이 Closure 함수는 this를 글로벌 객체의 this로 인식하여 str은 global이 된다.

 

언제 Arrow Function을 사용해야 하는가

• 일반 함수를 화살표 함수로 바꾸어 사용해도 무방하지만 특수한 조건을 고려해야 함
• Callback 함수 : 코딩 스타일에 따라 다르겠지만 콜백함수는 주로 화살표 함수를 많이 사용하는 편
• this나 arguments를 사용하는 경우 일반 함수와 결과 자체가 달라질 수 있음
• 프로토타입 객체 안에 선언된 함수들은 보통 this를 많이 이용하므로 일반 함수 사용