[JavaScript] 배열 메소드 2 : sort(), reduce()

arr.sort() : 배열 재정렬

-주의! 배열 자체가 변경됨

-인수로 정렬 로직을 담은 함수를 받는다.

let arr = [1, 5, 4, 2, 3];
let arr2 = [a, c, e, d, b]

arr.sort();
arr2.sort();

console.log(arr); // [1, 2, 3, 4, 5]
console.log(arr2); // [a, b, c, d, e]

 

let arr = [27, 8, 5, 13];

arr.sort();

console.log(arr); // [13, 27, 5, 8]

숫자를 정렬했는데 작은 숫자부터 정렬되지 않고 뒤죽박죽으로 결과가 나왔다.

이것은 정렬시 요소를 문자열로 취급하기 때문에 1과 2로 시작하는 13과 27이 앞으로 온 것이다.

 

제대로 정렬하기 위해서는 값을 비교하는 함수를 전달해야한다.

sort()는 함수를 인수로 받는다.

let arr = [27, 8, 5, 13];

function fn(a,b){ //fn함수
	return a-b;
}

arr.sort(fn); //fn 함수 전달

console.log(arr); // [5, 8, 13, 27]

a,b요소를 전달하고 두 요소의 크기를 비교해서 양수,0,음수를 판단한다.

a-b 하였을 때 a가 b보다 작으면 음수를 리턴하고 a를 앞으로 보낸다.

a와 b가 같으면 0을 리턴하고 자리는 바뀌지 않는다.

a가 b보다 크면 양수를 리턴하고 b를 앞으로 보내 정렬한다.

 

위 코드는 아래 코드처럼 쓸 수 있다.

let arr = [27, 8, 5, 13];

arr.sort((a,b) => { 
	return a-b;
});

console.log(arr); // [5, 8, 13, 27]

 

보통 함수를 만들어 놓고 사용하기보다는 유용한 기능을 모아놓은 Lodash와 같은 라이브러리를 사용한다.

Lodash를 이용하면 _.sortBy(arr);로 간단히 정렬이 가능하다.

어떤 로직이 들어가있는지 신경쓰지 않아도 되고 숫자,문자,객체 등 원하는 기준으로 정렬한다.

Lodash는 실무에서 많이 사용하니 아래 공식 사이트를 참고해 알아두도록 하자.

https://lodash.com/ 

Lodash

 

arr.reduce(이전값, 현재값) : 배열의 모든 수 합치기

-인수를 함수로 받는다.

 

배열의 모든 수를 합치는 메소드로는 for, for of, forEach가 있다.

let arr = [1, 2, 3, 4, 5];

let result = 0;

arr.forEach(num => {
  // result = result + num;
  result += num;
}

console.log(arr); // 15

위와 같은 작업을 한 번에 처리하는 메소드가 바로 reduce()이다.

reduce()는 배열을 돌면서 원하는 작업을 하고 최종값을 반환한다.

let arr = [1, 2, 3, 4, 5];

let result = 0;

const result = arr.reduce(prev, cur)=> { // prev : 누적된 계산값, cur : 현재값
  return prev + cur;
}, 0) // 초기값 0

console.log(result); // 15

이전값(이전 인덱스가 아닌 누적된 계산값)과 현재값을 더해 리턴하고

초기값 0은 옵션이므로 안써도 무방하다. 

 

1. 초기값 0 + 1 = 1

2. 1 + 2 =3

3. 3 + 3 = 6

4. 6 + 4 = 10

5. 10 + 5 = 15

 

이번에는 좀 더 실용적인 예제를 살펴보자.

let userList = [
  { name: "Mike", age: 30},
  { name: "Tom", age: 10},
  { name: "Jane", age: 27},
  { name: "Sue", age: 26},
  { name: "Harry", age: 42},
  { name: "Steve", age: 60},
];

let result;

//console.log(result);

 

나이를 판단하여 성인만 뽑아 새로운 배열을 만들어보자.

let userList = [
  { name: "Mike", age: 30},
  { name: "Tom", age: 10},
  { name: "Jane", age: 27},
  { name: "Sue", age: 26},
  { name: "Harry", age: 42},
  { name: "Steve", age: 60},
];

let result = userList.reduce((prev, cur)=> {
  if(cur.age > 19) {
     prev.push(cur.name);
  }
  return prev;
}, []) //초기값 : 빈 배열

console.log(result);

초기값은 빈 배열이고 만약 19살보다 age가 크다면 배열에 push해주고 리턴한다.

만약 19살보다 작다면 지금까지 만든 배열을 그대로 리턴한다.

실행 결과는 아래와 같다.

["Mike", "Jane", "Sue", "Harry", "Steve"]
0: "Mike"
1: "Jane"
2: "Sue"
3: "Harry"
4: "Steve"

19세 이상 성인들의 이름만 리턴되었다.

 

참고 및 출처 : 유투브 코딩앙마 https://youtu.be/4_WLS9Lj6n4