화살표 함수(Arrow Function)

화살표 함수(Arrow Function)

특징 

• 간결해진 코드 작성
• 콜백 함수에서의 컨텍스트

 

 

 

1. 간결해진 코드 작성

• 익명 함수를 표현 할 때 간단하게 표현

 

예제)

// ES5
function Test(x) {
    return x * x;
};

var arr = [1, 2, 3];
var Test2 = arr.map(function (x) {
    return x * x;
});


// ES6+
const Test = (x) => x * x ;

const arr = [1, 2, 3];
const Test2 = arr.map(x => x * x);

 

 

 

2. 콜백 함수에서의 컨텍스트

• 콜백함수로 실행될 때 기존의 익명 함수는 글로벌 컨텍스트에 접근

• 화살표 함수의 경우 콜백 함수를 할당한 당시의 컨텍스트를 그대로 활용

• 객체지향 관점에서 콜백 함수를 정의할 때 유연하고 쉽게 컨텍스트를 활용

 

예제)

var name = "Global";

function Persion() {
    this.name = "Test";
    
    setTimeout(function() {
        console.log("ES5 : " + this);
        console.log("name :" + this.name);
    }, 100);
    
    setTimeout(() => {
        console.log("ES6 : " + this);
        console.log("name :" + this.name);
    }, 100);
}

var persion = new Persion();


-- 출력 결과 --
ES5 : [object Window]
name :Global
ES6 : [object Object]
name :Test

 

예제) 즉시 실행 함수(IIFE)

(function () {
    console.log("ES5 IIFE");
}());


(() => console.log("ES6 IIFE"))();


-- 출력 결과 --
ES5 IIFE
ES6 IIFE

• function 키워드를 이용할 때는 괄호를 어디에 묶어도 상관없었지만, 화살표 함수를 사용할 때는 먼저 괄호를 묶고, 함수를 호출

 

 

 

출처 

속깊은 JavaScript(양성익 지음)