[TIL]Javascript - Array Method 4. Sorting Arrays

 .sort([compareFunction]) 

• 배열의 원소를 정렬
  • ASCII 코드 순으로 정렬됨
    • 알파벳 순
    • 숫자 순 - 본 숫자의 크기가 아닌 앞자리 수의 크기를 기준으로 정렬

var arr = [ 100, 10, 200, 700, 8, 300, 9, 7 ];
arr.sort();
console.log( arr );  // [10, 100, 200, 300, 7, 700, 8, 9]

• 조건 순으로 정렬
  •  parameter
    • compareFunction : 비교 기능
      • 정렬의 순서를 정의하는 조건
      • 인수에 따라 음수, 0, 양수 값을 반환
• 결과값이 0이면 이동 없음
• 결과가 양수이면 b는 a 앞으로 정렬
  • 예) a = 100, b = 10이면 a - b = 100 - 10 = 90(양수)
  • 10, 100 순으로 정렬

/* 오름차순으로 정렬 */
var arr = [ 100, 10, 200, 700, 8, 300, 9, 7 ];
arr.sort(( a, b ) => a - b);
console.log( arr );    // [7,8,9,10,100,200,300,700]

• 결과가 음수이면 a는 b 앞으로 정렬
  • 예) a = 100, b = 10이면 b - a = 10 - 100 = -90(음수)
  • 100, 10 순으로 정렬

/* 내림차순으로 정렬 */
var arr = [ 100, 10, 200, 700, 8, 300, 9, 7 ];
arr.sort(( a, b ) => b - a)
console.log( arr );    // [700,300,200,100,10,9,8,7]

 

 

 .reverse() 

• 배열을 역정렬함
• 원본 배열을 변형함

let arr = [1, true, "JavaScript", "자바스크립트"];
arr.reverse()  
console.log( arr );  // ["자바스크립트", "JavaScript", true, 1]

 

 

 .reduce( calllbackfunction[ , initialValue] ) 

• 배열의 값을 한 개로 '줄인다'
  • 함수의 누적 결과인 단일 값을 반환
• 빈 배열 요소에서는 함수를 실행하지 않음
• 원래의 배열을 변경하지 않음
• parameter
  • calllbackfunction (accumulator, currentValue, currentIndex, arr) 
    • accumulator : 누산기. 콜백 반환값을 누적. initialValue이 있는 경우엔 initialValue의 값  (Required) 
    • currentValue : 현재 처리할 요소 (Required) 
    • currentIndex : 현재 처리할 요소의 인덱스 (Optional)
    • arr : reduce()를 호출한 배열 (Optional)
  • initialValue : callback의 최초 호출에서 첫 번째 인수에 제공 할 값. 초기값 = 첫 번째 요소(Optional)
• 반복되는 작업을 하는 모든 메서드(filter, sort, includes 등)를 대용  할 수 있음

let arr = [150, 10, 30];
let reducer = arr.reduce(myFunc);

function myFunc(total, num) {
  console.log (total);  
  console.log (num);   
  return total - num;   
}
// 1번째 호출 150 - 10 = 140 (반환값) 
// 2번째 호출 140 - 30 = 110 (반환값)

console.log (reducer);  // 110

let arr = [1, 2, 3, 4];
let reducer = (accumulator, currentValue) => accumulator + currentValue;
console.log(arr.reduce(reducer));    // 10

// 1. reduce(reducer) : callback함수 "reducer"로 누산하겠다.
// 2. currentValue : initialValue 가 없으므로 첫 번 째 값인 1이 먼저 옴
// 1 + 2 = 3 + 3 = 6 + 4 = 10

let arr = [1, 2, 3, 4];
let reducer = (accumulator, currentValue) => accumulator + currentValue;

console.log(arr.reduce(reducer, 3));   // 3
// 1. reduce(reducer) : callback함수 "reducer"로 누산하겠다.
// 2. currentValue : initialValu가 3이므로 첫 번 째 값인 3이 먼저 옴
// 3 + 1 = 4 + 2 = 6 + 3 = 9 + 4 = 13

/* 홀수, 짝수로 배열 */
let oddEven = [1, 2, 3];
result = oddEven.reduce((accumulator, current) => {
  accumulator.push(current % 2 ? '홀수' : '짝수');
  return accumulator;
}, []);
console.log(result); // ['홀수', '짝수', '홀수']
// 1번 호출 : 1 % 1 = 1 (홀)
// 2번 호출 : 2 % 2 = 1 (짝)
// 3번 호출 : 3 % 3 = 1 (홀)

 

 

🖥함께 본 영상

 

 

 

📚참고 자료

W3Cschool - js

https://www.w3schools.com/jsref/ 

MDN Web Doc - "Array"

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array