for문과 forEach 메서드는 모두 반복문을 작성할 때 사용하지만, 작동 과정이 조금 다릅니다. 이 작동과정의 차이에서 발생하는 차이점에 대해 알아보겠습니다.
for문과 forEach메서드의 차이점 비교
for문과 forEach메서드의 차이점 비교
여는글
const test = [
{ name: "김철수", age: 30 },
{ name: "김영희", age: undefined },
];
const handleSave = async (infos) => {
// 값의 유효성 확인, 값이 없으면 alert 창 띄우기
infos.forEach((info) => {
if (!info.age) {
console.log(`${info.name}의 나이를 입력해주세요!`);
return;
}
});
console.log("유효성 검사 통과!");
};
handleSave(test);
// 출력: "김영희의 나이를 입력해주세요!"와 "유효성 검사 통과!"가 모두 출력된다.1. `forEach`의 작동 과정
상기한 예시처럼 forEach의 콜백 함수에 return문을 넣더라도 루프가 계속 동작한다. 그 이유는 forEach가 각 요소마다 콜백 함수를 호출하는 방식으로 진행되기 때문이다.
const test2 = [2, 3, 4];
test2.forEach((num) => {
if (num === 3) {
console.log('3을 찾았다! 이제 루프 그만 두고 싶어!');
return;
}
console.log('못 찾았다!');
});만약 이렇게 작성한 forEach 메서드가 있다고 가정해보겠다. 이러한 경우 아래의 코드와 같은 방식으로 실행된다.
callback(2);
callback(3);
callback(4);결국 콜백 함수 내부에 return문을 작성하더라도 그건 전체 반복문에 대한 return이 아닌, 콜백 함수 한 개의 return문이기 때문에 3을 찾은 이후에도 4를 대상으로 콜백 함수가 실행된다.
2. `for`문의 작동 과정
const test2 = [2, 3, 4];
for (const num of test2) {
if (num === 3) {
console.log('3을 찾았다! 이제 루프 그만 두고 싶어!');
return;
}
console.log('못 찾았다!');
}`for`문 안에서 작성된 `return`문은 전체 반복문을 종료하기에, 3을 찾은 이후에는 루프를 종료한다. 따라서 4를 대상으로는 루프를 진행하지 않는다. 결국 `forEach` 메서드와 `for`문의 차이는 콜백 함수 사용 여부에서 발생한다고 볼 수 있다.
3. `forEach` 메서드와 `for`문은 언제 사용해야 할까?
`forEach` 메서드와 `for`문은 콜백 함수를 사용하느냐에서 차이가 있다. 그래서 장단점을 비교한다면 이 부분을 고려해서 살펴보면 된다.
- `forEach` 메서드의 장점
- `for`문에 비해 작성이 편리하다.
- 코드가 간결하고 명확하여 가독성이 높다.
- `forEach` 메서드의 단점
- 배열의 요소가 많아질 시, 실행되는 콜백 함수의 갯수도 증가하므로 자원 소모(오버헤드)가 심해질 수 있다.
- 각 요소마다 실행되는 콜백 함수의 내부 코드가 복잡해질 경우에도 자원 소모(오버헤드)가 심해질 수 있다.
- `break`, `continue`를 사용할 수 없어 루프를 중간에 종료하거나 건너뛸 수 없다.
- `for`문의 장점
- `break`, `continue`를 통해 루프에 대한 제어가 가능하다.
- 콜백 함수를 사용하지 않으므로, 배열이 길어지거나 루프 내에 실행하는 코드가 복잡하더라도 오버헤드가 심해지지 않는다.
- 복잡한 반복 논리를 구현할 때 유리하다.
- `for`문의 단점
- 함수형 프로그래밍에서 형태가 다소 이질적이다.
- 코드가 길어지거나 복잡해질 수 있어 가독성이 떨어질 수 있다.
4. 정리하기
'javascript > 이론' 카테고리의 다른 글
| 자바스크립트의 이벤트 루프 (0) | 2024.04.24 |
|---|
