for문과 forEach의 차이점 비교

for문과 forEach 메서드는 모두 반복문을 작성할 때 사용하지만, 작동 과정이 조금 다릅니다. 이 작동과정의 차이에서 발생하는 차이점에 대해 알아보겠습니다.

for문과 forEach메서드의 차이점 비교

 

for문과 forEach메서드의 차이점 비교

 

0. 여는글

1. `forEach`의 작동 과정

2. `for``문의 작동 과정

3. `forEach` 메서드와 `for`문은 언제 사용해야 될까?

4. 정리하기

 

여는글

 데이터를 저장하기 위해 서버로 보내기 전, 알맞은 값을 넣었는지 확인하는 작업이 필요했다. 그래서 forEach 메서드를 통해 값을 확인한 후, 적절하지 않은 경우에는 alert 창을 띄우고 저장 작업을 멈추도록 했다. 하지만 값에 문제가 있더라도 루프가 계속 진행되었고, 함수의 진행도 멈추지 않았다. 결국 forEach에서의 return문이 내가 생각한 방식과 차이가 있음을 알게 되었다.

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`문의 작동 과정

 상기한 `forEach` 메서드를 `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. 정리하기

forEach 메서드와 for문은 콜백 함수 사용 여부에서 차이가 있다. forEach 메서드는 작성하기는 간편하지만 성능 면에서는 for문에 밀릴 수 있다. 단순 루프일 경우에는 forEach를 사용해도 괜찮지만, 성능이나 반복문의 제어가 필요한 경우에는 for문을 사용하는 것이 좋다.