JavaScript forEach()메서드

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()를 호출한 배열.
• 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() 메서드를 메서드 체인에서 사용하고자 한다면, 그냥 새로운 배열을 반환하는 메서드를 사용하는 것이 편하다.

프로그래머스 문제 풀 때 배열에 들어있는 요소들을 꺼내려고 for 문을 많이 사용하는데 그 때 for 문 말고 forEach() 메서드를 사용해서 꺼낼 수 있다.

const items = ['item1','item2','item3'];
const copy = [];

//for문
for(let i = 0; i<=items.length;i++){
		copy.push(item[i]);
	}

//forEach()메서드
items.forEach(function(item){
	copy.push(item);
})

forEach() 메서드에 대한 나의 주관적인 생각

for문보다 훨씬 간결해서 배열요소 꺼낼 때 자주 사용할 거 같은데 메서드 체인 이용하고 싶을 땐 다른 함수를 사용해야 한다는 것을 알 수 있었다. 어쩐지 다른 사람들이 forEach() 문으로 간결하게 표현한 걸 보고 따라 응용해 봤는데 자꾸 오류가 떠서 매번 for문으로 코드를 바꾸곤 했었다.

이제는 왜 그런 오류가 떴는지 알았으니 꼭 응용해 봐야하겠다!

 

좀 더 한눈에 보고 싶으시면 노션으로 보셔도 됩니다!!