전통적인 for 루프나 forEach 메서드에서는 continue 문을 사용해 특정 조건의 반복을 건너뛸 수 있지만, 함수형 프로그래밍 스타일에서는 이러한 제어문을 직접 사용하기 어렵습니다. 대신 Array.prototype.some() 메서드를 활용하면 동일한 효과를 얻을 수 있습니다.
some() 메서드로 루프 계속하기
some() 메서드는 콜백 함수가 true를 반환하는 순간 반복을 중단하고, false를 반환하면 다음 요소로 계속 진행합니다. 이 특성을 역으로 활용하면 continue와 같은 동작을 구현할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>자바스크립트 함수형 프로그래밍에서 루프 계속하기</h1>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 fruitArr 배열을 순회하며 mango와 peach는 건너뛰고 나머지 과일만 출력합니다</h3>
<script>
let resEle = document.querySelector(".result");
let fruitArr = ["apple", "mango", "peach", "papaya", "watermelon"];
document.querySelector(".Btn").addEventListener("click", () => {
fruitArr.some(function (fruit) {
if (fruit === "mango" || fruit === "peach") {
return false;
}
resEle.innerHTML += fruit + "<br>";
});
});
</script>
</body>
</html>코드 설명
fruitArr배열에는 apple, mango, peach, papaya, watermelon 다섯 가지 과일이 담겨 있습니다.- 버튼을 클릭하면
some()메서드가 배열을 순회합니다. - 현재 요소가
mango또는peach이면 콜백이false를 반환하여 해당 요소를 건너뛰고 다음 반복을 계속합니다. - 그 외의 과일은 화면에 출력됩니다.
실행 결과
페이지가 로드된 초기 화면은 다음과 같습니다.
'클릭하세요' 버튼을 누르면 mango와 peach를 제외한 과일만 출력됩니다.
참고: forEach에서 continue가 필요하다면?
forEach는 콜백 내부에서 continue나 break를 사용할 수 없습니다. 단순히 특정 조건만 건너뛰려면 콜백 안에서 returnsome(), every(), 또는 ES2015+ 환경이라면 for...of 문과 함께 break/continue를 사용하는 것이 좋습니다.