/ STUDY

Array 관련 함수 정리 (Sort, Reduce)

목차

Sort

Array를 정렬해주는 기능을 한다. MDN 문서에서 자세한 내용을 확인할 수 있다.

  • 기본적인 형태는 Array.sort("function")이다.

오름차순, 내림차순

이게 단어가 오름차순, 내림차순이라고 말하면 순간 헷갈리게 된다. 그래서 계속해서 보고 완전히 외워놓는 것이 좋다.

1 2 3 4 5 6 7 8 9 // 오름차순
9 8 7 6 5 4 3 2 1 // 내림차순

원리

우선 그냥 .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]

대부분의 경우, Sort Function을 통해 원하는 정렬 기능을 구현할 것이다. 간단하게 원리는 Sort Function이 Array Elemnet에서 2개의 args를 받는다.

  • f(a,b) < 0 : a가 앞으로
  • f(a,b) > 0 : b가 앞으로

f = (a-b)의 경우, b가 작은 경우 계속 앞으로 가게 되므로 오름차순으로 정렬될 것이다.

실전 예시

프로젝트에서 마감일 순으로 할 일들을 분류해야할 때 사용한 코드이다.

function date_ascending(a, b) {
  var dateA = new Date(a["duedate"]).getTime();
  var dateB = new Date(b["duedate"]).getTime();
  return dateA > dateB ? 1 : -1;
}
filteredTodoLists.sort(date_ascending);

a의 duedate가 b의 duedate보다 클 경우, 1을 return하기 때문에 작은 duedate Elemnet들이 앞으로 정렬될 것이다.

Reduce

reduce 함수는 map처럼 Array를 반복하면서 코드를 진행시킨다. MDN 문서에서 자세한 내용을 확인할 수 있다.

  • 기본적인 형태는 array.reduce(reducer(=함수), initialValue)이다.

reducer 함수

reducer 함수는 4가지 인자를 받는다.

  1. accumulator

    함수가 실행될 때마다 Return한 값. 즉 매 함수가 연산될 때마다 반환되는 결과 값이다.

  2. currentvalue

    반복을 실행했을 때, 이번 회차에서 처리할 값.

  3. currentIndex

    이번 회차가 몇번째인지에 대한 정보

  4. array

    반복이 진행되는 원래 배열에 대한 정보

원리

accumulator에 initialValue가 존재한다면 initialValue가 들어가고, 아니면 Array[0]가 들어간다.

이후에 Array의 다음 요소에서 또 reducer함수를 실행시킬텐데 이 때, Array[1]이 currentvalue가 되는 것이다. 이 currentvalue에 어떠한 처리를 해서 accumulator에 추가할지를 reducer 함수에서 구현하면 된다.

실전 예시

프로젝트에서 완료한 할 일들의 카테고리별 시간 합산 데이터를 구하기 위해 사용한 코드이다.

function reducer(acc, cur) {
  let s = cur.subject;
  if (s in acc) {
    acc[s] += cur.studyTime;
  } else {
    acc[s] = cur.studyTime;
  }
  return acc;
}

let counted = todoLists.reduce(reducer, {});

할 일 목록은 객체로 구성된 배열이라서 map 함수를 활용해서 subject가 있는지 판단하고 있다면 시간을 더하는 연산을 하기 위해서 빈 배열을 하나 선언한 다음 그것을 활용해서 구현해야 될 것 같다는 생각이 들었는데, reduce를 활용하면 더 쉽게 구현할 수 있는 것 같았다.

구현 과정은 단순하게 이미 subject가 있으면 존재하는 subject의 studyTime에다가 더하고 없다면 subject key값에 현재 studyTime을 추가해서 전달하기. 이런 방식을 통해 전체 완료한 할 일 목록을 정리할 수 있었다.