Blog

자바스크립트 배열 메소드의 이해: map, filter, reduce

자바스크립트는 웹 개발에서 매우 중요한 프로그래밍 언어로, 다양한 배열 메소드를 제공하여 데이터를 효율적으로 처리할 수 있게 도와줍니다. 그중에서도 map, filter, reduce는 자주 사용되는 메소드입니다. 이들 각각의 메소드는 배열을 조작하는 데 특화된 기능을 제공하지만, 동작 방식이나 결과물에서 차이를 보입니다.

map 메소드

map 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성합니다. 배열의 길이는 변하지 않으며, 원본 배열의 데이터 중 일부를 활용하여 새로운 데이터를 만들어낼 수 있습니다. 예를 들어, 팀원의 이름 목록이 담긴 배열에서 각 팀원의 이름만 추출할 수 있습니다.

사용 예시:

const team = [
  { name: 'John', position: 'Developer' },
  { name: 'Jane', position: 'Designer' },
  { name: 'Doe', position: 'Manager' }
];
const names = team.map(member => member.name); // ['John', 'Jane', 'Doe']

filter 메소드

filter 메소드는 배열 내의 요소를 특정 조건을 기준으로 필터링하여 새로운 배열을 생성합니다. 이 메소드는 원본 배열의 구성요소 중 조건에 만족하는 요소만을 유지하여 반환하며, 조건을 만족하는 요소가 없을 경우 빈 배열을 반환합니다.

사용 예시:

const scores = [30, 82, 70, 45];
const passingScores = scores.filter(score => score > 59); // [82, 70]

reduce 메소드

reduce 메소드는 배열의 각 요소를 누적하여 하나의 결과값으로 집계합니다. 이 메소드는 배열의 길이와 자료형을 변형할 수 있으며, 복잡한 데이터 처리를 간편하게 수행할 수 있도록 돕습니다. 예를 들어, 모든 점수를 더하여 총점을 구할 수 있습니다.

사용 예시:

const totalScores = scores.reduce((accumulator, current) => accumulator + current, 0); // 182

map, filter, reduce의 차이

이 세 가지 메소드는 배열을 변형하는 방식에서 큰 차이를 보입니다. 다음은 이들의 주요 차이를 정리한 리스트입니다:

• map: 배열의 모든 요소에 함수를 적용하여 새로운 배열을 반환.
• filter: 조건에 맞는 요소만을 뽑아서 새로운 배열을 반환.
• reduce: 배열을 하나의 값으로 집계하며, 길이나 형태를 변형할 수 있음.

자바스크립트에서의 배열 메소드 활용

자바스크립트에서 이들 메소드를 효과적으로 활용하기 위해서는 그 동작 방식과 결과물을 명확히 이해하고 있어야 합니다. 또한, 메소드 체이닝을 통해 여러 메소드를 연이어 사용할 수도 있습니다. 예를 들어, filter 메소드로 특정 조건을 만족하는 요소를 골라내고, 그 결과에 map 메소드를 붙여 새로운 배열을 반환하는 식입니다.

const activeMembers = team.filter(member => member.isActive)
               .map(member => member.name); 

결론

자바스크립트의 배열 메소드들은 데이터 처리와 변형을 간편하게 해주는 강력한 도구들입니다. map, filter, reduce 메소드를 사용하여 보다 효율적이고 가독성 높은 코드를 작성할 수 있습니다. 각 메소드의 특성과 활용 방법을 숙지하여, 코드를 개선하는 데 도움을 받을 수 있기를 바랍니다.

자주 묻는 질문과 답변