반복문을 단순하게 만들어라

01. 화살표 함수로 반복문을 단순하게 만들어라

화살표 함수(Arrow Function)는 ES6(ECMAScript 2015)에서 도입된 JavaScript의 중요한 기능으로, 함수를 더 간결하게 작성할 수 있게 해줍니다. 기존의 함수 선언 방식에 비해 많은 부분을 생략하여 코드를 더 읽기 쉽고 관리하기 쉽게 만들어줍니다.

화살표 함수의 기본 문법

기존의 함수 선언 방식과 화살표 함수를 비교해보면 차이점이 명확히 드러납니다:

// 기존 함수 선언 방식
function capitalize(name) {
    return name[0].toUpperCase() + name.slice(1);
}

// 화살표 함수 방식
const capitalize = (name) => {
    return name[0].toUpperCase() + name.slice(1);
};

 

위 예시에서 볼 수 있듯이, function 키워드가 제거되고 매개변수와 함수 본문 사이에 화살표(=>)가 추가되었습니다.

화살표 함수의 간결함

화살표 함수는 다음과 같은 방법으로 더 간결하게 작성할 수 있습니다:

1. 매개변수가 하나인 경우 괄호 생략 가능:

const capitalize = name => {
    return name[0].toUpperCase() + name.slice(1);
};

 

2. 함수 본문이 단일 표현식인 경우 중괄호와 return 키워드 생략 가능:

const capitalize = name => name[0].toUpperCase() + name.slice(1);

 

배열 메서드로 반복문을 짧게 작성하라

for문과 for...of 문도 좋다는 점 먼저 밝히며 시작해보겠다. 하지만 적게 쓰는 게 좋다. 왜냐고? 간결하지 못하니까.. 모던 자바스크립트로 작성한다는 것은 간결함, 가독성, 예측 가능성을 갖춘 코드인데 전통적인 반복문은 그렇지 않다. 이럴 때 사용하는 것이 배열 메서드이다.

const prices = ['1.0', 'nefotable', '2.15'];
const formatPrices = [];
for (let i = 0; i < prices.length; i++) {
  const price = parseFloat(prices[i]);
  if(price) {
    formatPrices.push(price);
  }
}

 

기존의 for문으로 작성한 코드이다. 어수선하기 짝이 없다. 코드는 길어지면 길어질수록 단순화되지도 않고 가독성도 떨어지는 코드가 된다. 그렇지만 우리의 킹갓 배열 메서드가 이것을 해결해 줄 것이다.

우리가 선택할 수 있는 배열 메서드는 다음과 같다:

• map(): 형태를 바꿀 수 있지만 길이가 유지된다.
• sort(): 형태나 길이는 변경되지 않고 순서만 바꾼다.
• filter(): 길이를 변경하지만 형태는 바꾸지 않는다.
• find(): 한 개의 데이터가 반환되고 형태는 바뀌지 않는다.
• forEach(): 형태를 이용하지만 아무것도 반환되지 않는다.