배열 메소드2 (sort, reduce) - 자바스크립트 중급 강좌 #8

자바스크립트 중급 강좌 #8 - 배열 메소드2 (sort, reduce)

 

arr.sort() : 배열 재정렬

- 배열을 재정렬해준다.

- 배열 자체가 변경되니 주의해야 한다.

- sort() 는 함수를 인수로 받기 때문에 다양한 작업이 가능하다.

- 순서대로 정렬해준다.

- 위 예시에서는 정렬이 제대로 이루어지지 않았다. 13, 27, 5, 8 을 숫자가 아닌 문자로 정렬했기 때문이다.

- 제대로 정렬하기 위해, 값을 비교해줄 수 있는 함수를 인수로 전달해주었다.

- sort의 인수로 사용된 함수를 먼저 살펴보자.

arr 를 돌면서 두 수 (a, b)를 비교해준다. 

a - b 가 양수이면 a 가 더 큰 값이므로 순서는 바뀐다. 

a - b 가 음수이면 b 가 더 큰 값이므로 순서는 바뀌지 않는다.

이런 식으로 요소를 하나씩 비교하면서 순서를 바꾸는 식으로 정렬이 진행된다.

- 함수의 실행 과정을 좀더 자세하게 살펴보자.

27과 8을 비교하면 a-b 가 양수이므로 (27이 더 큰 값이므로) 순서를 바꾼다. // [27, 8, 5, 13] => [8, 27, 5, 13]

다음으로 8과 5를 비교하면 a-b 가 양수이므로 (8이 더 큰 값이므로) 순서를 바꾼다. // [8, 27, 5, 13] => [5, 8, 27, 13]

다음으로 5와 13을 비교하면 a-b가 음수이므로 (5가 더 작은 값이므로) 순서는 바뀌지 않는다. // [5, 8, 27, 13] 그대로

다음으로 8과 13을 비교하면 a-b가 음수이므로 (8이 더 작은 값이므로) 순서는 바뀌지 않는다. // [5, 8, 27, 13] 그대로

다음으로 27과 13을 비교하면 a-b가 양수이므로 (27이 더 큰 값이므로) 순서를 바꾼다. // [5, 8, 27, 13] => [5, 8, 13, 27]

그래서 최종적으로 정렬된 arr는 [5, 8, 27, 13] 이다.

 

Lodash 라이브러리

- 위와 같이 함수를 만들어서 사용하면 복잡하기 때문에 보통은 Lodash 같은 라이브러리를 사용한다.

- _.sortBy(arr)로 숫자든 문자든 객체든 원하는 기준대로 정렬이 가능하다.

- https://lodash.com/ 에서 자세한 내용 확인 가능.

 

arr.reduce()

forEach 로 배열의 모든 수 합치기 

- 이 작업을 한번에 처리할 수 있는 것이 reduce 이다. reduce는 배열을 돌면서 원하는 작업을 수행하고 최종값을 반환한다. 

reduce 로 배열의 모든 수 합치기 

- reduce는 인수로 함수를 받는다. prev : 누적된 계산값 / cur : 현재값

- 초기값은 옵션이기 때문에 안 써도 무관하다. 초기값을 설정해주지 않으면 첫번째 요소가 들어간다. 

- 위 예시를 순서대로 설명해보자면, 초기값이 0이므로 첫번째 prev 값도 0이다. 첫번째 cur (현재값) 은 1이다.

0+1로 두번째 prev는 1이고, cur는 2이다. 

1+2로 세번째 prev는 3이고, cur는 3이다.

3+4로 네번째 prev는 6이고, cur는 4이다.

6+4로 다섯번째 prev는 10이고, cur는 5이다.

이렇게 배열을 모두 다 돌고나면, 최종 result 는 마지막 prev와 cur의 합인 15가 된다.

- 이전 예시에서 초기값을 0으로 둔 것과 달리, 초기값을 100으로 설정해보자.

100 에다가 1 더하고, 거기에 2를 더하고, 거기에 3을 더하고... 5까지 더해서 최종적으로 115가 된다.

 

map 이나 filter 대신 reduce를 활용해서 원하는 데이터만 뽑아내기

- userList에서 성인의 이름만 뽑아내는 예시이다.

- 빈 배열([])을 초기값으로 설정해주었다.

첫번째 prev는 빈 배열이고, cur (현재값) 는 Mike 이다. Mike의 age가 19 이상이므로, 빈 배열에 Mike를 추가한다.

두번째 prev는 ["Mike"] 이고, 이때의 cur는 Tom 이다. Tom의 age가 19 미만이므로, if 문의 작업을 수행하지 않고 prev 는 그대로 ["Mike"] 로 남는다.

세번째 prev는 여전히 ["Mike"]이고, 이때의 cur는 Jane이다. Jane의 age가 19 이상으므로, prev는 Jane의 이름을 추가한 ["Mike", "Jane"] 이 된다.

이런 식으로 userList의 배열이 끝까지 작업을 수행하여 조건에 맞는 유저들만 추려낼 수 있다.

- 이름이 세글자인 유저만 뽑아내는 예시이다.

+)

- reduceRight() : reduce와 동작법은 동일하다. 단, 배열 우측부터 연산을 진행한다.

- forEach, reduce, map, filter 등의 메소드를 상황에 맞게