Arrow function

 ES6(ECMAScript6) 문법 부터 JS 에서는 새로운 함수 생성 방식이 등장했습니다  =>(화살표) 표시를 사용하여 함수를 생성하는 방식인데 화살표의 이름을 따 이를 arrow function(한글로 화살표 함수) 이라고 부릅니다.

  화살표 함수는 기존의 function(param) 형식의 코드 형태를 축약했습니다. param => [함수 코드] 와 같은 방식으로 구현하게 되는데 이 함수는 파라미터의 경우에 따라 여러 방식의 함수를 작성 할 수 있으며, 무명/익명 함수라는 성질을 가지고 있기 때문에 화살표 함수를 즉시 적용하는 것이 아니라 호출을 하려면  Function 오브젝트를 할당할 변수를 만들고 이를 변수에 대입해 주어야 합니다 

  화살표 함수는 function 키워드 보다 간단하게 함수를 만들고 사용할 수 있습니다 하지만 모든 경우에 적용할 수 있는 것은 아닙니다.  arrow function의 형태와 일반 function과 다르게 사용되어야 할 부분은 아래에서 같이 확인 해보겠습니다.

Arrow Function 기초

/*기존 자바스크립트  function 사용방법*/

var es5 = function(a, b) {
    return a + b;
}

var sum = es5(1,2);
console.log(sum);

/* Es6 추가된 arrow function */
var es6 = (a,b) /*파라미터*/ => {
    return a + b;  /*함수 내용*/ 
}
var result = es6(1,2);
console.log(result);

 위 코드는 일반적은function 과 arrow function 으로 같은 내용의 코드를 작성한 코드 입니다. 두 내용은 동일 합니다.  두  함수의 차이는 형태만 차이가 있는 것이기 때문에 arrow function에서 고려할 내용에 대하서만 따로 정리하자면 

• 화살표 함수를 호출 하려면 위 예제의 es6와 같은 할당 변수를 작성한다
• function 키워드를 사용하지 않는다
• 소괄호 안에는 파라미터를 작성한다 (파라미터는 일반적인 자바스크립트의 타입 및 ket -value 형식도 가능)
• 화살표 앞 뒤로 공백은 영향을 주지 않는다 

Arrow Function 과 this

 포스트 처음에 arrow function과 일반 function이 다르게 사용되어야할 부분이 있다고 언급 했었습니다. 보통 함수 블럭 내에서 this를 사용할 경우 참조를 고려해야하 하는데 함수 블록 내에서 이 둘은 차이를 보이게 됩니다. 예제를 통해 알아보겠습니.

let Sports = function(){
    this.count =20;
}
Sports.prototype ={
    plus: function(){
        this.count += 1; 
    }, 
    get: function(){
        setTimeout(function(){
            console.log(this === window);
            console.log(this.plus);
        },1000)
    };
};

let newSports = new Sports();
new Sports.get();  /*정의가 되지 않음*/

이 예제에서는 프로토타입의 인스턴스 콜백 함수를 일반 함수로 작성했을 경우 입니다 아래 프로토 타입의 객체를 생성하고 get 함수를 호출 했을 때 개발자는 21이라는 결과를 받고 싶지만 해당 코드는 undifined를 반환 합니다. 그 이유를 살펴 보자면 get이라는 함수 내부에서 setTimeout 이라는 window 오브젝트의 함수를 사용했을 경우 this는 해당프로퍼티를 참조하는 것이 아니라 window 오브젝트를 참조하게 됩니다.

 하지만 콜백함수를 arrow function으로 작성한다면 어떻게 될까요?

let Sports = function() {
    this.count = 20;
}; 
Sports.prototype = {
    plus : function(){
        this.count +=1;
    }, 
    get : function(){
        setTimeout(()=> {
            this.plus();
            console.log(this.count);
        }, 1000);

    }
}; 

let newSports = new Sports();
newSports.get(); 

 이와같이 코드를 작성하였을 경우 1초뒤 생성자 함수에서 선언된 20의 값에 1을 더해 21을 반환하게 됩니다. 여기서 볼수 있는 차이는  arrrow function을 콜백함수로 지정하였을 경우는 해당 프로퍼티의 인스턴스를 참조하게 된다는 것입니다.

 arrow function 과 일반 function은 일반적으로 비슷하지만 이러한 참조 부분에서의 차이가 있습니다. 이런 참초 방식을 고려해서 개발에 임해야 올바르게 함수를 사용할 수 있습니다.