JavaScript: 대량의 데이터 요리하기! 배열 메서드 map과 filter 기초부터 알아보기 🍳

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊

32일차 포스팅에서는 Fetch API를 이용해 외부 서버에서 날씨 데이터를 가져오는 방법을 배웠습니다. 서버와 성공적으로 통신하여 데이터를 받아왔을 때의 그 짜릿함, 다들 느끼셨나요?

그런데 서버에서 받아오는 데이터는 보통 한두 개가 아닙니다. 쇼핑몰의 상품 목록이나 게시판의 글 목록처럼, 수십에서 수백 개의 정보가 배열(Array) 형태로 한꺼번에 쏟아집니다. 오늘은 이렇게 거대한 배열 데이터를 내 입맛에 맞게 가공하고 걸러내는 자바스크립트의 필수 도구, map과 filter에 대해 알아보겠습니다.

1. 도입

우리가 100개의 상품 데이터가 들어있는 배열을 서버에서 받았다고 가정해 봅시다. 여기서 상품의 이름만 따로 뽑아서 리스트를 만들거나, 가격이 5만 원 이하인 상품만 추려내고 싶을 때 어떻게 해야 할까요?

과거에는 for 반복문을 사용해 코드를 길게 작성해야 했지만, 이제는 map과 filter라는 아주 우아한 메서드를 통해 단 몇 줄만으로 이 복잡한 작업을 끝낼 수 있습니다.

2. 개념 설명: 컨베이어 벨트와 거름망

이 두 메서드는 기존의 원본 배열을 건드리지 않고, 작업이 완료된 완전히 새로운 배열을 만들어 낸다는 아주 훌륭한 공통점이 있습니다.

A. map (변환기) 역할: 배열 안의 모든 데이터에 똑같은 작업을 지시하여, 그 결과물로 채워진 새로운 배열을 만듭니다. 비유: 사과를 넣으면 사과 주스로, 포도를 넣으면 포도 주스로 똑같이 가공해 주는 공장의 마법 컨베이어 벨트와 같습니다. 결과: 원래 배열의 길이가 10개라면, map을 거친 후의 배열 길이도 무조건 10개입니다. 형태만 바뀝니다.

B. filter (추출기) 역할: 배열 안의 데이터들을 하나씩 검사해서, 내가 정해준 조건(테스트)에 합격한 데이터만 모아 새로운 배열을 만듭니다. 비유: 굵은 모래는 남기고 고운 모래만 통과시키는 거름망과 같습니다. 결과: 조건에 합격한 데이터만 남기 때문에, 원래 배열보다 길이가 짧아질 수 있습니다.

3. 예시 코드: 회원 데이터 가공하기

이름과 나이가 적혀있는 회원 데이터 배열을 가지고, map과 filter를 직접 사용해 보겠습니다.

JavaScript

 

// 서버에서 받아왔다고 가정하는 회원 데이터 배열 (객체들이 들어있습니다)
const users = [
    { name: "김철수", age: 15 },
    { name: "이영희", age: 22 },
    { name: "박민수", age: 19 },
    { name: "최지운", age: 12 }
];

// 1. map 사용하기: 모든 회원의 "이름"만 뽑아서 새로운 배열 만들기
const namesOnly = users.map(function(user) {
    // 각각의 객체에서 이름만 추출하여 내보냅니다.
    return user.name;
});

console.log("이름 목록:", namesOnly);


// 2. filter 사용하기: 나이가 18세 이상인 성인 회원만 걸러내기
const adultUsers = users.filter(function(user) {
    // 나이가 18 이상인지 테스트하여, 참(true)인 경우만 통과시킵니다.
    return user.age >= 18;
});

console.log("성인 회원 목록:", adultUsers);

 

코드 실행 결과 (Console):

이름 목록: ["김철수", "이영희", "박민수", "최지운"] 성인 회원 목록: [{ name: "이영희", age: 22 }, { name: "박민수", age: 19 }]

4. 코드 설명

두 메서드 모두 괄호 안에 함수(콜백 함수)를 넣어서 사용합니다. 배열에 들어있는 요소의 개수만큼 이 함수가 자동으로 반복 실행됩니다.

users.map(function(user) { ... }) 배열 안의 객체들이 순서대로 user라는 임시 변수에 담겨서 들어옵니다. 내부에서 return user.name; 이라고 명령하면, 전체 객체 대신 오직 이름 문자열만 반환됩니다. 이 반환된 이름들이 차곡차곡 모여서 새로운 배열인 namesOnly가 완성됩니다.

users.filter(function(user) { ... }) 마찬가지로 데이터가 순서대로 들어옵니다. 여기서 return 뒤에는 참(true)이나 거짓(false)으로 판별될 수 있는 조건식이 와야 합니다. return user.age >= 18; 이라고 적으면, 이 조건이 참인 이영희와 박민수 데이터만 거름망을 통과하여 adultUsers 배열에 담깁니다. 조건이 거짓인 철수와 지운이는 버려집니다.

5. 마무리

오늘은 33일차 포스팅으로, 실무에서 가장 많이 쓰이는 배열 메서드인 map과 filter에 대해 알아보았습니다. 데이터를 원하는 형태로 바꾸고, 원하는 조건으로 걸러내는 이 두 가지만 능숙하게 다뤄도 자바스크립트 데이터 처리 실력이 한 단계 훌쩍 뛰어오르는 것을 느끼실 수 있습니다.

위의 예시 코드를 보면 객체의 데이터를 꺼낼 때 user.name이나 user.age처럼 점(.)을 찍어서 가져오고 있습니다. 데이터 구조가 복잡해질수록 이 과정도 반복적이고 번거로울 수 있습니다.

다음 34일차 포스팅에서는 객체나 배열 안에 있는 데이터를 아주 우아하고 깔끔하게 꺼내 쓸 수 있는 최신 자바스크립트 문법인 구조 분해 할당(Destructuring Assignment)에 대해 배워보겠습니다. 코드가 마법처럼 짧아지는 경험을 하실 수 있을 겁니다!

오늘도 코딩하시느라 고생 많으셨습니다. 다음 시간에 만나요! 👋