JS 중급 | 배열 메서드 2 (sort, reduce)

🚀 오늘의 학습 목표

• arr.sort
• arr.reduce
  
  

8. 배열 메서드2

8.1 arr.sort()

• 배열 재정렬
• 배열 자체가 변경되니 주의!
• 인수로 정렬 로직을 담은 함수를 받음

• 숫자열

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

arr.sort();

console.log(arr); 	// [1,2,3,4,5,6,7]

• 문자열

let arr = ['a','e','c','f','b','d'];

arr.sort();

console.log(arr); //["a","b","c","d","e","f"]

단, 아래와 같은 경우 정렬이 되지 않는다.

let arr = [13, 27, 6, 9];

arr.sort();

console.log(arr);	// [13,27,6,9]

❓ 왜 정렬이 안 될까?
정렬할 때 요소를 문자열로 취급하기 때문이다.

❓ 제대로된 정렬을 하려면?
값을 비교할 수 있는 함수를 전달해야 한다.
sort 는 함수를 인수로 받는다.

let arr = [13, 27, 6, 9];

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

arr.sort(fn);

console.log(arr); // [6,9,13,27]

a 와 b 값을 비교하여 값이 작은 수를 앞으로 보낸다.
위에서 만든 함수를 다시 한 번 보자.

function fn(a,b){
  console.log(a, b);
  return a - b;
}

/*   console.log(a, b); 
27 13
6 27
6 27
6 13
9 13
9 6
*/

27과 13 비교하면 13이 작기 때문에 13을 앞으로 보낸다. [13, 27, 6, 9]
6과 27을 비교하면 6이 작기 때문에 6을 앞으로 보낸다. [13, 6, 27, 9]
6과 13을 비교하면 6이 작기 때문에 6을 앞으로 보낸다. [6, 13, 27, 9]
9와 13을 비교하면 9가 작기 때문에 9를 앞으로 보낸다. [6, 9, 13, 27]
9와 6을 비교하면 6이 작기 때문에 순서는 변동이 없다. [6, 9, 13, 27]

이러한 함수를 만들기 보다는 Lodash 와 같은 라이브러리를 사용한다.

Lodash 라이브러리

_.sortBy(arr); 로 가능하다.
숫자, 문자, 객체 뭐든 원하는 기준으로 정렬한다.

🔗 Lodash 공식 사이트 바로가기

8.2 arr.reduce()

• 인수로 함수를 받음
  (누적 계산값, 현재값) => { return 계산값 };

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

let result = 0;
arr.forEach((num)=>{
  result += num;
})

console.log(result); // 15

이 작업을 한 번에 처리해 줄 수 있는 게 reduce() 다.

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

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

console.log(result); // 15

초기값은 옵셔널로 생략하면 배열의 첫번째 요소가 들어간다.

8.2 arr.reduceRight()

reduce 와 기능은 동일하나 우측 부터 계산한다는 차이가 있다.

---

🧑🏻‍💻 예시를 통해 쉽게 이해하기

예제 1. 배열에서 성인 이름만 출력해 보세요.

let userList = [
  {name : 'mike', age : 30},
  {name : 'jane', age : 22},
  {name : 'tom', age : 8},
  {name : 'harry', age : 50},
  {name : 'steve', age : 10},
  {name : 'sue', age : 25},
];

let result = userList.reduce((prev, cur) => {
  if(cur.age > 19){
    prev.push(cur.name);  
  }
  return prev;
}, []);

console.log(result); // ["mike","jane","harry","sue"]

예제 2. 나이의 합을 구해 보세요.

let userList = [
  {name : 'mike', age : 30},
  {name : 'jane', age : 22},
  {name : 'tom', age : 8},
  {name : 'harry', age : 50},
  {name : 'steve', age : 10},
  {name : 'sue', age : 25},
];

let result = userList.reduce((prev, cur) => {
  return (prev += cur.age);
}, 0);

console.log(result); // 145

예제 3. 이름이 세 자인 사람만 찾아 보세요.

let userList = [
  {name : 'mike', age : 30},
  {name : 'jane', age : 22},
  {name : 'tom', age : 8},
  {name : 'harry', age : 50},
  {name : 'steve', age : 10},
  {name : 'sue', age : 25},
];

let result = userList.reduce((prev, cur) => {
  if(cur.name.length === 3) {
    prev.push(cur.name);
  }
  return prev;
}, []);

console.log(result); // ["tom","sue"]

---