[JS] for문과 forEach문의 차이

for문

- 정해진 횟수 만큼 또는 특정 조건을 만족할 때까지 코드를 반복 실행하는 구문이다.

- 주로 배열이나 리스트처럼 여러 개의 값을 순서대로 처리할 때 많이 사용된다.

 

for문 기본 형식

for (초기값; 조건; 증감) {
   // 반복할 코드
}

 

초기값 : 반복을 시작할 때 처음으로 설정하는 값. let i = 0

조건 : 이 조건이 참(true)일 동안 반복이 계속된다. 조건이 더 이상 맞지 않으면 반복이 멈춘다.

증감 : 반복이 끝날 때마다 어떻게 값을 바꿀지를 나타낸다. i ++

 

for문 예시

for (let i = 0; i < 5; i ++) {
   console.log(i);
);

// result
0
1
2
3
4

let foods = ['찜닭', '마라탕', '탕후루'];

for (let i = 0; i < fruits.length; i ++) {
   console.log(foods[i]);
}

// result
찜닭
마라탕
탕후루

---

forEach문

- 배열에 있는 값을 하나씩 꺼내서, 그 값으로 어떤 작업을 할 지 결정하는 반복문 역할을 한다.

- 배열의 첫 번째 값부터 마지막 값까지 차례로 꺼내서, 주어진 코드가 실행된다.

 

forEach문 기본 형식

배열.forEach((요소) => {
   // 각 요소에 대해 실행할 코드
});

 

forEach문 예시

let foods = ['찜닭', '마라탕', '탕후루'];

foods.forEach = ((food) => {
   console.log(food);
});

// result
찜닭
마라탕
탕후루

let numbers = [100, 200, 300, 400, 500];

numbers.forEach((num) => {
   console.log(num * 2);
});

// result
200
400
600
800
1000

 

forEach문 동작 방식

1. 배열에 있는 첫 번째 값을 가져온다.

2. 그 값을 함수 안으로 넘겨주고, 그 값을 사용해서 코드가 실행된다.

3. 두 번째 값을 가져와서 다시 같은 일을 반복한다.

4. 배열의 마지막 값까지 계속해서 이 작업을 반복한다.

 

---

 

for문과 forEach문 반복문 비교

for문

let numbers = [1, 2, 3];
for (let i = 0; i < numbers.length; i ++) {
   cosnole.log(numbers[i]);
}

 

forEach문

let numbers = [1, 2, 3];

numbers.forEach((num) => {
   console.log(num);
});

 

주요 차이점

특징	for문	forEach문
사용 대상	배열, 숫자 등 모든 데이터	배열 전용
인덱스 제어	직접 인덱스를 제어할 수 있음	자동으로 순회하며, 인덱스 없이 각 요소에 접근
종료 제어	조건을 설정해 반복을 언제든 멈출 수 있음	배열의 끝까지 자동으로 반복함
배열 길이	배열의 길이를 직접 계산해서 사용함	자동으로 배열의 길이 만큼 반복함
반복 중단	break를 사용해 반복을 중간에 멈출 수 있음	중간에 멈출 수 없음(반복 중단 기능 없음)

 

어느 경우에 사용하는 게 좋을까

for문

- 배열 뿐만 아니라 숫자 범위를 반복하거나, 조건을 설정해 반복을 제어하고 싶을 때 유용하다.

- 예를 들어, 1부터 10까지의 숫자를 출력하거나, 특정 조건에서 반복을 멈춰야 할 때 사용한다.

- 반복의 시작점, 끝, 증가 방식 등을 자유롭게 제어할 수 있다.

 

forEach문

- 배열의 모든 요소를 처리할 때 더 간단하고 직관적이다.

- 배열의 모든 요소를 빠짐없이 반복해야 할 때 사용한다.

- 인덱스를 직접 신경 쓰지 않고, 배열 요소에 대해 작업할 때 유리하다.