[ES6] 화살표 함수(Arrow functions)

화살표 함수(Arrow functions)

화살표 함수는 기존의 function 표현 방식에 비해 간결하게 표현 할 수 있는 방법이다. => 연산자를 사용하고, 익명함수에만 사용할 수 있기 때문에 메서드 형식으로 쓸 수는 없다. 

* 익명함수: function(){ .... }

var getName = function(){

console.log('Harvey');

};

getName(); // "Harvey"

위와 같은 ES5의 익명함수 표현식이 있는데

var getName = () => { 

console.log('Harvey'); 

};

getName(); // "Harvey"

이처럼 바꿀 수 있다. 

var getName = () => console.log('Harvey');

getName(); // "Harvey"

함수 내의 처리문이 하나인 경우 중괄호도 생략할수 있다.

매개변수

함수는 매개변수(parameter)를 전달받아 일정한 처리 후 값을 리턴하는 등의 일을 할 수 있는데, 이또한 더 간결하게 표현이 된다.

var addNum = function(a, b){

return a+b;

}

console.log(addNum(2, 5)); // 7

이것을 Arrow functions로 바꾸면..

var addNum = (a, b) => {

return a+b;

}

console.log(addNum(2,5)); // 7

이처럼 된다. 

var addNum = (a, b) => a + b;

console.log(addNum(2,5)); // 7

처리문이 하나인 경우에는 중괄호 없이 더 간결하게 표현가능한데, 중괄호 없이 변수에 화살표 키워드를 직접 연결하면 변수값이 바로 리턴 된다.

콜백함수

JS에서는 콜백함수(함수에서 매개변수로서 전달되는 함수)를 매우 자주 사용하는데, 이와 같이 쓸 수 있다.

document.addEventListener('click', () => {

. . . . . . . . .

});

여담

codewars 나 progammers 같은 알고리즘 문제 공부 사이트에서 문제를 풀다보면, 내가 푼 문제의 다른 사람의 풀이를 볼 수 있는데, 추천수를 가장 많이 받은 풀이를 보면 화살표 함수를 써서 한두줄로 시크하게(?) 풀어놓은 사람들이 있다. 그게 멋져보여서 공부한 것도 있다 ㅋㅋㅋ