forEach, for, every, some : 반복문

0. 설명

Javascript에서 여러 반복문들을 제공하는데, 정확한 용도를 모르고 forEach만 사용하는 경우가 많았다.

이에 Javascript에서 제공해주는 반복문들의 특징과 용도를 정리하기로 하였다.

 

1. forEach

향상된 for문이라고도 불리우는데, 가변적인 배열의 크기를 구할 필요가 없어 복잡한 반복문에 어울리며,

인덱스를 생성하여 접근하는 for문보다 수행속도가 더 빠르다.

비동기 방식으로 진행되며, callback함수를 호출하는 방식이다.

forEach는 break를 지원하지 않는다.

return false; 는 continue의 역할을 수행하고, 멈출수는 없다.

굳이 forEach문에서 break를 사용하고 싶다면, try catch문을 사용하여 강제로 예외처리를 발생시켜야한다.

하지만 이런 방법은 추천하지 않는다.

 

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

arr.forEach(item => {
	if(item == 2){
    	console.log(item);
        return false;
    }
    
    console.log("check", item);
});

// 결과
// chcek 1
// 2
// check 3
// check 4
// check 5

 

2. for

for문은 동기방식이기 때문에 중간에 오류가 발생한다면 에러 이후의 이벤트들은 동작하지 못하고 멈춘다.

하지만 forEach문과 다르게 인덱스로 접근하기 때문에, 배열을 역순으로 접근할 수 있다.

또한 forEach문의 반복문 내에서 요소의 데이터를 변경할 수 없다는 단점을 가지지 않아,

반복문 내 요소 수정이 가능하다.

 

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

for(let i = 0; i < arr.length; i++){
	if(arr[i] == 2){
    	console.log(arr[i]);
        break;
    }
    
    console.log("check", arr[i]);
}

// 결과
// check 1
// 2

 

3. every

배열안의 모든 요소들이 주어진 조건을 통과하는지 검사한다.

빈 배열에서 호출하면 true를 반환한다.

중간에 조건에 맞지않는 요소가 있다면 종료한다. return false;

 

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

const result = arr.every(item => item < 4);
console.log(result);

// 결과
// false


// 메소드를 넣는 방법
const result = arr.every(item => {
	return item < 4
});

 

4. some

배열안의 어떤 요소라도 주어진 조건을 통과하는지 검사한다.

중간에 한 요소라도 통과한다면 종료한다. return true;

 

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

const result = arr.some(item => item < 4);
console.log(result);

// 결과
// true


// 메소드를 넣는 방법
// return true는 break
// return false는 continue 의 개념을 가지게된다.
const result = arr.some(item => {
    return item < 4
    
    // 같은 의미
    // if(item < 4) return true;
    // else return false;
});