Array Transformation (데이터 변형)

 

🟨 Array Transformation

배열 데이터를 가공하거나 필요한 형태로 바꾸는 데 가장 많이 사용되는 핵심 메서드는 map과 filter이다.

두 메서드의 공통점은 원본 배열을 변경하지 않고 새로운 배열을 반환한다는 점이다.

그래서 데이터의 안정성을 유지하면서 안전하게 가공 작업을 수행할 수 있다.

 

🟣 map (변환)

배열의 모든 요소를 하나씩 꺼내어 특정 함수를 실행한 뒤, 그 결과를 모아 새로운 배열을 만드는 메서드.

const result = arr.map(x => x * 2);

• 특징: 배열의 각 요소를 다른 값으로 변환한다.
• 역할: “모든 데이터를 가공해서 새로운 형태로 만들기”
• 구조: 모든 요소를 변환해 원본과 길이가 같은 새로운 배열 생성.

👉 결과 배열의 길이는 항상 원본 배열과 동일하다.

 

 

🟣 filter (선별)

배열의 요소 중 특정 조건을 만족하는 요소만 골라내어 새로운 배열을 만드는 메서드.

const result = arr.filter(x => x > 10);

• 특징: 조건을 통과한 요소만 남긴다.
• 역할: “조건에 맞는 데이터만 추리기”
• 구조: 콜백 함수가 truthy를 반환한 요소만 남긴다.

👉 결과 배열의 길이는 원본보다 작거나 같을 수 있다.

 

💥 map + filter 조합 (메서드 체이닝) 💥

두 메서드를 연결해서 사용할 수 있으며, 복잡한 데이터 처리도 한 번에 깔끔하게 해결할 수 있다.

const result = products
  .filter(p => p.price >= 100000)
  .map(p => p.name);

• 먼저 filter로 조건을 걸러낸 뒤, map으로 필요한 값만 변환한다.
• filter → map 순서가 일반적이며, map을 먼저 하면 불필요한 변환까지 수행하게 될 수 있어 효율이 떨어질 수 있다.

 

 

📋 map vs filter 한눈에 비교 📋

구분	map()	filter()
목적	요소를 다른 값으로 변경/변형	조건에 맞는 요소만 추출/선택
결과 배열 길이	원본 배열과 동일함	원본보다 작거나 같음
콜백 함수 반환값	새로운 요소로 사용될 값	해당 요소를 유지할지 결정할 T/F

 

 

📍 POINT 📍

✔️ map은 데이터를 가공해 새로운 형태로 변환할 때 사용한다. (형태 제한 없음) ✔️

✔️ filter는 조건에 맞는 데이터만 추출할 때 사용한다. ✔️

✔️ 두 메서드 모두 원본 배열을 변경하지 않기 때문에 안전하게 사용할 수 있다. ✔️