for의 break, forEach의 return false 차이점

♻️ for의 break,  forEach의 return false 차이점

안녕하세요 TriplexLab 입니다.

오늘은 for문에 break문과 forEach문에 return false문의 차이점을 설명 하다고 히겠습니다.

📝 배경설명

for문과, forEach문 둘다. 동일한 sceneInfo라는 배열 객체를 돌고 있습니다.
그리고 sceneInfo에 있는 scrollHeight값을 더해서 totalScrollHeight라는 변수에 갱신을 해주고 있는 상황 입니다.

💡 차이점

for문에 break문인 경우 : 특정 조건에 바로 break가 됩니다.

forEach문에  return false문인 경우 : 특정 조건에 return false가 되긴 하는데 배열요소를 한번 쭉 돌고
빠져 나옵니다.

 const sceneInfo = [
        {
            // 0
            heightNum: 5, //각 섹션의 5배로 scrollHeight 세팅
            scrollHeight: 0,
        },
        {
            // 1
            heightNum: 5, //각 섹션의 높이의 5배로 scrollHeight 세팅
            scrollHeight: 0,
        },
        {
            // 2
            heightNum: 5, //각 섹션의 높이의 5배로 scrollHeight 세팅
            scrollHeight: 0,
        },
        {
            // 3
            heightNum: 5, //각 섹션의 높이의 5배로 scrollHeight 세팅
            scrollHeight: 0,
        }
];

 

// for문 예시)

let currentScene = 0; //현재 활성화된 값

// 중간코드...

let totalScrollHeight = 0;
for(let i = 0; i < sceneInfo.length; i++) {
	totalScrollHeight += sceneInfo[i].scrollHeight;
	if(totalScrollHeight >= window.pageYOffset){
		currentScene = i;
		break;
	}
}

document.body.setAttribute('id', `show-scene-${currentScene}`);

 

// every문 예시)

let currentScene = 0; //현재 활성화된 값

// 중간코드...

let totalScrollHeight = 0;
sceneInfo.every((ele, idx) => {
	totalScrollHeight += sceneInfo[idx].scrollHeight;
	if(totalScrollHeight >= window.pageYOffset){
		currentScene = idx;
		return false;
	}
	return true;
});

 document.body.setAttribute('id', `show-scene-${currentScene}`);

 

// forEach문 예시)

let currentScene = 0; //현재 활성화된 값

// 중간코드...

let totalScrollHeight = 0;
sceneInfo.forEach((ele, idx) => {
 	totalScrollHeight += sceneInfo[idx].scrollHeight;
 	if(totalScrollHeight >= window.pageYOffset){
 		currentScene = idx;
 		return false;
 	}
 });
 
 document.body.setAttribute('id', `show-scene-${currentScene}`);

 

📗정리

전 평소에 forEach문과, reducer문을 즐겨 쓰는 편입니다.
어떤 DOM 요소를 루프하면서 조회하고 특정 조건을 만족하면 그만루프하고 빠져나와 라는 작업을 힐때는
for문의 break를 사용하거나, every 함수를 사용해서 return true;을 마지막에 넣어서 빠져나오는것도 또하나의 방법 이 됩니다.

하지만 DOM 요소를 계속 루프해서 어떤 작업을 진행만 할때는 forEach, reduce... 등등을 활용하면 좋을것 같다.