이 글은 Jan Guardian의 Clean JavaScript 강의를 보고 요약하였다.
오늘은 화살표 함수(Arrow Function)에 대해 정리해보았다.
1.일반함수와 간결성에 차이가 없다면 쓸 필요가 없다
아래는 일반함수를 화살표 함수로 변경한 코드이다.
//일반 함수
function isAdmin(user){
return user.role === 'admin';
}
//화살표 함수
const isAdmin = (user) => {
return user.role === 'admin';
}
화살표 함수는 function 대신에 화살표( =>) 키워드를 이용하기 때문에 화살표 함수(Arrow Function)라고 불린다. 화살표 함수 쓴 것까지는 좋다.
하지만 위의 코드에서는 코드가 전혀 줄어들지 않았다. 개발자들이 기껏 화살표 함수를 사용하고 블록 부분을 바꾸지 않는 실수를 저지르는데 이렇게 되면 일반함수를 쓰나 가독성에 차이가 없다. 위의 함수처럼 리턴값이 하나만 있는 경우 함수 전체를 한 라인으로 바꾸는 습관을 기르자
const isAdmin = (user) => user.role === 'admin'; // true or false
중괄호{ } 를 없애고 return 문을 삭제해도 화살표 함수를 사용하면 결과값이 isAdmin에 반환된다. 드디어 코드가 간결해졌다.
2. 익명함수를 대신하는 화살표함수
위의 한 라인으로 되는 과정은 array 함수를 사용할 때 유용하다. 특히 forEach 함수를 쓸 때 익명함수 대신에 화살표함수를 쓰면 코드의 간결성이 더 높아진다.
const groceries = ['banana','apple','blueberry'];
//forEach함수 사용하여 각 배열의 요소 한번씩 출력
// 함수를 한번만 사용하기 때문에 익명함수를 씀
groceries.forEach(function(item){
console.log(item);
});
forEach함수의 내부는 item을 출력하는 함수를 하나만 쓰기 때문에 익명함수로 되어있다. 이 때 익명함수를 더 간단하게 만드는 것이 화살표 함수이다.
groceries.forEach((item) => console.log(item))
function과 중괄호 { }를 삭제하고 화살표 => 를 추가했더니 코드가 간결해졌다.
마지막으로 forEach 내부 함수를 외부로 옮기면 더 간결해진다.
const logItem = (item) => console.log(item);
groceries.forEach(logItem);
3. Object Literal (객체리터럴) 반환시에도 한 라인으로 바꾸자
자바스크립트에서의 객체리터럴이란, 객체를 중괄호 {}를 사용하여 나태는 방식을 말한다. 이때는 객체를 반환하기 때문에 한 라인으로 바꿀 수 없다고 생각하는 개발자가 많은데 그렇지 않다.
const getUser = () => {
return { // 객체리터럴 반환
name : 'Choco'
}
}
위의 코드는 아래와 같이 한라인으로 바꿀 수 있다.
const getUser = () => ({name : 'Choco'})
return문을 삭제하고 그냥 객체리터럴 자체를 반환해주면 된다.
결론
화살표 함수의 가장 큰 목적은 간결성에 있다. 일반함수와 화살표함수의 코드 간결성의 차이가 없다면 화살표함수를 쓰는 이유가 딱히 없어진다. 코드 간결성을 고려하면서 사용해야겠다.