Array method (forEach, map, filter, reduce, some)

김서현·2025년 1월 17일

frontend

목록 보기
16/34

ES5에서 가장 자주 쓰이는 Array 메소드 5가지

(*ES5는 2009년에 나온 JavaScript 표준)

1. forEach

  • 배열의 모든 요소를 순회하며 함수 실행.
  • 주로 배열을 반복 처리할 때 사용.
const numbers = [1, 2, 3];
numbers.forEach((num) => console.log(num)); 
// 출력: 1, 2, 3

2. map

  • 배열의 각 요소를 변환한 새로운 배열 반환.
  • 원본 배열은 변경되지 않음.
const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); 
// 출력: [2, 4, 6]

3. filter

  • 조건에 맞는 요소만 선택해 새로운 배열 반환.
  • 원본 배열은 변경되지 않음.
const numbers = [1, 2, 3, 4];
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); 
// 출력: [2, 4]

4. reduce (축약 메소드)

  • 배열의 모든 요소를 순회하며, 하나의 값으로 누적하는 데 사용됩니다.
  • 초기값(초기 누적값)을 지정할 수 있으며, 이를 통해 숫자 합계, 객체 병합, 문자열 연결 등 다양한 작업을 수행.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 0은 초기값
console.log(sum); 
// 출력: 10 (1 + 2 + 3 + 4)
  • 예를 들어, 배열의 값을 곱하는 작업도.
const product = numbers.reduce((acc, num) => acc * num, 1); // 초기값을 1로 설정
console.log(product);
// 출력: 24 (1 * 2 * 3 * 4)

5. some (조건 확인 메소드)

  • 배열에서 조건에 맞는 요소가 하나라도 있으면 true 반환합니다.
  • 모든 요소가 조건을 만족하지 않으면 false를 반환합니다.
  • 대량의 데이터를 처리할 때 특정 조건을 빠르게 확인.
const numbers = [1, 3, 5, 7];
const hasEven = numbers.some((num) => num % 2 === 0);
console.log(hasEven); 
// 출력: false (짝수가 없음)

참고

'===' vs '=='의 차이

  • ===: 엄격한 비교로, 값과 데이터 타입이 모두 같아야 참(true)입니다.
  • ==: 느슨한 비교로, 값이 같으면 참(true)입니다. (타입이 다르면 타입을 강제로 변환 후 비교)

차이 예시:

console.log(2 === '2'); // false (엄격 비교: 타입이 다름)
console.log(2 == '2');  // true  (느슨한 비교: 문자열 '2'를 숫자 2로 변환)

실무에서는 예상치 못한 오류를 방지하기 위해 ===를 사용하는 것이 더 안전합니다.
==는 암묵적 타입 변환으로 의도치 않은 결과를 초래할 수 있습니다.

profile
한양대 학생입니다. 서울캠입니다.

0개의 댓글