JavaScript forEach 루프는 배열의 각 요소에 대해 함수를 실행하는 일반적인 방법입니다.
그러나 forEach 루프를 사용하기 전에 forEach 루프와 관련된 4가지 주요 문제를 해결해야 합니다.
이 글에서는 창의적인 예시의 맥락에서 각 문제를 살펴보겠습니다.
그럼 더 이상 고민하지 말고… 바로 들어가 보겠습니다!
1. 중단하거나 계속할 수 없음
시작하기 전에 다음 JavaScript 프로그램을 살펴보겠습니다.
const soliders: string[] = ["John", "Daniel", "Cole", "Adam"]
soliders.forEach((soldier, index) => {
soliders[index] = "Captain " + soldier
})
// [ "Captain John", "Captain Daniel", "Captain Cole", "Captain Adam" ]
console.log(soliders)우리의 시나리오는 간단합니다:
- 우리는 군인들 로 구성되어 있습니다
- 각 병사 에 대해 시작 부분에 "Captain"을 추가하여 승격시킵니다.
하지만 "다니엘"을 선장으로 승격시키고 싶지 않다면 어떻게 될까요?
관련 반복을 건너뛰기 위해 continue 키워드를 사용하고 싶은 유혹을 받을 수도 있습니다 .
const soliders: string[] = ["John", "Daniel", "Cole", "Adam"]
soliders.forEach((soldier, index) => {
if (soldier === "Daniel") {
continue
}
soliders[index] = "Captain " + soldier
})
// [ "Captain John", "Captain Daniel", "Captain Cole", "Captain Adam" ]
console.log(soliders)그러나 이는 작동하지 않으며 구문 오류가 발생합니다.
forEach 루프의 흐름은 중단 되지 않으므로 이 문제를 해결하는 유일한 방법은 조건문을 사용하는 것입니다.
soliders.forEach((soldier, index) => {
// The loop will always execute, no way to skip
// an iteration
if (soldier !== "Daniel") {
soliders[index] = "Captain " + soldier
}
})
// [ "Captain John", "Daniel", "Captain Cole", "Captain Adam" ]
console.log(soliders)2. 비동기 실행
군인 진급은 동기식이므로 진급 순서는 John부터 Adam까지 오름차순으로 발생합니다.
이제 대신 비동기 함수가 있다고 가정해 보겠습니다.
forEach 루프는 비동기 기능이 완료될 때까지 기다리지 않으므로 예기치 않은 출력 순서가 발생할 수 있습니다.
각 반복마다 무작위 지연을 설정하여 비동기 함수를 시뮬레이션해 보겠습니다.
const soliders = ["John", "Daniel", "Cole", "Adam"]
soliders.forEach((soldier, index) => {
setTimeout(() => {
soliders[index] = "Captain " + soldier
console.log(soliders)
}, Math.random() * 1000) // simulating a random delay up to 1 second.
})
다음은 프로그램을 두 번 실행한 후의 출력입니다.
3. 어레이를 수정할 수 없음
이는 배열의 요소를 실제로 변경할 수 있기 때문에 교활한 방법이지만 일반적으로 나쁜 습관으로 간주됩니다.
forEach 루프는 이러한 목적으로 설계되지 않았으므로 데이터를 과도하게 처리하거나 요소를 건너뛸 수 있으므로 이는 나쁜 습관입니다.
다음은 forEach 루프 중에 첫 번째 군인 "John"을 제거하는 예입니다.
soliders.forEach((soldier, index) => {
if (soldier === "John") {
soliders.splice(index, 1)
} else {
soliders[index] = "Captain " + soldier
}
})
// [ "Daniel", "Captain Cole", "Captain Adam" ]
console.log(soliders)이제 "John"이 삭제되어 "Daniel"도 건너뛰게 되므로 출력이 혼란스러울 수 있습니다.
이는 splice() 함수를 사용한 후 배열이 왼쪽으로 이동하여 "Daniel"이 인덱스 0에 배치되므로 건너뛰기 때문입니다.
4. 오류 처리 부족
오류 처리 부족이 아마도 가장 큰 문제일 것입니다.
map() 또는 filter() 와 같은 다른 배열 함수와 달리 forEach에는 오류 처리 기능이 내장되어 있지 않습니다.
즉, forEach 내부에서 오류가 발생하면 오류는 가장 가까운 try-catch 블록까지 전파됩니다.
그리고 이것이 존재하지 않으면 프로그램이 충돌합니다.
그리고 오류가 더 높은 범위에서 발생하기 때문에 정확한 오류 위치를 찾기가 어렵고 이로 인해 디버깅 세션이 길어집니다.
결론
오늘 우리는 forEach 루프와 관련된 4가지 주요 문제를 검토했습니다.
군인 진급의 예를 들어 각 문제를 시각화했습니다.
forEach 루프를 사용하는 경우 디버깅하기 어려운 예기치 않은 오류가 발생할 수 있으므로 주의하세요.