forEach() vs Each문

forEach() vs Each()

• 공통점 : 둘 다 배열의 각 항목을 반복하며 작업을 수행하는 반복문이다.
• 차이점
  1. forEach() : 배열의 "메소드" 로, 배열에 적용하는 함수이다.
  2. Each문 : 자바스크립트의 일반적인 반복문으로, 배열 외에도 다양한 상황에서 사용될 수 있다.

❗ forEach는 중간에 반복을 멈추는 break와 다음 반복을 건너뛰는 continue와 같은 제어문을 사용할 수 없다. for문은 이러한 제어문을 활용하여 반복 도중에 특정 조건에 따라 동작을 변경할 수 있다.

1. forEach()

forEach() 메소드의 콜백 함수에는 세 가지 매개변수가 들어갈 수 있다.

1. 요소 값(value): 배열의 현재 요소의 값이 전달된다.
2. 인덱스(index): 현재 요소의 인덱스가 전달된다.
3. 배열(array): forEach()가 호출된 배열 자체가 전달된다.

const arr = [1, 2, 3]

arr.forEach((value, index, array) => {
  console.log(`Value: ${value}, Index: ${index}, Array: ${array}`)
});

// 일반 함수 ver
arr.forEach(function(value, index, array){
  console.log(`Value: ${value}, Index: ${index}, Array: ${array}`)

})

1. value : 이 매개변수는 forEach() 메소드가 반복하고 있는 현재 요소의 값이다. 콜백 함수 내부에서 value를 사용하면 배열의 각 요소 값에 접근할 수 있다. 위 예시에서 value는 각 반복에서 10, 20, 30이 된다.

2. index : 이 매개변수는 현재 요소의 인덱스를 나타낸다. 콜백 함수 내부에서 index를 사용하면 배열의 각 요소의 인덱스에 접근할 수 있다. 위 예시에서 index는 각 반복에서 0, 1, 2가 됩니다.

3. array : 이 매개변수는 forEach() 메소드가 호출된 배열 자체를 나타낸다. 콜백 함수 내부에서 array를 사용하면 현재 반복 중인 전체 배열에 접근할 수 있다. 위 예시에서 array는 [10, 20, 30]이 된다.

2. for문

for문의 형태

• for(초기화; 조건; 증감문;){}

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

1. 초기화: 반복문이 시작될 때 한 번만 실행되는 초기화 코드입니다. 주로 반복 횟수를 나타내는 변수를 초기화하는데 사용된다.

2. 조건: 반복문이 실행될 조건을 나타내는 부분입니다. 이 조건이 참(true)인 동안 반복문이 계속해서 실행된다.

3. 증감: 반복문이 한 번 실행된 후에 실행되는 코드로, 주로 반복 횟수를 나타내는 변수를 증가시키거나 감소시키는데 사용된다.

const arr = [1, 2, 3];

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

위 코드에서 배열 arr 의 모든 요소를 출력한다.

👌 코드 출력결과

1
2
3