[ES6] 화살표함수

=> 모양 사용.

 

기존 함수 표현 법

function 함수이름 (인자) {

    연산식

}

 

ex)

function add(first, second) {         // typeof add === 'function'

    return first + second;

}

 

자바스크립트는 함수형 언어로 익명함수라고 하는 함수의 이름을 포함하지 않는 함수 선언식 표현이 존재.

var add = funcntion(first, second) {         // typeof add = 'function'

    return first + second;

}

선언식 자체가 함수를 반환하게 되고, add라는 변수가 이 함수를 할당.

 

위 두 식은 이름을 함수 안에 포함하느냐, 반환이 된 값을 할당하느냐의 차이.

 

 

 

화살표 함수는 익명함수 방식을 따라 표현됨.

function 키워드를 생략하고 인자블록 ()과 본문블록 {} 사이에 =>를 표기

var add = (first, second) => {

    return first + second;

};

기존의 함수 표현식을 간결히 하고,

이후에 배우게 될 curring커링과 같은 디자인 패턴에서 사용되는 함수를 (반환할 때, '계단형 함수 선언' 같은 구조가 만들어지지 않고) 간결하게 해준다는 장점이 있음.

function addNumber(num) {            // 계단형 함수

    return function (value) {

        return num + value;

    }

}

를 간결하게 함

var addNumber = num => value => num + value;

화살표 함수는 함수안의 연산식{}을 특수한 선언식 없이 바로 반환하는 경우 {}와 return을 삭제할 수 있다.

 

 

 

this. 범위

함수형언어이기 때문에 함수가 절차적으로 실행이 되는 것이 아니라 인자로 함수를 전달하고 참조했던 함수가 실행이 되다보니 함수안에 선언된 변수가 존재하지 않아 발생하는 에러가 생김.

콜백함수의 this범위는 생기는 오류를 피하기 위해 bind() 함수를 사용하여 this객체를 전달.

function runAddThis2(func) {

    console.log(func(1, 2));

}

 

class Circle extends Shape {

    construtor(x, y, radius) {

        super(x, y);

       this.radius = radius;

       var addThis2 = function (first, second) {

           return this.value + first + second;   // 여기서 this.는 이 함수 안에서만 존재. 다른함수에서 이 함수를 불러서 사용할 때는            }.bind(this);                                       this.가 작동하지 않으므로 .bind라는 특수함수로 함수 안에서 참조되는 this.의 범위를

                                                                   정의해주어야 한다. 함수가 선언이된 시점에서의 this를 그대로 전달해달라는 의미.

    runAddThis2(addThis2);

    }

}

 

.bind 함수를 쓰지 않는 다른 방법

closer라고 하는 지역변수에 현재 참조하는 변수를 따로 저장.

var _this = this; 하고

return _this.value + first + second;로 바꾸면 _this의 지역변수가 var _this = this;를 참조하게 되고 함수를 전달할 때도 이 지역변수를 메모리에 담아서 실행하게 되기 때문에 _this가 this와 동일하므로 에러없이 작동.

이 과정을 화살표함수 =>를 쓰면 구현되어있기 때문에 지역변수를 따로 선언하지 않아도 this.가 선언이 된 시점의 this를 자동적으로 전달함.

var addThis2 = (first, second) => {

    return this.radius + first + second;

}

runAddThis2(addThis2);