Ch.23 JS 핵심 패턴 — 배열 메서드 마스터

filter와 find — 조건부 추출

filter로 조건에 맞는 요소를 추출할 수 있다find와 findIndex의 차이를 설명할 수 있다filter와 map을 체이닝할 수 있다

100개의 상품 중 할인 상품만 보여주려면?

쇼핑몰에서 할인 상품만, 재고 있는 것만, 카테고리별로 필터링하는 기능. 이 모든 것이 filter 하나로 됩니다.

배열에서 원하는 조건의 데이터만 골라내는 방법은?

filter — 조건을 만족하는 요소만 모아 새 배열을 만듭니다. find는 첫 번째 매칭 하나만 반환합니다.

article

핵심 내용

filter의 콜백이 true를 반환하면 해당 요소가 새 배열에 포함됩니다

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

// 짝수만 추출
const evens = numbers.filter((n) => n % 2 === 0);
// [2, 4, 6, 8]

// 5 이상만 추출
const big = numbers.filter((n) => n >= 5);
// [5, 6, 7, 8]

// 실전 — 상품 필터링
const products = [
  { name: "노트북", price: 1200000, onSale: true },
  { name: "키보드", price: 89000, onSale: false },
  { name: "마우스", price: 45000, onSale: true },
  { name: "모니터", price: 350000, onSale: false },
];

// 할인 상품만
const saleItems = products.filter((p) => p.onSale);
// [{노트북}, {마우스}]

// 10만원 이하 상품만
const cheap = products.filter((p) => p.price <= 100000);
// [{키보드}, {마우스}]

map vs filter map은 변환 (5개 → 5개), filter는 추출 (5개 → 2개). map은 형태를 바꾸고, filter는 개수를 줄입니다.

filter는 모든 매칭을 반환 find는 첫 번째 매칭만 반환합니다

// findIndex — 인덱스 반환
const fruits = ["사과", "바나나", "체리", "바나나"];

const idx = fruits.findIndex((f) => f === "바나나");
// 1 (첫 번째 바나나의 위치)

// 없으면 -1 반환
const notFound = fruits.findIndex((f) => f === "포도");
// -1

// 존재 여부 확인 패턴
const exists = users.find((u) => u.id === 99);
if (!exists) {
  console.log("유저를 찾을 수 없습니다");
}

언제 뭘 쓸까? 여러 개 필요 → filter, 하나만 필요 → find. ID로 검색할 때는 항상 find를 쓰세요.

배열 메서드는 체이닝할 수 있습니다 filter → map 순서가 가장 흔합니다

const products = [
  { name: "노트북", price: 1200000, onSale: true },
  { name: "키보드", price: 89000, onSale: false },
  { name: "마우스", price: 45000, onSale: true },
  { name: "모니터", price: 350000, onSale: true },
];

// 할인 상품의 이름만 추출
const saleNames = products
  .filter((p) => p.onSale)        // 할인 상품만
  .map((p) => p.name);             // 이름만 추출
// ["노트북", "마우스", "모니터"]

// 10만원 이하 할인 상품의 가격 표시
const cheapSale = products
  .filter((p) => p.onSale)
  .filter((p) => p.price <= 100000)
  .map((p) => `${p.name}: ${p.price.toLocaleString()}원`);
// ["마우스: 45,000원"]

// React 실전 — 필터링된 리스트 렌더링
function SaleProducts({ products }) {
  return (
    <ul>
      {products
        .filter((p) => p.onSale)
        .map((p) => (
          <li key={p.id}>
            {p.name} — {p.price.toLocaleString()}원
          </li>
        ))}
    </ul>
  );
}

바이브 코더 팁 AI가 생성한 코드에서 `.filter().map()` 체인을 자주 보게 됩니다. "조건으로 거른 뒤 → 형태를 바꾼다"로 읽으면 됩니다.

filter와 find의 차이점은?

filter는 원본 배열을 수정한다

[1,2,3,4,5].filter(n => n > 3).map(n => n * 10)의 결과는?

edit_note

정리 노트

filter & find 핵심 정리

filter vs find

filter: 조건을 만족하는 모든 요소를 배열로 반환
find: 조건을 만족하는 첫 번째 요소 하나만 반환
findIndex: 조건을 만족하는 첫 번째 요소의 인덱스 반환, 없으면 -1

체이닝 패턴

filter → map: 조건으로 추출한 뒤 형태를 변환하는 가장 흔한 패턴
순서 중요: filter로 먼저 개수를 줄이고 map으로 변환하면 효율적

★

여러 개 필요하면 filter, 하나만 필요하면 find. ID 검색은 항상 find를 쓰세요.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작