[JS]forEach매서드와 map매서드의 차이

드디어 레플릿 문제를 다 풀었다. 수요일 오후4-5시?쯤 부터 풀기 시작한거 같은데 처음에는 술술 풀려서 괜찮은데...? 라고 속으로 생각한 내 자신 반성해😂
중반을 넘어가면서 오래걸리는 문제들이 하나 둘씩 나오기 시작했고 약 2일하고 반나절..? 걸쳐서 문제를 모두 풀수 있었다. 사실 30개가 넘는 문제를 온전한 내 힘으로 풀지는 못했기 때문에 풀면서 어려웠던 부분이나 헷갈렸던 개념들을 정리해보고자 한다.

array method

배열Javascript에서 배열을 쉽게 다룰 수 있는 메서드가 존재한다. 그리고 이것을 배열내장함수라고 부른다. 배열은 수많은 메서드를 갖고 있지만, 이번에는 많이 사용되는 forEach()와 map() 메서드에 대해서 알아보도록 하자.

forEach()

---

forEach()는 for문을 대체할 수 있는 메서드다. forEach()는 자신의 내부에서 반복문을 실행 한다.
즉, forEach()는 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야할 처리를 콜백 함수 로 전달받아 반복 호출한다.

콜백함수란? parameter (매개변수)를 함수로 받아서 쓸 수 있는데, 이때 그 함수를 콜백 함수라고 부른다.

const numbers=[1,2,3];
const powers = [];
numbers.forEach(x=>powers.push(x**2));
console.log(powers); //[1,4,9]

forEach()는 콜백 함수를 실행하는 중간에 반복을 탈출할 수 없으며, 새로운 배열 또한 반환하지 않는다. 또한, 원본 배열을 변경하지 않으며, 반환값은 항상 undefinded다.

map()

---

map()은 배열 안의 각 원소를 변환 할 때 사용되며, 이 과정에서 새로운 배열이 만들어 진다. map()도 forEach()처럼 파라미터로 콜백 함수가 온다.

const numbers=[1,2,3];
const mult = numbers.map(x=>x*2);
console.log(mult) // [2,4,6];

기존 배열을 수정하지 않고 새로운 배열을 만들어 내기 때문에 map()실행 후에도 기존 배열은 변함이 없다.

forEach와 map의 차이점

• 공통점 : 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
• 차이점
  • forEach() 아무 값도 반환하지 않는다.
  • map() 새로운 배열을 반환한다.

Assignment

1. moreThan100 함수를 구현해 주세요. (100보다 크거나 같으면, true / 100보자 작으면 false) 
2. formatDate 함수를 구현해 주세요. ( 'YYYY-MM-DD' -> 'YYYY년 MM월 DD일')

• map()을 이용한 풀이

const moreThan100 = nums => {
  const arr = nums.map(el => {
    if(el >= 100){
      return true
    } else {
      return false
    }
  });

  return arr;
}

const formatDate = dates => {
  const data = dates.map(el => {
    const dash = el.split('-');
    return `${dash[0]}년 ${dash[1]}월 ${dash[2]}일`
  });

  return data;
}

map()은 새로운 배열을 생성해주기 때문에 문제에 조건에 맞는 함수를 만들어서 map()의 parameter로 넣어주고, 새로운 배열을 반환한 변수(arr, data)를 최종 return 해줌으로써 원하는 값을 얻을 수 있었다.

• forEach()를 이용한 풀이

const moreThan100 = nums => {
  const arr = [];
  nums.forEach(el => {
    if(el >= 100){
      arr.push(true)
    }else{
      arr.push(false)
    }
  })  
  return arr;
}

const formatDate = dates => {
  const data = [];
  dates.forEach(el => {
    const dash = el.split('-');
    data.push(`${dash[0]}년 ${dash[1]}월 ${dash[2]}일`);
  })

  return data;
}

forEach()는 반환값이 없고, 내부에서 반복 실행 되는 것이기 때문에 빈배열을 미리 만들어 놓고, 설정한 함수 내부에서 빈배열에 값을 넣어주는 형태로 만들었다. 반복문을 통해 빈배열에 값을 넣고 최종적으로 그 배열을 다시 호출해주면 원하는 값을 얻을 수 있게된다.

마무리✨

배열의 메서드인 forEach와 map 모두 배열의 요소들을 순회한다는 공통점이 있어서 어떤 상황에서 어떤 메서드를 써야하는 것인지 헷갈렸었는데, forEach는 반환값이 없고 map은 새로운 배열을 반환한다 라는 차이점을 알게되어 필요에 따라 적절한 메서드를 사용할 수 있을 것 같다.
처음 레플릿 문제를 접했을 때, 문제에서 map메서드를 이용하라고 해서 forEach의 경우는 생각하지 않았는데 개념정리 후 forEach의 경우로 다시 문제를 풀어보니 더욱 둘의 차이점을 확실히 느낄 수 있었다.
map은 순회를 통한 새로운 값의 배열을 주고, forEach는 반복되는 동작만을 실행시켜준다는 것을 기억해야겠다!