2023년 3월 10일

KSY

JavaScript forEach()메서드에 대해서

forEach()메서드는 무엇일까?

forEach( ) 메서드는 주어진 함수를 배열 요소 각각에 대해 오름차순으로 한 번씩 실행한다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다.

const array1 = ['a','b','c'];
array1.forEach(x => console.log(x));

//a
//b
//c

arr.forEach(callback(currentvalue,[, index[, array]])[,thisArg])

• callback : 각 요소에 대해 실행할 함수. 세 가지 매개변수를 받는다.

  • currentValue : 처리할 현재 요소
  • index : 처리할 현재 요소의 인덱스
  • array : forEach()를 호출한 배열.

• thisArg : callback을 실행할 때 this로 사용할 값.

  thisArg 매개변수는 forEach()에 제공한 경우 callback을 호출할 때 전달해 this의 값으로 쓰인다. 전달하지 않으면 undefined를 사용하여, 최종 this 값은 함수의 this를 결정하는 평소 규칙을 따른다.

forEach()메서드는 원본 배열을 변경하지만 반환값이 없다. 그래서 메서드 체인의 중간에서 사용하면 해당 메서드 체인에서 undefined 값을 반환한다.

→ 메서드 체인에서 forEach()메서드를 사용하여 작업을 수행하고 그 결과를 다음 메서드로 전달하는 것이 불가능하다.

예시)

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

const squaredNumbers = numbers.forEach(num => num ** 2).map( num => num *2 );

console.log(squaredNumbers);
//Uncaught TypeError: Cannot read properties of undefined (reading 'map')

위 코드처럼 오류가 뜬다. 왜냐하면 forEach()는 undefined을 반환하기 때문에 map()메서드에서 오류가 발생하기 때문이다.

그렇기 때문에 forEach() 메서드를 메서드 체인에서 사용하고자 한다면, 그냥 새로운 배열을 반환하는 메서드를 사용하는 것이 편하다.