8. 배열 메소드(2) - sort, reduce

arr.sort() : 배열을 재정렬

• 기존 배열 자체가 변경됨

let arrNum = [1, 5, 3, 4, 2];
let arrStr = ['d','e','a','b',];
let arr = ['d','e','1','2', 1, 2];
arrNum.sort();
arrStr.sort();
arr.sort();

console.log(arrNum);  // [1,2,3,4,5]
console.log(arrStr);  // ["1","2","d","e"]
console.log(arr);  // ["1",1,"2",2,"d","e"]

• 정렬 시 배열의 요소를 문자열로 취급함
  • 10보다 3이 크다고 판단
  • 인수로 정렬 로직을 담은 함수를 전달해야함

let arrNum2 = [3, 12, 9, 80];
arrNum2.sort();

console.log(arrNum2);  // [12,3,80,9]

• 오름차순 정렬 로직
  • a와 b를 받아서 a-b실행
  • a-b = 양수 : 자리 그대로
  • a-b = 음수 : a와 b의 자리 바꿈

let arrNum2 = [3, 12, 9, 80];

function fn(a, b){
  console.log(a, b, ` a-b = ${a-b}`);
  return a-b;
}
arrNum2.sort(fn);

console.log(arrNum2);
/*
12 3 " a-b = 9"
9 12 " a-b = -3"
9 12 " a-b = -3"
9 3 " a-b = 6"
80 9 " a-b = 71"
80 12 " a-b = 68"
[3,9,12,80]
*/

• fn 로직은 b-a로 설정하면 내림차순으로 정렬 가능

Lodash

https://lodash.com/

• 유용한 기능을 모아놓은 라이브러리
• 숫자, 문자, 객체를 원하는 기준으로 정렬 가능
• _.sortBy(arr);와 같이 사용

arr.reduce()

• 배열을 돌면서 원하는 작업을 하고 최종값을 반환함
• (누적 계산값, 현재값) => { return 계산값 };

const result2 = arr.reduce((prev, cur)=>{
  return prev + cur;
}, 0);

console.log('result2 = ', result2);
// "result2 = " 15

- prev = 현재까지 계산되어진 누적값
- cur = 현재값
- 두 번째 인수로 초기값 설정 (선택)

reduce() 실습

• map, filter 사용하지 않고 reduce를 사용해서 배열 반환하기

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

// 1. 이름만 뽑아서 배열 만들기
const nameList = userList.reduce((prev, cur) => {
  prev.push(cur.name);
  return prev;
}, []);
console.log(nameList);
// ["Mike","Tom","Jane","Sue","Harry","Steve"]

// 2. 성인인 사람들 이름 배열
const adultList = userList.reduce((prev, cur) => {
  if(cur.age > 19){
    prev.push(cur.name);
  }
  return prev;
}, []);
console.log(adultList);
// ["Mike","Jane","Sue","Steve"]


// 3. 나이 총합
const ageSum = userList.reduce((prev, cur) => {
  prev += cur.age;
  return prev;
}, 0);
console.log(ageSum);
// 161


// 4. 이름이 3글자인 사람 배열
const three = userList.reduce((prev, cur) => {
  if(cur.name.length === 3){
    prev.push(cur.name);
  }
  return prev;
}, []);
console.log(three);
// ["Tom","Sue"]

arr.reduceRight()

• reduce()과 기능이 동일하지만, 배열의 우측부터 연산함

---

map, filter, reduce 등의 함수를 알맞게 사용할 수 있어야 함.

• map : 배열 각 요소에 대하여, 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환
• filter : 배열 각 요소에 대하여, 주어진 함수의 결과값이 true인 요소를 모아 새로운 배열을 반환
• reduce : 배열 각 요소에 대하여, reduce 함수를 실행하여 하나의 결과값으로 반환