상세 컨텐츠

본문 제목

[Javascript] Array sort

기술이 된 상상

by Indigo_Pure 2021. 4. 1. 17:08

본문

728x90
반응형

Array객체 sort 메소드

자바스크립트 Array의 내장함수 sort.

쉽게 정렬을 위해 사용할 수 있는 내장함수다.

arr.sort([compareFunction])

 

매개변수

compareFunction: 정렬 순서를 정의(Optional)

함수의 파라미터 값을 통해 전달된 인자를 비교하여 정렬의 순서를 정한다.

파라미터는 배열 내 요소 값 두 개가 주어진다.

function(a, b) {
    // 비교 순환 시작
    // 첫번째 순환
    // a: 배열의 두번째 인자
    // b: 배열의 첫번째 인자
    
    // 두번째 순환
    // a: 배열의 세번째 인자
    // b: 배열의 두번째 인자
    // ...
    
    // 마지막 순환
    // a: 배열의 마지막 인자
    // b: 배열의 마지막 직전 순서 인자   
}

 

함수를 정의하지 않으면 유니코드 코드포인트 값을 기준으로 정렬한다.

단순하게 설명하자면 숫자 배열[1, 5, 7, 10, 20, 90]을 compareFunction없이 실행하면 숫자를 스트링으로 변환하여 비교하기 때문에 [1, 10, 20, 5, 7, 90]이 된다.

// 예제
const arr =  [1, 5, 7, 10, 20, 90];
arr.sort();
console.log(arr);
// 출력: [1, 10, 20, 5, 7, 90];

 

compareFunction은 반환 값에 따라 순서를 정의할 수 있다.

  • 반환 값이 0보다 작으면 a를 먼저 b를 다음으로 순서를 정한다.
  • 반환 값이 0보다 크면 b를 먼저 a를 다음 순서로 정한다.
  • 반환 값이 0이면 순서를 바꾸지 않습니다.

 

반환 값에 따라 두 요소의 순서를 바꿀지를 알게 되면 비교 규칙을 세워 정렬할 수 있다.

배열의 데이터 타입에 따라 정렬하는 방법은 다음과 같다.

숫자 타입 배열 오름차순

const numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);
// 출력: [1, 2, 3, 4, 5]

숫자 타입 배열 내림차순

const numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return b - a;
});
console.log(numbers);
// 출력: [5, 4, 3, 2, 1]

문자열 타입 배열 오름차순

const stringArray = ['Blue', 'Humpback', 'Beluga'];
stringArray.sort(function(a, b) {
  if(a < b) {
  	return -1;
  } else if(b < a) {
  	return 1;
  } else {
  	return 0;
  }
});
console.log(stringArray);
// 출력: ["Beluga", "Blue", "Humpback"]

문자열 타입 배열 내림차순

const stringArray = ['Blue', 'Humpback', 'Beluga'];
stringArray.sort(function(a, b) {
  if(a < b) {
  	return 1;
  } else if(b < a) {
  	return -1;
  } else {
  	return 0;
  }
});
console.log(stringArray);
// 출력: ["Humpback", "Blue", "Beluga"]

 

반환 값

정렬된 배열을 반환한다.(복사X)

 

Reference

MDN Array.prototype.sort() : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

728x90
반응형

관련글 더보기