forEach 간단 설명

자바스크립트 forEach는 배열에 사용할 수 있는 메서드인데 map과 비슷 한 느낌이라 항상 헷갈렸는데 이참에 forEach를 간단히 정리해봐야겠다.

확실히 map과 사용하는 게 비슷해 보이는데, 차이점은 map은 return값이 있는데 forEach는 return값이 없다.

형태는 다음과 같다

 

Array.forEach(callback[,thisArg]);

두 번째 인자인 thisArg는 생략가능하다.

---

보통 다음과 같은 형태로 다들 이해하고 사용하는거같다.

Array.forEach((배열요소,인덱스,배열자체값) => {
함수내용
});

 

다음은 forEach를 이용하여 배열의 특정 조건에 해당하는 값을 제거하는 예시이다.

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

const newArr = arr.forEach((element,i,arr) => {
//     console.log(element); 배열의 각 요소를 출력
//     console.log(i); 배열의 각 index를 출력
//     console.log(arr); arr 배열을 출력
   if(element === 2){
     arr.splice(i,1);
   }
});

// console.log(newArr) 결과는 undefined가 나옴. return 하는 게 없음.
console.log(arr) // 결과는 [1,3,4] 가 나옴

element값이 2인 경우 해당 값을 제거하는 예시이다. splice의 처번째 인자는 제거하려는 배열 요소의 index값을 입력하고, 두 번째 인자로는 첫 번째 인자의 위치에서 몇개의 요소를 제거할지 입력하면 된다.

다음 예시는 특정 조건에 해당하는 배열 요소의 값을 변경해보는 예시이다.

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

arr.forEach((element,i,arr) => {
   if(element === 2){
     arr[i] = arr[i]+5;
   }
});

console.log(arr) // [1,7,3,4]