배열 메서드를 사용하다 보면 for문에서 사용하던 continue와 break를 사용하려다 막히는 경우가 있다. 이러한 흐름 제어를 배열 메서드에서는 어떻게 다뤄야 할지 알아보자
왜 continue와 break가 배열 메서드에서 동작하지 않을까? 🤔
배열 메서드(forEach, map 등)는 콜백 함수를 인자로 받아 동작한다. 이 콜백 함수는 배열의 각 요소에 대해 독립적으로 실행되는 별도의 함수이기 때문에, continue나 break 같은 흐름 제어문을 사용할 수 없다.
const orders = ['first', 'second', 'third'];
// 이렇게 하면 SyntaxError 발생
orders.forEach(function(order) {
if(order === 'second') {
continue; // ❌ 사용 불가
break; // ❌ 사용 불가
}
console.log(order);
});해결 방법들 💡
1. 전통적인 for문 사용
가장 직관적이고 명확한 방법이다. 흐름 제어가 꼭 필요한 경우 추천
const orders = ['first', 'second', 'third'];
for (let i = 0; i < orders.length; i++) {
if(order === 'second') break;
console.log(orders[i]);
}2. try-catch로 강제 종료
forEach 내에서 강제로 반복을 멈추고 싶을 때 사용할 수 있음
const orders = ['first', 'second', 'third'];
try {
orders.forEach(order => {
if(order === 'second') {
throw new Error('Break');
}
console.log(order);
});
} catch(e) {
if(e.message !== 'Break') throw e;
}3. for...of 사용
const orders = ['first', 'second', 'third'];
for (const order of orders) {
if(order === 'second') break;
console.log(order);
}4. 다른 배열 메서드 활용
배열 메서드 중에서 중간에 종료가 가능한 메서드를 활용하는 방법
const orders = ['first', 'second', 'third'];
// some 활용
orders.some(order => {
if(order === 'second') return true;
console.log(order);
return false;
});
// find 활용
orders.find(order => {
if(order === 'second') return true;
console.log(order);
return false;
});배열 메서드별 특징 📝
- 중간에 멈출 수 있는 메서드
every(): 조건이 false면 즉시 종료some(): 조건이 true면 즉시 종료find(): 조건에 맞는 요소를 찾으면 종료findIndex(): 조건에 맞는 인덱스를 찾으면 종료
- 중간에 멈출 수 없는 메서드
forEach()map()filter()reduce()
어떤 방법을 선택해야 할까? 🤔
- 단순한 중단이 필요할 때
for문이나for...of사용이 가장 명확
- 복잡한 로직이 필요할 때
try-catch구문 활용
- 선언적인 코드를 유지하고 싶을 때
some,find등의 배열 메서드 활용
Hello