Array.forEach

forEach문은 오직 Array 객체에서만 사용이 가능하다.(ES6부터 Map, Set 지원)

배열의 요소들을 반복하여 작업을 수행할 수 있다.

forEach 구문의 인자로 callback함수를 등록할 수 있고, 배열의 각 요소들이 반복될때 이 callback함수가 호출됨. callback 함수에서 배열요소의 인덱스와 값에 접근할 수 있음.

 

배열의 첫번째부터 마지막까지 반복하면서 item을 꺼낼 수 있다.

var arr = ['가', '나', '다', '라'];

arr.forEach(function(item, index, arr2) {
  console.log(item, index, arr2[index+1]);
})

// 첫번째 인수는 배열 각각의 item
// 두번째 인수는 배열의 index
// 세번째 인수는 배열 그 자체

 

* 콜백함수(callback function)

다른 함수의 인자로써 이용되며, 어떠한 이벤트에 의해 호출되어지는 함수를 말함.(non-block, 비동기 방식의 함수)

* 비동기 처리 함수

호출부에서 실행결과를 기다리지 않아도 되는 함수.(동기 함수 - 호출부에서 실행 결과가 리턴될때까지 기다려야 함)

 

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element) {
  console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});
// 혹은 arrow 함수 가능
arr.forEach(element => console.log(element));

forEach는 return하는 값을 따로 모아서 어떤 처리를 하는 과정이 없기 때문에 메서드를 호출한 코드를 함수에 할당하면 undefind가 할당 됨. 즉, callback 함수에 의해서 어떤 결과물을 내놓고 싶을 경우, 함수 밖의 변수를 사용해야 함. (forEach 메서드는 변수에 할당하기 보다는 반복분이나 조건문과 같이 그냥 바로 호출되는 것이 일반적임)

const arr = [0,1,2,3,4,5,6,7,8,9,10];
const oddArray = [];

arr.forEac(function(element) {
  if(element%2 == 1) {
    oddArray.push(element);
  }
});

console.log(oddArray); // [1,3,5,7,9]

위와 같이 결과를 만들어낼 수 있으나, 함수 밖 영역의 참조는 예상치 못한 예외 상황을 발생시킬 수 있으므로 scope 관리를 잘해줘야 함.

map 함수를 사용하는 것이 좋음.

 

forEach의 callback 함수에는 배열의 요소 뿐만 아니라 index, 전체 배열을 인자로 사용할 수 있음.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element, index, array) {
  console.log(`${array}의 ${index}번째 요소 : ${element}`);
});

/*
0,1,2,3,4,5,6,7,8,9,10의 0번째 요소 : 0
0,1,2,3,4,5,6,7,8,9,10의 1번째 요소 : 1
0,1,2,3,4,5,6,7,8,9,10의 2번째 요소 : 2
0,1,2,3,4,5,6,7,8,9,10의 3번째 요소 : 3
0,1,2,3,4,5,6,7,8,9,10의 4번째 요소 : 4
0,1,2,3,4,5,6,7,8,9,10의 5번째 요소 : 5
0,1,2,3,4,5,6,7,8,9,10의 6번째 요소 : 6
0,1,2,3,4,5,6,7,8,9,10의 7번째 요소 : 7
0,1,2,3,4,5,6,7,8,9,10의 8번째 요소 : 8
0,1,2,3,4,5,6,7,8,9,10의 9번째 요소 : 9
0,1,2,3,4,5,6,7,8,9,10의 10번째 요소 : 10
*/

dom 객체에 onclick을 지정할 때 index를 사용하여 arr의 값을 참조하는 방식으로도 사용할 수 있음.

순수 html에서는 dom 객체를 불러오고, onclick을 작성하고, 다시 삽입하는 (innerHTML)등의 과정이 복잡하기 때문에 위 방식이 크게 와닿지 않지만

react에서 map 함수와 index를 사용하여 컴포넌트에 이벤트를 넣는 패턴이 꽤 많으니 인지하고 넘어갈 것

 

forEach는 callback 함수 이외에 thisArg라는 객체(Object) 인자도 사용할 수 있음.

function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry;
    ++this.count;
  }, this);
};  

var obj = new Counter();
obj.add[2,5,9];
obj.count //3
obj.sum // 16

thisArg의 핵심은 아래와 같다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];
const obj1 = {name: "kim"};
const obj2 = {name: "park"};

arr.forEach(function(element) {
  console.log)`${this.name} - ${element}`);
}, obj1);

/*
kim - 0
kim - 1
kim - 2
kim - 3
kim - 4
kim - 5
kim - 6
kim - 7
kim - 8
kim - 9
kim - 10
*/
arr.forEach(function(element){
  console.log(`${this.name} - ${element}`);
}, obj2);
/*
park - 0
park - 1
park - 2
park - 3
park - 4
park - 5
park - 6
park - 7
park - 8
park - 9
park - 10
*/

forEach의 callback에서 this에 대한 참조를 사용할 수 있는데 thisArg가 callback의 this가 되는 것입니다.

forEach(ele = > console.log(this.name + elem), obj)에서 this가 elem => console.log(obj.name + elem)와 같아 진다는 뜻

 

for문은 continue나 break로 반복을 제어할 수 있지만 forEach는 throw(예외)를 발생시키지 않으면 중간에 반복을 종료할 수 없음.

만약 조건을 만족시킬 때까지만 반복시켜야 한다면 기존 for문이나 every같은 함수를 사용해야함.