JS #8. 자바스크립트 Array 관련 메서드 총 정리 (map, filter, reduce, find, sort, find)

자바스크립트 배열을 다룰 때 자주 사용하는 메서드들을 한 번 정리 해 보고자 한다. 실제로 지난 일주일동안 자바스크립트 기반 알고리즘 문제를 풀 때나, 프론트엔드 로직을 구현하는 기술과제를 할 때 많이 찾아보고 많이 사용했던 메서드들을 위주로 살펴보고자 한다.

forEach

배열의 각 원소별로 순서대로 돌면서 함수를 실행한다. 

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

참고로 forEach 메서드는 Object에서는 사용할 수 없지만 Map이나 Set 객체에서도 사용할 수가 있다.

공식 문서를 보면 forEach를 통해 currentvalue와 index나 array까지 포함해서 callback 함수를 인자로 받을 수도 있다고 나와있다.

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

 

 

map

배열의 각 원소별로 지정된 함수를 실행한 결과로 새로운 배열을 반환한다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

map 메서드를 잘 사용하면 자바스크립트 코드를 정말 간결하게 만들 수 있는 것 같다. 예를 들어 배열의 모든 값에 2를 곱하고 3을 더하는 배열을 만들어야 한다고 생각해 볼 때, 무식한(?) 방법과 map 메서드를 쓰는 방법은 차이가 많이 난다.

// 무식한 방법

const arr = [1,2,3,4,5];
const newArr = [];

for(const el in arr) {
    const newEl = el*2 + 3;
    newArr.push(el);
}

// map을 쓰면

const arr = [1,2,3,4,5];
const newArr = arr.map(el => el*2 + 3);

 

filter

지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환한다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

이 역시 기존에 나는 임시로 새로운 배열을 만들고 반복문을 하나 돌리면서 조건문을 추가해 주었는데 그 둘을 한꺼번에 할 수 있는 메서드가 바로 filter이다. 사소하지만 이러한 차이가 코드 퀄리티를 결정한다고 생각한다.

 

reduce

누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 (누산된) 한 값으로 줄도록 함수를 적용한다.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

배열의 합을 구해야 할 때 가장 유용하게 사용할 수 있는 메서드가 아닐까 싶다. 또한 배열의 최댓값을 구하거나 최솟값을 구할 때도 사용할 수 있다. 

const array = [1,9,65,42,10,24];

// MaxValue
const max = array.reduce((prev, cur) => {
    return prev > cur ? prev : cur
});

// MinValue
const min = array.reduce((prev, cur) => {
    return prev < cur ? prev : cur
});

 

sort

배열의 원소를 알파벳 순으로, 또는 지정된 함수에 따른 순서로 정렬한다. 모든 원소를 문자열로 취급해 사전적으로 정렬한다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

 

숫자나 문자의 경우 크기순, 사전순으로 정렬할 수 있으며 그 외에 파라미터에 compareFunction을 넣으면 그 조건에 맞춰서 sort()를 할 수도 있다. 이는 객체로 이루어진 배열을 정렬할 때 유용하게 사용할 수 있다. 아래 예제는 Object의 band 프로퍼티에 따라 배열을 정렬한 것이다.

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

function compare(a, b) {
  // Use toUpperCase() to ignore character casing
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* returns [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

 

find

배열에서 주어진 조건을 만족하는 첫 번째 요소의 값을 반환한다. 없으면 undefined를 반환한다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

 

앞서 설명한 여섯 개 이외에도 자바스크립트 배열 관련 메서드는 훨씬 많다. 실제로 내가 지난 시간동안 자주 썼던 메서드 위주로 정리하였고 더 관심있는 분은 공식문서에서 다양한 메서드를 찾아보고 사용해 보길 바란다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array

 

참고자료

1. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
2. http://blog.302chanwoo.com/2017/08/javascript-array-method/
3. https://programmingsummaries.tistory.com/108
4. https://www.sitepoint.com/sort-an-array-of-objects-in-javascript/