[JavaScript] 배열 메서드로 반복문 짧게 작성하기

배열 메서드로 반복문을 단순화하기

---

모던 자바스크립트를 작성한다는 것은 코드의 간결함, 가독성, 그리고 예측 가능성을 추구하는 것이다.
이러한 목표를 달성하는 데 있어 배열 메서드는 매우 강력한 도구다.

 

 

반복문 코드의 한계

---

아래는 반복문을 사용해 배열을 처리하는 코드다:

const prices = ['1.0', '2.15'];
const formatterPrices = [];

for (let i = 0; i < prices.length; i++) {
    formatterPrices.push(parseFloat(prices[i]));
}

 

이 코드의 기능은 간단하다: 문자열로 된 숫자를 부동소수점 숫자로 변환하는 것이다.
하지만 이런 반복문이 다섯 개의 파일에서 각기 다른 작업을 한다면, 중복된 코드가 늘어나고 유지보수가 어려워질 수 있다.

 

 

배열 메서드로 더 간결하게

---

배열 메서드를 사용하면 위 코드를 다음과 같이 간단하게 작성할 수 있다:

const formatterPrices = prices.map(price => parseFloat(price));

 

• .map(): 배열의 각 요소를 순회하며 새로운 배열을 생성한다.
• 코드가 간결해지고, **"무엇을 하는지"**가 더 명확하게 드러난다.

 

배열 메서드로 더 복잡한 데이터 처리하

---

배열 메서드는 단순한 데이터 변환뿐만 아니라 객체 배열도 효율적으로 처리할 수 있다.
아래는 팀원 정보를 처리하는 예제다:

const team = [
    { name: 'melinda', position: 'ux designer' },
    { name: 'katie', position: 'strategist' },
    { name: 'madhavi', position: 'developer' },
    { name: 'justin', position: 'manager' },
    { name: 'chris', position: 'developer' }
];

// 개발자(developer)만 추출하기
const developers = team.filter(member => member.position === 'developer');

// 이름만 추출하기
const developerNames = developers.map(dev => dev.name);

 

 

 

결론

---

배열 메서드는 불필요한 데이터를 배제하고, 코드를 더 간결하게 만들어 가독성과 예측 가능성을 높인다.
반복문을 단순화하는 작업부터 시작해 배열 메서드를 활용하는 습관을 들여보자! 다음 글에서는 배열 메서드인 reduce를 사용해 데이터 집계와 변환 작업을 효율적으로 처리하는 방법을 다룰 예정이다.