for문 개선하기

오늘은 자바스크립트에서 흔히 볼 수 있는 for 반복문을 더 깔끔하고 선언적인 코드로 리팩토링하는 방법을 알아보자. 특히 배열 고차 함수와 메서드 체이닝을 활용하여 코드의 가독성과 유지보수성을 높이는 방법을 살펴보자.

1. 기존 코드의 문제점 🤔

먼저 일반적으로 많이 사용하는 for문을 봐보자

const price = ['2000', '1000', '3000', '5000', '4000'];

function getWonPrice(priceList) {
    let temp = []; // 👈 임시 변수 사용
    
    for (let i = 0; i < priceList.length; i++) {
        temp.push(priceList[i] + '원');
    }
    
    return temp;
}

문제점

• 임시 변수 temp 가 필요 없는데 사용됨
• for 문은 “어떻게”에 초점 → 코드의 목적이 한눈에 안들어옴
• 코드의 의도가 직관적이지 않고 유지보수가 어려움

2. map을 활용한 첫 번째 개선 ✨

const price = ['2000', '1000', '3000', '5000', '4000'];

function getWonPrice(priceList) {
    return priceList.map((price) => price + '원');
}

const result = getWonPrice(price);
console.log(result);

개선점

• map 은 “각 요소를 반환한다”는 의도가 명확함
• 임시 변수 제거
• 선언적 프로그래밍 방식

3.금액 필터링 요구사항 추가 🎯

1000원 초과 금액만 필터링 해달라는 요구사항이 추가된다면?

const price = ['2000', '1000', '3000', '5000', '4000'];

const suffixWon = (price) => price + '원';
const isOverOneThousand = (price) => Number(price) > 1000;

function getWonPrice(priceList) {
    const isOverList = priceList.filter(isOverOneThousand);
    
    return isOverList.map(suffixWon);
}

4. 가격순 정렬 요구사항 추가 📊

const price = ['2000', '1000', '3000', '5000', '4000'];

const suffixWon = (price) => price + '원';
const isOverOneThousand = (price) => Number(price) > 1000;
const ascendingList = (a, b) => a - b;

function getWonPrice(priceList) {
    const isOverList = priceList.filter(isOverOneThousand);
    const sortedList = isOverList.sort(ascendingList);
    
    return sortedList.map(suffixWon);
}

5. 메서드 체이닝 적용 ⛓️

const price = ['2000', '1000', '3000', '5000', '4000'];

const suffixWon = (price) => price + '원';
const isOverOneThousand = (price) => Number(price) > 1000;
const ascendingList = (a, b) => a - b;

function getWonPrice(priceList) {
    return priceList
        .filter(isOverOneThousand)
        .sort(ascendingList)
        .map(suffixWon);
}

메서드 체이닝의 장점 💪

• 파이프라인처럼 동작
  1. 데이터가 순차적으로 처리되는 과정을 명확하게 보여줌
  2. filter → sort → map 순서로 데이터가 변환되는 과정이 직관적
• 코드 가독성 향상
  1. 각 단계가 무엇을 하는지 명확히 알 수 있음
  2. 각 단계가 독립적이라 버그 찾기도 쉬움
• 표준화된 방식
  1. 내장 메서드를 활용하니 성능도 좋고 안정적
  2. 팀 전체가 이해하기 쉬운 표준적인 방식

정리

처음에는 map , filter , sort 같은 배열 메서드들이 익숙하지 않을 수 있다. 하지만 이러한 메서드들은 자바스크립트의 표준 기능이며, 코드를 더 선언적이고 명확하게 만들어 준다. 특히 메서드 체이닝을 활용하면 데이터의 변환 과정을 마치 파이프라인처럼 표현할 수 있어, 코드의 흐름을 이해하기가 더 쉬워진다.