[JavaScript] 화살표 함수 (Arrow Function)

화살표 함수는 ES6부터 사용되는 문법입니다. function을 사용하여 함수를 만드는 것보다 간단하게 함수를 작성할 수 있는 장점이 있습니다. 오늘은 화살표 함수에 대해 알아보겠습니다. \'_'/

 

1. 화살표 함수

먼저, 기존의 함수와 화살표 함수의 작성 방법에 대해 보겠습니다.

var a = function() {
	// 내용
};

var a = () => {
	//내용
};

 

화살표 함수 특징

화살표 함수는 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명 함수 입니다. 화살표 함수는 메소드 함수가 아닌 곳에 적합하기 때문에 생성자로는 사용할 수 없습니다. - MDN

 

2. 화살표 함수의 기본 문법

// 매개 변수가 없는 화살표 함수
var foo = () => {
    console.log("test");
};

// 매개 변수가 있는 화살표 함수
var foo = (a, b) => {
    return a + b;
};
foo(1, 2) // 3

// return이 없는 경우
var foo = (a, b) => {
    a + b;
};
foo(1, 2) // undefined

// 콜백 함수
var nums = [1, 2, 3, 4, 5];
var makeArr = nums.map( x => x + 1);

console.log(makeArr); // [2, 3, 4, 5, 6]

 

3. 화살표 함수 this

함수를 호출하는 방법에 의해 결정되었던 일반 함수의 this와 달리 화살표 함수의 this는 선언되는 시점에 결정되며, 상위 스코프의 this를 가리킵니다. 코드를 통해 보겠습니다.

var name = 'Park';

var test1 = {
    name: 'Kim',
    printName: function() {
        console.log(this.name);
    }
};

test1.printName(); // 'Kim'

var test2 = {
    name: 'Lee',
    printName: () => {
        console.log(this.name);
    }
};

test2.printName(); // 'Park'

왜 이런 결과가 나왔을까요? 위에서 말했듯이 화살표 함수의 this는 상위 스코프의 this를 가리켜 window를 가리키고 있습니다. 따라서 전역 변수 name을 가리키고 Park이라는 값을 보여주게 됩니다.