배열 sort 함수__오름차순 내림차순 정렬 [JavaScript]

현재 프로그래밍 언어 공부 중 입니다.
저의 글이 수정할 부분이 있다면 댓글 남겨주시면 감사하겠습니다.😊

1. 숫자 정렬

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

Functionless

arr.sort()

const num1= [3,5,1,2,8,-2];
num1.sort(); // [-2, 1, 2, 3, 5, 8]

하지만 다음과 같은 배열의 정렬은 원하지 않은 결과를 얻을 수도 있다. 우리가 원하는 배열 num2의 숫자 오름차순 정리의 결과는 -1,1,2,3,111,222일 것이다.

const num2 = [1,3,111,-1,2,222];
num.sort(); // [-1, 1, 111, 2, 222, 3]

위와 같은 결과가 나오는 이유는 sort() 메소드는 ASCII 문자 순서대로 정렬되기 때문이다.

따라서 위와 같은 경우 sort() 뒤에 함수를 덧붙여야 한다.

Arrow function

위의 num2를 정렬하는 방법은 다음과 같다.

• arr.sort( (a,b) => {return a-b} )
• arr.sort( (a,b) => {return b-a} )

오름차순 정렬

num2 = [1,3,111,-1,2,222];
num2.sort( function(a,b) => a - b) // [-1, 1, 2, 3, 111, 222]

내림차순 정렬

num2 = [1,3,111,-1,2,222];
num2.sort( function(a,b) => b - a) // [222, 111, 3, 2, 1, -1]

2. 문자 정렬

Functionless

• arr.sort()

const str = ['Orange','Apple','Banana','Cocoa']
str.sort(); //["Apple", "Banana", "Cocoa", "Orange"]

lnline compare function

function의 인자로 들어가는 f와 s는 first element, second element 라고 보면 이해하기 쉽다.

오름차순 정렬

• arr.sort( function( f, s ){
  if (f < s) {
  return -1;
  }
  if (f > s) {
  return 1;
  }
  return 0)};

내림차순 정렬

• arr.sort( function( f, s ){
  if (f > s) {
  return -1;
  }
  if (f < s) {
  return 1;
  }
  return 0)};

3. 오브젝트 정렬

문자와 숫자정렬을 응용해서 배열 안에 있는 오브젝트를 정렬해보자.
오름차순 정렬

const list = [
  		{name:'재석', age:21},
  		{name:'비', age:17},
        	{name:'광수', age:45},
       	  	{name:'효리', age:30},
             ]

//  1.이름에 따른 오름차순 정렬
list.sort(function(f,s) {
  const nameF = f.name;
  const nameS = s.name;
      if(nameF < nameS ){ // nameF is less than nameS by some ordering criterion
        return -1; 
      }
      if(nameF > nameS ) { // nameF is greater than nameS by some ordering criterion
        return 1; 
      }
      return 0; // nameF must be equal to nameS
 });

// 위의 함수를 삼함연산자로 바꾸면 다음과 같다
list.sort((f, s) => f.name < s.name ? -1 : f.name > s.name ? 1 : 0);

//결과
(4) [{…}, {…}, {…}, {…}]
0: {name: "광수", age: 45}
1: {name: "비", age: 17}
2: {name: "재석", age: 21}
3: {name: "효리", age: 30}


//  2. 나이에 따른 오름차순 정렬
list.sort((f, s) => f.age - s.age)

// 결과
(4) [{…}, {…}, {…}, {…}]
0: {name: "비", age: 17}
1: {name: "재석", age: 21}
2: {name: "효리", age: 30}
3: {name: "광수", age: 45}

내림차순 정렬

//  1.이름에 따른 내림차순 정렬
list.sort(function(f,s) {
  const nameF = f.name;
  const nameS = s.name;
      if(nameF > nameS ){ // nameF is greater than nameS by some ordering criterion
        return -1;
      }
      if(nameF < nameS ) { // nameF is less than nameS by some ordering criterion
        return 1;
      }
      return 0; // nameF must be equal to nameS
});

// 위의 식을 삼항 연산자로 바꾸고,
// 나이도 같은 변수함수를 사용하여 sort해보자
const compare = (key) => (f, s) => {
  return f[key] > s[key] ? -1 : f[key] < s[key] ? 1 : 0;
  
}

list.sort(compare('name'));
// 결과
(4) [{…}, {…}, {…}, {…}]
0: {name: "효리", age: 30}
1: {name: "재석", age: 21}
2: {name: "비", age: 17}
3: {name: "광수", age: 45}



//  2.나이에 따른 내림차순 정렬
list.sort(compare('age'));

// 결과
(4) [{…}, {…}, {…}, {…}]
0: {name: "광수", age: 45}
1: {name: "효리", age: 30}
2: {name: "재석", age: 21}
3: {name: "비", age: 17}