javascript 자바스크립트 forEach 함수 사용방법 정리, 예제로 쉽게 이해하기

forEach()

for문을 대체할 수 있는 고차함수이다.

자신의 내부에서 반복문을 실행한다.

 

자바스크립트 메서드 중에서 가장 많이 사용하는 함수이지 않을까 싶다.

사실 사용방법이 다르지 다른 메서드로 같은 값들을 만들어낼수는 있다.

 

처음에 이해하기 어렵지만 한번만 이해하기 시작하면 일반적인 반복문을 사용할 때 자주 사용하게 된다.

고차함수에 있어서 어렵게 설명되어있는것들이 많다.

forEach의 콜백함수에 this는 undefined를 가리키고,

클래스 내부의 모든 코드에서 암묵적으로 strict mode가 적용되는 등등...

이거까지 이해하려고하면 고차함수의 흥미를 잃을수있다..

쉽게 설명하며 다시한번 이해하려 한다.

 

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

map과 비슷하다고 생각할 수 있지만 map은 새로운 배열을 return 하지만 forEach는 따로 return 하는 값이 없다.

---

map과 다른점!

 

forEach

- forEach는 return 하게 되어도 undefined가 출력된다.

그럼 어떻게 해야할까?

다른 배열에 접근하여 값을 push 또는 재할당하는 방법.

그렇기에 새로운 배열값이 필요하지 않다면 map이 아닌 forEach를 사용!

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

const newArr = arr.forEach((value) => {
  return (value *= 2);
});

console.log(newArr); // undefined

map

- map은 새로운 배열을 return 한다.

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

const newArr = arr.map((value) => {
  return (value *= 2);
});
console.log(newArr); // [ 2, 4, 6, 8, 10 ]

---

기본 실행 문법

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

const newArr = arr.forEach((value, index, array) => {
  console.log("value : " + value);
  console.log("index : " + index);
  console.log("array : " + array);
});


// value : 1
// index : 0
// array : 1,2,3,4,5
// value : 2
// index : 1
// array : 1,2,3,4,5
// value : 3
// index : 2
// array : 1,2,3,4,5
// value : 4
// index : 3
// array : 1,2,3,4,5
// value : 5
// index : 4
// array : 1,2,3,4,5

- 세가지의 매개변수를 받는다.

- value 처리할 현재 요소

- index 처리할 요소의 인덱스

- forEach()를 호출한 배열

 

* 간단하게 설명하면 첫 요소, 인덱스, 배열에 각각 접근이 가능하다.

 

처음에 활용하기에 어렵다고 생각이 들지만 일반적인 반복문을 forEach()로 사용할 수 있다.

 

* 사용하지 않은 파라미터는 사용하지 않아도 된다.

그러나 파라미터의 자리 순으로 value, index, array가 설정되어있기 때문에

index에 접근만 하려면 value를 사용하지 않더라도 앞자리는 채워주어야한다.

---

for문을 forEach로

for 예제

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

for (let i = 0; i < arr.length; i++) {
  newArr.push(arr[i] * 2);
}

console.log(newArr); // [ 2, 4, 6, 8, 10 ]

foreach 예제

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

arr.forEach((value) => {
  newArr.push(value * 2);
});

console.log(newArr); // [ 2, 4, 6, 8, 10 ]

예제로 살펴보면 이렇게 forEach로 접근이 가능하다.

위 예제를 보게 되면 for문이 더 간단한거 아니야? 라고 생각할 수 있지만

코드가 더 길어지거나 for문 사용이 많아지는 경우에는 가독성이 떨어지는 경우가 있다.

 

- 경우에 따라 다르겠지만 그 외에도 가독성 및 접근성에 있어서 forEach가 더 좋은 코드인건 확실하다.

 

 

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

arr.forEach((value, index, array) => {
  array[index] = value * 2;
});

console.log(arr);

만약 새로운 배열에 넣지 않고 원본 배열에 접근을 하려면 이렇게 콜백함수를 통해서 변경할 수 있다.

---

forEach 예제

const travel = ["빠니보틀", "곽튜브", "채코제", "원지의하루", "희철리즘"];

travel.forEach((value, index) => {
  if (value == "곽튜브") {
    travel.shift();
  }
});

console.log(travel);


// 빠니보틀
// 0 
// 곽튜브
// 1
// 원지의하루
// 2
// 희철리즘
// 3
// [ '곽튜브', '채코제', '원지의하루', '희철리즘' ]

- 만약 여기서 shift를 사용하게 되면 어떻게 될까?

당연한 이야기지만 첫번째 요소인 빠니보틀이 빠지게 된다.

 

value를 호출하면서 순회하지만 해당 배열내에서 shifr()를 하기 때문에 첫번째 요소인 빠니보틀이 나오게 된다.

 

그럼 어떻게 곽튜브를 배열에서 삭제할 수 있을까?

slice, splice 를 사용하여 원하는 선택지를 제거할 수 있다.

 

하고자하는 설명은 forEach가 순회를 하더라도 그 요소에 접근을 하지만 그 배열의 요소에 접근하는 사실이다.

const travel = ["빠니보틀", "곽튜브", "채코제", "원지의하루", "희철리즘"];

travel.forEach((value, index) => {
  console.log(value);
  console.log(index);
  if (value == "곽튜브") {
    travel.splice(index, index);
  }
});

console.log(travel);

// 빠니보틀
// 0 
// 곽튜브
// 1
// 원지의하루
// 2
// 희철리즘
// 3
// [ '빠니보틀', '채코제', '원지의하루', '희철리즘' ]

이렇게 forEach() 메서드는 배열에 요소 접근을하여 그 요소에 맞는 index를 활용 할 수 있다.

map을 사용할 수 있지만 원본 배열을 그대로 두고 문제를 해결해야한다면 새로운 배열을 만드는 map이 아닌

forEach를 사용하면 된다.