자바스크립트의 몇 가지 배열 순회와 관련된 매서드를 정리해본다.

어떤 매서드를 사용할 때 처음 사용하거나 잘 기억나지 않으면 MDN을 찾아보게 된다. 마찬가지로 배열 매서드도 MDN을 살펴볼 수 있다. 이 때, 중요하게 생각해야 할 점이 있다.

1. 매서드가 인자로 무엇을 받는지
2. 매서드가 반환하는 것은 무엇인지.

매서드들도 결국 함수임으로 argument 와 return value 가 무엇인지 파악하는 것이 가장 중요하고, 사실 그것만 파악해도 함수를 사용하는데 무리가 없을 것이다.

1. myArray.forEach

콜백함수를 인자로 받아 return 값 없이 배열을 순회하며 콜백함수 내에서 어떤 로직을 실행하면 된다. 아래는 코드는 MDN 자료.

myArray.forEach(callback(currentvalue[, index[, array]])[, thisArg])
// currentValue: 처리할 현재 요소
// index: 처리할 현재 요소의 index(선택적)
// array: forEach()를 호출한 배열(선택적)
// thisArg: callback을 실행할 때 this로 사용할 값(선택적)
// 반환: undefined

사실 sksms 지금까지 map 이나 reduce 를 사용할 수 있는 상황에서도 forEach만 주구장창 사용해서 익숙한 함수이다. 사실 for 문을 사용해 배열을 순회하는 로직과 차이가 없다. 그래서 차라리 여기서는 for 문으로 배열을 순회하는 것과 forEach 로 순횐하는 것의 차이를 알아보았다.

출처: https://alligator.io/js/foreach-vs-for-loops/

둘 중 무엇을 선택할지는 사실 개발자 마음이다. 하지만 선택을 하기 위해 차이점을 알아보자.

1. forEach 는 콜백함수를 사용하기에 변수의 scope를 forEach 순회 내부로 제한할 수 있다.
2. for 문을 사용할 때는 i 와 같은 increment variable을 사용하게 되는데 i 와 같은 변수 사용에 있어서 실수가 발생할 수 있다.예를 들어 i 범위나 배열 밖을 참조하는 등의 실수가 발생할 수 있다. 예를들어 그러나 forEach 를 사용하면 따로 그런
3. 누가봐도 가독성은 forEach 가 더 낫다. 접근할 때 myArray[i] 가 아니라 myElement 와 같은 변수로 접근할 수 있다.

위 세가지만 보면forEach 가 압승인 것을 볼 수 있다. 하지만! for 이 더 유용한 경우가 분명 있다.

1. 조건에 따라 배열 순회를 중간에 멈춰야 할 경우 for 는 조건과 break 로 for 문을 빠져나올 수 있다. 다시 말해 성능상 우위를 가지게 된다.

억지로 forEach 의 콜백함수를 중간에 중단시키는 방법이 있기는 하다. 링크 참조. 그러나 그런 의도로 만들어진 forEach 가 아니며 코드가 못생겨진다.

또한 some() 이나 every() 와 같은 배열 매서드를 사용해도 순회 중간에 멈출 수 있도록 구현할 수 있다.

2. myArray.map

콜백함수를 인자로 받아 myArray 와 동일한 크기의 배열을 반환한다. 아래 코드는 MDN 자료.

myArray.map(mapFn[, thisArg])
// mapFn: 콜백 함수
// mapFn의 인자는 차례대로 currentValue, index(선택), array(현재 호출된 배열)이다.

const numbers = [1, 2, 3, 4, 5];
const doubles = numbers.map( number => number*2 ) // doubles: [2, 4, 6, 8, 10]

3. myArray.reduce

콜백함수를 인자로 받아 하나의 결과 값을 반환한다. 아래 코드는 MDN 자료.

myArray.reduce(callback[, initialValue])
// 콜백 함수는 4개의 인자를 가진다
// accumulator: 누산기. 콜백 함수의 반환값을 누적하며 초깃값으로 정해줄 수 있다.
// currentValue: 처리할 현재 요소
// currentIndex(선택적): 처리할 현재 요소의 인덱스
// array(선택적): reduce 함수를 호출한 배열
// initialValue(선택적): 콜백함수 최초 호출시 누산기의 값. 비워둘 경우 배열의 첫 번째 요소 사용. 빈 배열에서 초깃값 없이 reduce를 호출할 경우 오류 발생.

처음 썼을 때 조금 헷갈렷었던 함수이다. 예제를 하나 남긴다!

function find_longest_word(arr) {
  return arr.reduce((longestWord, currentWord)=>{
    if(longestWord.length < currentWord.length) return currentWord;
    return longestWord;
  })
}

reduce 함수 사용에 주의할 점이다. 반환 값으로 누산기 값을 주어야 한다. 위 예제의 경우 가장 긴 단어를 누산기 값으로 반환하고 있다. 더 쉬운 예제를 생각해보면 누산기라는 단어 듯 그대로 배열의 모든 숫자를 더할 때를 생각해도 편하다.

결론

퍼포먼스 기준, 가독성 기준 등 여러 기준에 따라 필요한 적절한 함수를 골라서 사용하면 된다. 배열 순회와 관련된 함수는 그 외에도 filter , findIndex 등이 있다. 순회가 아니더라도 배열과 관련된 매서드가 많으며 아래 이 MDN 링크에서 확인 할 수 있으니 상황에 맞게 골라 쓰자!