javascript 자주쓰는 Array 메소드 1편(forEach, map)

개발을 하면서 정말 많이 사용되는 녀석들... 바로 array 메소드들이다.

매번 필요한 기능이 있을 때마다 구글링을 하게 되는데

array 메소드의 경우 하도 자주 쓰니 이참에 정리를 해보려고 한다.

 

이번 포스팅의 경우 배열의 원소 하나하나에 접근하는 공통점을 가진

forEach와 map에 대해서 차이점을 정리하겠다.

 

forEach

배열 안에 존재하는 요소에 하나하나 접근을 하여 원하는 로직을 구현할 수 있다.

함수 인자로는 순서대로 원소, 인덱스, 원본배열 이다.

(사실 인자는 보통 첫번째만, 기껏해야 인덱스 까지만 사용되더라... map도 마찬가지고)

간단히 숫자들로 구성된 배열들의 합을 구한다면 아래와 같이 구현하면 되겠다.

let numArr = [1,2,3,4,5]
let sum = 0

// number는 numArr의 원소가 하나하나 대입된다
numArr.forEach(number => {
  sum += number
})

console.log(sum) // 15

 

인덱스를 사용한 예제를 매우 간단히 구현해본다면.. 몇번째 인덱스의 값이 true 인지 찾아보는 예제다.

let boolArr = [false, false, true, false]

boolArr.forEach((item, idx) => {
  if (item) {
    console.log(`${idx}번째 값이 true다!`)
  }
})

// 2번째 값이 true다!

기존의 기본적인 for 문을 다룰 줄 안다면 어렵지 않을 것이다.

 

map

forEach 와 마찬가지로 배열의 요소 하나하나에 접근하는 것은 마찬가지이나

가장 중요한 것은 로직의 수행 결과로 새로운 배열을 return 하는 메소드이다. (즉 기존 배열과 길이는 같을 것이다)

기존 배열의 요소보다 각각 2배씩 큰 배열을 만든다면

let numArr = [1,2,3,4,5]

let bigArr = numArr.map(number => {
  return number * 2
})

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

 

간단한 예를 들어서 forEach와 map을 설명한 바람에 굉장히 단순해 보이지만서도

개발을 하면서 빼놓을 수 없는 매우 중요한 메소드들이다.

간략히 요약하면 forEach와 map의 차이는 새로운 배열을 return 하느냐 안하느냐로 기억하자!