자바스크립트 배열 메서드를 활용한 효율적인 코드 작성

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

자바스크립트 개발자, 특히 배열 조작과 데이터 처리에 관심 있는 중급 이상 개발자

핵심 요약

• .map()은 기존 배열을 기반으로 새 배열을 생성할 때 사용 (예: products.map(item => item.price))
• .filter()는 조건에 맞는 항목만 추출 (예: tasks.filter(task => !task.done))
• .reduce()는 배열을 단일 값으로 축소하거나 복잡한 데이터 처리에 활용 (예: numbers.reduce((total, num) => total + num, 0))
• .find(), .forEach(), .includes()는 각각 특정 항목 검색, 반복 처리, 포함 여부 확인에 사용

섹션별 세부 요약

1. `.map()`의 활용

• 기존 배열을 변환하여 새로운 배열을 생성
• 원본 배열을 수정하지 않는 비파괴적(immutable) 작업 가능
• 예: const prices = products.map(item => item.price)

2. `.filter()`의 사용

• 조건에 맞는 항목만 필터링하여 새 배열 생성
• 불필요한 데이터 제거 시 유용 (예: 완료되지 않은 태스크 필터링)
• tasks.filter(task => !task.done)

3. `.find()`의 특징

• 조건에 맞는 첫 번째 항목만 반환
• 특정 아이디나 조건으로 단일 항목 검색에 적합 (예: users.find(u => u.id === 2))

4. `.reduce()`의 강력한 기능

• 배열을 단일 값으로 축소 (예: 숫자 합계 계산)
• 데이터 그룹화, 중첩 배열 평탄화 등 복잡한 작업 처리 가능
• numbers.reduce((total, num) => total + num, 0)

5. `.forEach()`와 `.includes()`

• .forEach()는 배열 항목에 함수 실행 (예: names.forEach(name => console.log(name)))
• .includes()는 특정 값이 배열에 포함되었는지 확인 (예: tags.includes('css'))

결론

자바스크립트 배열 메서드는 코드의 가독성과 효율성을 높이는 핵심 도구입니다. .map(), .filter(), .reduce() 등은 데이터 변환, 필터링, 집계에 필수적이며, .find()와 .includes()는 조건 검색과 유효성 검증에 유용합니다. 실무에서 이 메서드들을 반복적으로 사용하면 코드 품질이 크게 향상됩니다.