for..of vs for..each + 콜백함수 까지 🫡

for ... of 

• 배열의 요소를 직접 반복
• for (const element of array)

const array = [1, 2, 3];

for (const element of array) {
	console.log(element);  // 1, 2, 3
}

• 배열 분만 아니라 map, set, string, nodelist 같은 이터러블 객체도 반복 가능
• 객체에서 사용 블가

for ...each

• 배열의 각 요소에 대한 제공된 함수를 호출
• array.forEach(function(element, index, array) {...})

const array = [1, 2, 3];

array.forEach(function(element) {
  console.log(element); // 1, 2, 3  // 1, 2, 3
});

•  배열에서만 사용 가능
• 일반 객체나 이터러블이 아닌 다른 데이터 타입에서는 사용 불가

---

forEach와 콜백 함수

forEach는 배열의 각 요소에 대해 콜백 함수를 실행하는 메서드

콜백함수는 forEach 메서드에 의해 자동 호출, 배열의 각 요소, 해당 요소의 인덱스 그리고 배열 자체를 매개변수로 받을 수 있음

const array = [1, 2, 3, 4];

array.forEach(function(element, index, array) {
  console.log(`Element: ${element}, Index: ${index}, Array: ${array}`);
});

Element: 1, Index: 0, Array: 1,2,3,4
Element: 2, Index: 1, Array: 1,2,3,4
Element: 3, Index: 2, Array: 1,2,3,4
Element: 4, Index: 3, Array: 1,2,3,4

 

for...of와 콜백 함수

for...of는 배열이나 다른 이터러블 객체의 요소를 순회하지만, 콜백 함수를 직접적으로 사용하지 않음. 대신, 반복문 내부에서 필요한 코드를 작성하여 각 요소에 대해 작업을 수행.

const array = [1, 2, 3, 4];

for (const element of array) {
  console.log(`Element: ${element}`);
}

Element: 1
Element: 2
Element: 3
Element: 4

 

---

for..Each에 대해 더욱 알아보자! (어쩌면 위의 내용보다 나을 수도?)

for..each는 콜백 함수와 함께 사용!

forEach는 배열의 각 요소에 대해 한번씩 콜백 함수를 실행하는 메서드이다. 

array.forEach(function(element, index, array) {
  // 콜백 함수의 본문
});

 

element: 현재 처리 중인 배열 요소

index: 현재 요소의 인덱스

array: forEach가 호출된 배열 자체

 

const array = [1, 2, 3, 4, 5];

array.forEach(function(element, index) {
  console.log(`인덱스 ${index}의 요소는 ${element}입니다.`);
});

 

forEach 메서드가 배열의 각 요소를 순회하면서, 콜백 함수가 실행되어 큰솔에 인덱스와 요소를 출력한다.

forEach는 배열을 순회하면서 각 요소에 대해 특정 작업을 수행하고자 할 때 콜백 함수와 함께 사용된다.

콜백함수가 없으면 forEach는 어떤 작업을 수행하는지 알 수 없기에 제대로 작동x