[ECMASciprt6+ Features] 5. Arrow Functions

Arrow Functions

 

함수는 간결해지고 코드는 짧아졌다.

 

ES5 문법 this 예제1

let function_ES5 = function(param){ 
    return param; 
} 
let function_ES6 = (param) => { 
    return param; 
}

 

ES6 문법 this 예제2

function NumberEx2() {
    this.num = 0;
    
    setInterval(() => {
        this.num++; // this is from NumberEx
        console.log(this.num);
    }, 500)
}

 

ES5 문법 this 예제3

function NumberEx3() {
    this.num = 0;
    console.log("NumberEx3() this : " + this.num);
    console.log("-------------------------------------");
    
    setInterval(function add() {
        this.num = 1;
        console.log("function add()의 this : " + this.num);
        console.log("-------------------------------------");
        if(this.num == 1){
            process.exit();
        }
    }, 1000);
}
NumberEx3();

 

결과 출력

NumberEx3() this : 0
-------------------------------------
function add()의 this : 1
-------------------------------------

 

Arrow Function 은 자신만의 this를 생성하지 않는다. 화살표 함수는 자신의 this가 바인드 되지 않기 때문에 함수의 스코프에서의 this가 적용된다.