[JavaScript] sort()

DO YEON KIM·2022년 12월 30일


코딩 테스트를 연습하며 어려웠던 메서드 및 함수에 대해 정리해보려한다.

이때 필자는 함수와 메소드에 대해 자주 혼동하곤 하였는데 같이 정리해보겠다.


함수를 호출하는 객체가 있는 경우 = 메서드

함수를 호출하는 객체가 없는 경우 = 함수

즉 함수는 여러 문장들이 하나의 기능을 구현하도록 구성한 것이라고 볼 수 있다.
함수 중에도 클래스 내부에 정의한 함수를 메소드라고 부른다.

독립적으로 존재 = 함수
클래스 내부에 종속 = 메소드


sort()

sort는 js에섯 배열을 정렬하기 위해 사용된다.

sort()함수는 파라미터가 입력되지 않는다면 유니코드 순서에 따라서 값을 정렬한다.
때문에

const arr = [2, 1, 3, 10];

arr.sort();
document.writeln(arr + '<br>'); // [1, 10, 2, 3]

값은 우리가 원했던 값대로 출력되지 않는다.
(문자열의 오름차순에서는 파라미터가 입력되지 않아도 잘 됨.)

이를 해결하기 위해 sort()함수의 파라미터로 함수를 정의할 수 있다.

const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  if(a > b) return 1;
  if(a === b) return 0;
  if(a < b) return -1;
});
document.writeln(arr + '<br>'); // [1, 2, 3, 10]

이와 같이하면 주어진 배열을 오름차순으로 정렬할 수 있다.

리턴 값이 0보다 크면 a,b의 순서를 바꿔버린다고 이해하면 쉽다.

배열을 내림차순으로 정렬하기 위해선 함수의 파리미터 함수에서 b-a값을 리턴하면 된다.

const arr = [2, 1, 3, 10];

arr.sort(function(a, b)  {
  return b - a;
});
document.writeln(arr + '<br>'); // [10, 3, 2, 1]

(a - b 는 오름 차순)


문자열 정렬

문자열의 오름차순 정렬에선 파라미터가 입력되지 않아도 됐지만
문자열을 내림차순으로 정렬하기 위해선 파라미터 함수에서 두 문자열을 비교하는 내용이 들어가야 한다.

const arr = ['banana', 'b', 'boy'];

arr.sort(function(a, b) {
  if(a < b) return 1;
  if(a > b) return -1;
  if(a === b) return 0;
});
document.writeln(arr + '<br>'); // ['boy', 'banana', 'b']

대소문자가 섞여있는 경우엔 대문자가 소문자보다 앞으로 오게 정렬이 된다.

const arr = ['banana', 'b', 'Boy'];

arr.sort();
document.writeln(arr + '<br>'); // ['Boy','b','banana']

대소문자 구분 없이 오름차순으로 정렬하기

const arr = ['banana', 'b', 'Boy'];

arr.sort(function(a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();
  
  if(upperCaseA > upperCaseB) return 1;
  if(upperCaseA < upperCaseB) return -1;
  if(upperCaseA === upperCaseB) return 0;
});

document.writeln(arr + '<br>'); // ['b', 'banana', 'Boy']

대소문자 구분없이 내림차순으로 정렬하기

const arr = ['banana', 'b', 'Boy'];

arr.sort(function(a, b) {
  const upperCaseA = a.toUpperCase();
  const upperCaseB = b.toUpperCase();
  
  if(upperCaseA < upperCaseB) return 1;
  if(upperCaseA > upperCaseB) return -1;
  if(upperCaseA === upperCaseB) return 0;
});

document.writeln(arr + '<br>'); // ['Boy', 'banana', 'b']

객체 정렬하기

const arr = [
  {name: 'banana', price: 3000}, 
  {name: 'apple', price: 1000},
  {name: 'orange', price: 500}
];

arr.sort(function(a, b) {
  return a.price - b.price;
});

document.writeln(JSON.stringify(arr[0]) + '<br>');
document.writeln(JSON.stringify(arr[1]) + '<br>');
document.writeln(JSON.stringify(arr[2]) + '<br>');

//{"name":"orange","price":500}
//{"name":"apple","price":1000}
//{"name":"banana","price":3000}
profile
프론트엔드 개발자를 향해서

0개의 댓글