[JavaScript] 배열 메서드 종류 (filter, forEach, map, reduce, sort)

Array methods

JavaScript에는 배열을 다루는 여러 가지 유용한 메서드들이 많다.

자주 쓰이는 문법들이기도 하니까 한번쯤 정리할 필요성을 느꼈다.

 

1. Array.prototype.filter()

배열 요소들 중 콜백 함수의 조건을 만족하는 요소들만 모아 새로운 배열을 생성한다.

• callback 함수는 결과값이 true면 요소를 유지하고 false면 버린다.
• 필터링된 새로운 배열을 반환한다. 필터링된 요소가 없다면 빈 배열을 반환한다.

선언

arr.filter(callback(element, [index], [array]) {
...
}, [thisArg])

// element: 처리할 현재 요소
// index: 처리할 현재 요소의 인덱스 [Optional]
// array: filter()를 호출한 배열 [Optional]
// thisArg: callback을 실행할 때 this 값 [Optional]

예시

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

console.log(result); // ["exuberant", "destruction", "present"]

 

2. Array.prototype.forEach()

주어진 함수를 배열 요소 각각에 대해 오름차순으로 한 번씩 실행한다.

• 메서드의 반환값은 undefined다.
• ES6부터 Map과 Set에서도 forEach를 지원한다.
• forEach는 배열을 변형하지 않는다. 그러나 callback 함수가 변형할 수는 있다.

선언

arr.forEach(callback(currentValue, [index], [array]) {
...
}, [thisArg])

// currentValue: 처리할 현재 요소
// index: 처리할 현재 요소의 인덱스 [Optional]
// array: forEach()를 호출한 배열 [Optional]
// thisArg: callback을 실행할 때 this 값 [Optional]

예시

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

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

/*
  "a"
  "b"
  "c" 
*/

 

3. Array.prototype.map()

배열 내의 모든 요소마다 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

• 함수를 단순히 적용하는forEach와 달리 map은 같은 길이를 가진 새로운 배열을 생성한다.

선언

arr.map(callback(currentValue, [index], [array]) {
...
}, [thisArg])

// currentValue: 처리할 현재 요소
// index: 처리할 현재 요소의 인덱스 [Optional]
// array: map()를 호출한 배열 [Optional]
// thisArg: callback을 실행할 때 this 값 [Optional]

예시

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

const map1 = array1.map(x => x * 2);

console.log(map1); // [2, 8, 18, 32]

 

4. Array.prototype.reduce()

배열의 각 요소마다 주어진 함수를 실행하여 누적된 하나의 결괏값을 반환한다.

• 계산 결과의 누적 값을 반환한다.
• 선언은 복잡해 보이지만 실제로 사용해보면 크게 어렵지 않다.

선언

arr.reduce(accumulator, currentValue, index, array) {
  return calculatedResult
}, initialValue)

// accumulator(누산기): 콜백의 반환값을 누적. initialValue가 존재하면 초기값은 intialValue
// currentValue: 처리할 현재 요소
// index: 처리할 현재 요소의 인덱스. initialValue가 존재하는 경우 1부터 시작 [Optional]
// array: reduce()를 호출한 배열 [Optional]
// initialValue: 초기값. 최초 호출에서 값을 제공함 [Optional]

예시

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 10); // 16

// arrow function
var total = [0, 1, 2, 3].reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  10
); // 16

 

5. Array.prototype.sort()

배열의 요소를 정렬한 후 정렬된 배열을 반환한다.

• compare 함수가 없으면 각 요소를 문자열 변환하여 유니 코드 값에 따라 정렬한다.
• 정렬된 새 배열을 반환하는게 아닌, 기존의 배열을 정렬하여 반환하는 것을 주의해야 한다.
• compare 함수를 지정하면 아래의 값 중 하나가 반환된다.
  • 첫 번째 인수가 두 번째 인수보다 작을 경우: 음수
  • 두 인수가 같을 경우: 0
  • 첫 번째 인수가 두 번째 인수보다 클 경우: 양수 

선언

arr.sort([compareFunction])

compare함수 형식

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

예시

var fruit = ['오렌지', '바나나', '체리'];
fruit.sort(); // 바나나, 오렌지, 체리

var score = [4, 11, 2, 10, 3, 1]; 
score.sort(); // 1, 10, 11, 2, 3, 4 (오류: 숫자가 문자열로 변환된 후 정렬됨)

score.sort(function(a, b) { 
    return a - b; // 1, 2, 3, 4, 10, 11 (오름차순)
});

score.sort(function(a, b) {
    return b - a; // 11, 10, 4, 3, 2, 1 (내림차순)
});

compare 함수에서 a - b는 오름차순, b - a는 내림차순 정렬을 의미하게 된다.

 

참조

• developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4_%EB%A9%94%EC%84%9C%EB%93%9C