자바스크립트 forEach() vs map() 차이 문의드립니다. 필요한 상황에서는 배열을 순차적으로 가져와서 쓰고자 할때 복사본이 아니라 원본 배열을 수정해도 되는 상황이라면 실제 코드를 적용할때 웹을 사용하는 사용자 입장에서는 속도? 메모리? 측면으로 볼때는 어떤 코드가 유리할까요?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
둘의 차이는 리턴값이 있냐 없냐로, 윗분 말씀대로 둘의 역할이 각각 다릅니다.
성능차이는 map이 아니라 for문이랑 비교해야할것같네요
"forEach()가 할 수 있는 일을 map() 으로도 할 수 있는데" 라고 말씀하신 정의를 다시 생각해보셔야 할 것 같아요.
```typescript
// forEach()
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
// map()
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
```
원본을 가지고 수정한다면 굳이 map() -새로운 배열을(내부에서 생성하고) 리턴하는- 에 대한 오버헤드 없이
forEach()로 가능하겠죠.
리턴의 유무가 다르므로 윗분들께서 "역할이 다르다"고 간단하게 정의해 주신 것 같습니다.
정의를 다시 생각해보셔야 한다고 말씀드린 부분은,
1. `[1,2,3].forEach(item => console.log(item * 2));`
2. `[1,2,3].map(item => console.log(item * 2));`
1 과 2 는 프로세스 관점에서 같은 역할을 수행하지만
map() 내에서 새로운 배열을 리턴하기 때문에 각각 프로토타입 함수의 역할이 다른 것입니다.
함수의 역할에 맞추어 구현한다면
질의자님이 요구하시는 성능의 문제도 적절한 답이 되지 않을까 싶어요.
"원본을 가지고 수정한다면 굳이 map() -새로운 배열을(내부에서 생성하고) 리턴하는- 에 대한 오버헤드 없이
forEach()로 가능하겠죠."
이부분을 이야기하는부분이고 실제 사용자와 개발자가 원하는 결과값은 동일하나 그 상황에서 제가 일부 보아온 코드들은 map으로 짠 코드들을 일부 목격이되서
성능차이부분에서 비교를 문의 드리는 부분입니다.
- 불변성, 불변 객체, 순수함수
등등..
여러가지 이유로 상황에 맞게 쓰이겠죠.
/Vollago