[JS] forEach

 

들어가기에 앞서 

forEach를 알기전까지는 배열의 요소를  순서대로  실행하는 코드를 짤때 for반복문으로 사용하곤 했다. 

//반복문 사용
const items = ["item1", "item2", "item3"];

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

//결과
   item1
   item2
   item3

 

 

이걸 좀 더 간소화하게 만들수가 있었는데?!

 

---

 

forEach 

배열의 요소 각각에 대해 주어진 함수를 실행한다.

다만, 요즘은 자주 사용하지 않는다고 한다.
최근에 나온 for of 가 각광받고 있는데,  함수를 넣을 필요도 없어서 코드를 더 짧게 짤수 있다. 

 

위에서 언급한 for반복문을 다음과 같이 forEach를 사용해서 표현할 수 있다. 

const items = [item1, item2, item3]

items.forEach(function (item) {
  console.log(item);
})

 

 

for of를 사용하면 다음과 같다. 코드도 짧고 더 직관적이다. 

const items = [item1, item2, item3]

for (let item of items) {
  console.log(item);
}

---

다시 forEach로 돌아가서 

 

형식

arr.forEach(func(value, index, array))

 

* value : 처리할 현재 요소 

* index : 처리할 현재 요소의 인덱스 

* array : forEach()를 호출한 배열 

 

 

 

value와 index를 인자로 받는 예제 

const fruits = ["사과", "과일", "참외", "수박"];

fruits.forEach(function (item, index) {
  console.log("index :" + index + ",item :" + item);
});

//결과는 다음과 같다. 
index :0,item :사과
index :1,item :과일
index :2,item :참외
index :3,item :수박

 

value, index, array를 인자로 받는 예제 

const arr = ["서울", "런던", "도쿄", "워싱턴"];

arr.forEach((item, index, arr) => {
  console.log(
    "item: " + item + ", index: " + index + ", arr[" +index +"]: " + arr[index]
  );
});

//결과는 다음과 같다. 

item: 서울, index: 0, arr[0]: 서울
item: 런던, index: 1, arr[1]: 런던
item: 도쿄, index: 2, arr[2]: 도쿄
item: 워싱턴, index: 3, arr[3]: 워싱턴

 

정리 

배열의 요소를 forEach내의 함수를 이용해서 처리할 수 있다.