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
JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.
developer.mozilla.org