🎯 JavaScript 배열 메서드 완전 정복

map, filter, reduce부터 최신 메서드까지 배열 조작의 모든 것을 실습으로 학습해보세요

🎯 JavaScript 배열 메서드 완전 정복

실무에서 가장 많이 사용하는 배열 메서드들을 인터랙티브 실습으로 마스터하세요. 각 메서드의 특징과 실제 사용 사례를 통해 함수형 프로그래밍의 기초를 다집니다.

🔄 변환

map, flatMap

🔍 필터링

filter, find

📊 집계

reduce, sort

✅ 검증

some, every

map() - 변환

각 요소를 변환하여 새로운 배열을 생성합니다

초급변환

📝 예제 선택:

입력 배열:

코드:

실행 결과:

코드를 실행해보세요!

💡 실무 활용:

API 응답 데이터 가공, 컴포넌트 렌더링, 데이터 포맷 변경

🔗 메서드 체이닝 (Method Chaining)

여러 배열 메서드를 연결해서 복잡한 데이터 처리를 간단하게 표현할 수 있습니다.

예제: 사용자 데이터 처리

const users = [
  { name: '김철수', age: 25, city: '서울' },
  { name: '이영희', age: 30, city: '부산' },
  { name: '박민수', age: 17, city: '서울' },
  { name: '최지영', age: 28, city: '대구' }
];

// 서울에 사는 성인의 이름만 추출하여 정렬
const result = users
  .filter(user => user.city === '서울')  // 서울 거주자만
  .filter(user => user.age >= 18)        // 성인만
  .map(user => user.name)                // 이름만 추출
  .sort();                               // 가나다순 정렬

// 결과: ['김철수']

💡 각 메서드는 새로운 배열을 반환하므로 연속해서 호출할 수 있습니다.

⚡ 최신 배열 메서드

flat()

중첩 배열을 평탄화

[1, [2, 3], [4, [5]]].flat(2)

결과: [1, 2, 3, 4, 5]

flatMap()

map + flat을 한 번에

['Hello', 'World'].flatMap(word => word.split(''))

결과: ['H','e','l','l','o','W','o','r','l','d']

includes()

특정 요소 포함 여부 확인

[1, 2, 3].includes(2)

결과: true

Array.from()

유사 배열을 배열로 변환

Array.from('Hello')

결과: ['H', 'e', 'l', 'l', 'o']

⚡ 성능 최적화 팁

✅ 좋은 예

• find()로 첫 번째 요소만 찾기
• 체이닝 순서 최적화 (filter → map)
• 큰 배열은 for문 고려
• 불변성 유지 (원본 배열 보존)

❌ 피해야 할 것

• filter() 후 불필요한 map()
• 중첩 반복문과 같은 효과
• sort() 남용 (원본 배열 변경)
• 매번 새로운 함수 생성

🧑‍💻

1nnovator 김민성

JavaScript 학습 센터 개발자

기술 블로그•Interactive JavaScript Learning Platform

🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!

🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.