[ES6 JavaScript] arrow 함수

Pixabay로부터 입수된 Gerd Altmann님의 이미지 입니다.

 

 일반적으로 ES5에서 함수를 표현할 때는 function 키워드를 사용합니다. ES6에서는 함수를 짧게 표현할 수 있는 방법을 제공합니다. 그것이 바로 화살표 함수입니다. 화살표 함수를 어떻게 표현하는지 알아보겠습니다.

// ES5 function
let getDouble = function(num) {
	return num * 2;
}

// ES6 화살표 함수
let getDouble = (num) => {
	return num * 2;
}

getDouble(2);	// 4

 가장 기본적인 함수 표현입니다.  숫자 num을 입력받아 두 배로 곱한 값을 반환해주는 함수 입니다. 기존 function에서 화살표 함수로 바꾸려면 function 키워드를 제거하고 소괄호와 중괄호 사이에 => 키워드를 사용하면 화살표 함수 표현식으로 바꿀 수 있습니다. 그런데 여기서 좀 더 축약을 할 수 있습니다.

// ES5 function
let getDouble = function(num) {
	return num * 2;
}

// ES6 화살표 함수
let getDouble = num => {
	return num * 2;
}


getDouble(2);	// 4

만약 파라매터가 한 개라면 소괄호도 생략 가능합니다. 그런데 더 축약을 할 수 있습니다.

 

// ES5 function
let getDouble = function(num) {
	return num * 2;
}

// ES6 화살표 함수
let getDouble = num => num * 2;


getDouble(2);	// 4

 결국은 한 줄이 되었습니다. 실행 문장(위 예제에서는 num * 2)이 바로 return이 된다면 중괄호와 return 을 삭제해도 동일한 결과를 얻을 수 있습니다. 그래서 화살표 함수는 Array 메서드들과 함께 사용할 때, 참 편하게 사용할 수 있습니다.

let array = [1, 2, 3, 4, 5];

// ES5
array.map(function(v) {
	return v*2;	// [2, 4, 6, 8, 10]
});

// ES6
array.map(v => v*2);	// [2, 4, 6, 8, 10]

위 예제는 map 메서드를 이용하여 새로운 배열을 반환하는 샘플입니다. 위와 같이 화살표 함수로는 한 줄로 간단하게 표현할 수 있습니다.

 

그렇다고 완벽하게 function 함수와 동일하진 않습니다. this에 주의해서 사용해야합니다. 아래 예제를 보겠습니다.

var name = 'bob';
let object = {
    name: 'jay',
    es5Function: function() {
        console.log(this.name);
    },
    es6Arrow: () => {
        console.log(this.name)
    }
};

object.es5Function();	// jay
object.es6Arrow();	// bob

기존 function은 this.name을 자신이 속한 object의 name을 참조하여 출력합니다. 그런데, 화살표 함수에서의 this.name은 object의 부모의 name을 참조하고 있습니다. 이 부분을 유의해서 개발하시길 바랍니다.