for each

 

동일한 코드를 반복 실행해야 합니다.

 

What ?

for each 문

배열의 요소들을 반복하는 메서드 입니다. 

 

 arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

 

How ?

// for each 문 형태

let 초기 배열(initialization)

초기 배열(initialization).forEach((요소(element), 인덱스(index)) => {
  코드블록 내용(body)
});

구성 요소

요소 명	예시	설명
초기 배열 ( initialization )	[ a, b, c, d ... ]	반복할 배열입니다.
요소 ( element )	a	배열안의 각각의  값을 나타냅니다.
인덱스 ( index )	0	배열안의 요소들의 순서를 나타냅니다.
코드블록 내용 ( body )	console.log ( element)	코드 블록 ( { } ) 안에서 실행할 기능입니다.

 

 

---

 - 실행 과정 -

forEach() 메서드 실행
→  배열의 요소를 처음부터 끝까지 순회합니다.
→  순회 중에 배열의 각 요소에 대해 지정된 함수를 호출합니다.
→  배열의 요소와 함께 해당 요소의 인덱스, 그리고 배열 자체를 인수로 전달
→  배열의 다른 요소들에는 어떤 변경도 가해지지 않습니다.
→  모든 요소에 대해 주어진 함수가 호출되면 종료됩니다.

 

---

객체( { } )에 forEach() 사용

// 객체 forEach 메서드

let arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // length가 3이므로 forEach()에서 무시됩니다.
};

Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4

  - arrayLike를 첫 번째 매개변수로 넣고, 두 번째 매개변수로는 콜백 함수를 넣습니다. 배열이 아닌 객체에 대해 배열를 호출합니다.

---

 

Point !

파괴적인 필터링 ( 요소를 반복하면서 선택된 원소를 제거해야 하는 경우 ) 는 사용할 수 없습니다.

// 요소를 제거할 경우

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

array = array.forEach(item => item !== 3);

console.log(array) // [1, 2, 3, 4, 5];

    -  for each 문은 반복을 중지하거나 중단할 수 있는 방법이 없어 array 배열에는 아무런 변화가 없습니다.

 

배열을 순회하면서 원소 값 일부 혹은 전체를 변경할려면 배열의 인덱스를 사용해야 합니다.

// 요소를 수정하는 경우

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

array = array.forEach((element, index) => array[3]=6);

console.log(array) // [1, 2, 3, 6, 5]

 

for each 문은  빈 요소에 대해 호출되지 않습니다.

// 빈 값이 있는 배열

const example = [1, /* 빈 슬롯 */, 3];
let count = 0;

example.forEach((element) => {
  console.log({ element });
  count++;
});

console.log({ count });

// { element: 1 }
// { element: 3 }
// { count : 3 }

  - console 값에 빈슬롯이 나타나지 않고, 횟수도 증가하지 않습니다.

 

forEach 문은 명확하고, 유연하고, 버그를 예방효과 그리고 성능 저하가 없습니다.

 

---