TIL/JavaScript

[TIL] forEach 이해하기

"유니" 2023. 1. 3. 20:52

 

 

 

♦️ 코딩테스트를 조금씩 풀다보니 for each 에 대해 알면 좋을 것 같아서 공부해 보았다.

for each는 for 문과 마찬가지로 반복적인 기능을 수행할 때 사용한다. 하지만 for문 처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있다.

 

 

 

forEach 

기본적인 forEach 사용법은 아래와 같다.

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

arr.forEach(function(element) {
	console.log(element); // 0 1 2 3 4 5 6 7 8 9 10 
});

arr 객체의 요소들이 callback 함수에 의해 순서대로 호출되는 모습 !

for문에 비해 조금 더 깔끔하고, 직관적이다. index가 증가하는 등의 변칙 없이 arr 내의 모든 요소들이 callback을 호출한다. 

 

 

 

forEach(arrow 함수)

arr.forEach(element => console.log(element));

화살표 함수를 사용하는 방법도 있다.

 

 

 

홀수 배열 만들어 보기

forEach는 return이 없다. 즉, callback 함수에 의해서 어떤 결과물을 출력하고 싶으면 함수 밖의 변수를 사용해야 한다.

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const oddArray = [];

arr.forEach(function(element) {
	if(element % 2 == 1) {
    	oddArray.push(element);
    }
});

console.log(oddArray); // [1, 3, 5, 7, 9]

홀수를 출력할 수는 있지만 함수 밖의 영역은 예상치 못한 예외 상황을 발생시킬 수 있기 때문에 scope 관리를 잘해야 한다.

 

 

 

✏️ 주의점

✔️ for문은 continue나 break로 반복을 제어할 수 있지만 forEach는 예외를 발생시키지 않으면 중간에 반복을 종료할 수 없다.