forEach()의 사용 그리고 map()과의 차이

Array.forEach()에 대하여

 

 

forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void

 

❗️forEach는 배열을 순회하며, 해당배열의 각 요소들에 대해서 인자로 받은 콜백함수를 실행한다. 

❗️forEach문은 for문 대신 사용은 가능하나, for문처럼 break하는 것이 불가능하다. 

❗️callback함수는 총 3개의 인자를 받는다, (배열의 요소값, index, this)

❗️단,  return 값이 undefined(void)이다.

 

그러므로, 

const array1 = [1, 2, 3, 4];
let result = array1.forEach(el => el*2);

를 하게 되면

마치 result = [2, 4, 6, 8]이 되어야 할 것 같지만, result = undefined가 되게 된다. 

 

❗️forEach문은 for문 대신 사용은 가능하나, for문처럼 break하는 것이 불가능하다. 즉, 모든 요소를 다 돌아봐야 한다는 뜻이다.

❗️forEach는 원래 배열을 변경하지 못하지만, 콜백함수의 this를 사용하면 가능하다.

e.g.)

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

array1.forEach((el, idx, self) => self[idx] = el*3)

이라고 하게 된다면, 

array1 = [3, 6, 9, 12]가 되게 된다. 

 

 

 

Array.forEach()와 Array.map()의 차이

❗️forEach는 return 값이 undefined이지만, map은 그렇지 않다. 

e.g.)

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

let resultByMap = array1.map(el => el*2)

 

를 하게 되면, 

resultByMap = [2, 4, 6, 8]이 된다. 즉, map은 새로운 배열을 리턴값으로 가진다는 것이다. 

 

하지만, forEach로 같은 결과를 만들기 위해서는 

 

let resultByForEach = [];

array1.forEach(el => resultByForEach.push(el*2))

를 해야 한다. 

즉,  return = undefined 이기 때문에, 새로운 배열에 그 값들을 콜백 함수를 통해 넣어주어야 같은 결과를 도출 가능하다는 것이다.