화살표 함수 사용하기

화살표 함수는 기존의 함수 선언 방식을 간단하게 바꾼 표현법이다. 이는 흔히 모던 자바스크립트라고도 불리는 es6에서 지원하는 문법으로, 그 간결성을 인정받아 현재는 함수형 프로그래밍을 할때 표준이 될 정도이다.

 

그렇다면 화살표 함수는 무엇이며, 기존 함수 방식과 비교해서 어떤면에서 더 뛰어날까? 다음은 기존의(es6 이전)의 함수 선언 방식이다.

function getName(firstName, lastName) {
    return firstName + lastName
}

이를 화살표 함수로 구현하면 다음과 같은 모습이 된다.

const getName = (firstName, lastName) => firstName + lastName;

바뀐 점을 알아보겠는가? 일단 함수를 선언하는데도 불구하고 function대신 const를 사용하고 있다. 그것뿐만이 아니다. return 또한 포함되어 있지 않는데 코드가 작동하고 있는 모습을 볼 수 있다.

 

화살표 함수의 장점은 코드를 간단하게 나타낼 수 있다는것이다. 만약 함수 스코프 내부의 코드가 한줄 이하라면 depth를 가지지 않고 함수를 선언할 수 있다.

 

이 외에도 this, super, constructor등을 사용할 수 없다는 차이점도 있지만, es6를 사용하는 개발 환경일 경우 대부분 함수형 프로그래밍을 사용하고 있기 때문에 굳이 언급하지 않겠다.

내부 메소드

이와 같이 한줄만으로 함수를 작성할 수 있다는 장점 때문에 자바스크립트의 내부 메소드와 함께 사용할때 더욱 유용하다. 다음의 예시를 보자.

... {
    return postList.map(post => post + "visited");
}

위와 같이 map 메소드를 호출할때 한줄의 코드만으로 구현하는것이 가능하다. 이 경우 가독성뿐만 아니라 코드의 절대적인 분량이 줄어들기 때문에 이해하기 쉬워진다.

... {
    return commentList.filter(comment => comment.description.length > 500);
}

위처럼 filter의 조건문으로 사용하는것도 가능하다. 만약 조건문이 좀더 복잡해진다면

... {
    return commentList.filter(comment = {
        if (comment.description.length > 500 && comment.visited) return comment;
    });
}

위처럼 표현할수도 있겠다.