whatisthis?

javaScript. Sort() 메서드 본문

WEB STUDY/JAVASCRIPT

javaScript. Sort() 메서드

thisisyjin 2021. 12. 20. 23:20

REFERENCE

 

Array.prototype.sort() - JavaScript | MDN

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

developer.mozilla.org

Array.prototype.sort()

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환함.

 

 

<예제>

const array1 = [1, 30, 4, 21, 100000];
array1.sort();

>> Array [1, 100000, 21, 30, 4]

숫자여도 문자열처럼 나열한다. (ASCII코드 대로)

 

compareFunction이 제공되지 않으면 요소를 문자열로 변환하고

유니 코드 코드 포인트 순서로 문자열을 비교하여 정렬된다.

 

즉, 숫자형태로 비교하기위해서는 compareFunction 필요하다!

 

compareFunction

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;   // a < b 이면 -1 리턴
  }
  if (a is greater than b by the ordering criterion) {
    return 1;    // a > b 이면 1 리턴
  }
  // a must be equal to b
  return 0;      // a = b 이면 0 리턴
}

 

 

** 숫자를 비교하기 위해 compare 함수는 a에서 b를 뺄 수 있음!

다음 함수는 배열을 오름차순으로 정렬함.

 

function compareNumbers(a, b) {
  return a - b;
}

 

아래와 같이 함수식으로 쓰면 된다.

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

// RESULT : [1, 2, 3, 4, 5]



/// 화살표 함수 이용시
numbers.sort(a,b => a - b);
숫자 오름차순 sort(a,b => a - b)
숫자 내림차순 sort(a,b => b - a)

** sort 함수의 핵심은 비교함수를 작성하는 것이고,

비교함수에서 a(next) b(prev)가 들어오고 무언가 바꾸고 싶을 때 -1을 리턴하는 것. (a < b일때 -1 리턴)

 

오름차순으로 정렬하려면 

arr.sort((a, b) => a - b)와 같이 작성하면 된다.

 

a<b일때 a - b의 결과로 음수가 나오고,

b 즉, 앞에 있는 값이 더 클 때 변경이 일어나니까

뒤에 있는 큰 값이 앞으로 오게 돼서 오름차순 정렬이 된다.

 

>> REF : https://velog.io/@jakeseo_me

 

 

** 이해가 안되는 것 같아서 💫 🔻

더보기
function sortNumber(a,b){
	return a-b;
}

numbers.sort(sortNumber) // 여기에서 왜 sortNumber()이 아니고 sortNumber이라 적었을까?

 

sort 메서드의 인자에 sortNumber()가 아닌
sortNumber라고 함수 이름만 적은 것은 함수를 "호출" 하는 것이 아니라,
sort의 인자에 "sortNumber란 함수 자체를 전달"한것.

 

a-b를 왜 리턴하는걸까?

sortNumber(a,b) 함수는 -1, 0, 1의 값을 가진다.

 

a-b는 a가 b보다 작으면, 즉 b가 더 크면 (이전값이 크면) -1을 리턴해서 바꿔주는 것임. 

 

 

'WEB STUDY > JAVASCRIPT' 카테고리의 다른 글

javaScript. String을 Number로 변경  (0) 2022.01.03
javaScript. 대괄호 / 중괄호 / 소괄호 구분  (0) 2021.12.22
javaScript. Label 문  (0) 2021.12.20
javaScript. Switch문  (0) 2021.12.20
javaScript. break문  (0) 2021.12.20