JavaScript[JS]

[JS] Array Method - Map(), Reduce(), forEach(), Filter() 한번에 정리!

HANdeveloper 2024. 11. 7. 16:57
Map()
  • 새로운 결과 반환 - 그에 따른 memory 공간 차지
  • array 안의 요소를 하나씩 꺼내 변환해서 새로운 값으로 반환하고 싶을 때 사용
  • 특히, 모든 요소를 변환하고 싶을 때
Reduce()
  • 배열 축소 원리
  • 배열 각 요소에 대해 주어진 reduce 함수 실행 후 하나의 결과값 반환
  • 여러 개의 값이 담긴 배열을 줄여서 하나의 값으로 생성
  • 여러 배열을 하나로 합치거나, 축적(누적)도니 값을 반환할 때 사용
forEach()
  • 주어진 함수를 한번씩 실행 (for loop 느낌)
for 문과의 차이
- for 문 : break, continue 사용 가능, return 값 반환, 중간에 반복문 중단 가능(break)
- forEach문 : break, continue 사용 불가능, return은 현재 반복만 종료시키고 항상 undefined 반환, 중간에 중단 불가능
Filter()
  • 조건에 충족하는 요소들만 반환하고 싶을 때 사용
  • return 값을 Boolean 형식으로 반환하고, true 인 값만 반환시킴


‼️Map과 forEach 차이

📍 반환값
- Map : 새로운 배열 반환
- forEach : undefined 반환, 반환값 없음

📍 목적
- Map : 데이터 변환
- forEach : 작업 수행(사이드이펙트 - 데이터저장 등)

📍 체이닝 여부
- Map : 가능 (.map().filter()... )
- forEach : 불가능 (.forEach().filter() -> forEach가 undefined반환하므로 filter() 에러발생)