[ 자바스크립트 ] 배열의 sort()에 대해 알아보기

최종 수정일 : 2016. 8. 26.

이 글은 기본적인(?) sort() 사용법과 sort()를 사용할 때 발생되는 문제점들에 대한 내용이다.

배열 안에 단순히 숫자, 또는 문자만 들어있다면 아래 내용들만으로도 충분히 정렬이 가능하다.
하지만 문자열 안에 숫자가 포함되어 있다면, 그 배열을 정렬하기란 쉽지가 않다.
아래 내용을 읽어보면, 무슨 말인지 알게 될 것이다.

위 사실을 이미 알고있다면, 그리고 최선의 해결책을 찾고 있다면, 아래 링크로 바로 건너뛰기 바란다.
☞ [ 자바스크립트 ] 배열 정렬용, 함수 만들기 ( 부디 최선의 해결책이 되기를 바라며... ─.─;; )

일단, sort()라는 것은
자바스크립트에서 기본적으로 제공되는 함수이다. ( 모든 브라우저에서 사용이 가능하다는 말이다. )
배열에 들어있는 내용들을, 문자열(string)로 자동 변환 후,
그 문자들의 유니코드값의 크기에 따라 정렬해준다.

문자열의 정렬 조건을, ASCII 코드값이 아닌, 다른 조건으로 바꾸고 싶다면,
조건 사항을 함수로 작성한 후, 그 함수를 "sort()"의 괄호() 안에 넣어줘야 한다.

---

1. 기본 사용법 ( 문자 정렬 : 대문자와 소문자별로 정렬됨. )

var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Stackoverflow", "Yahoo!", "Ask", "Bing" ]; 
var others = [ "Übel", "Ubah", "Atom", "Änderung", "Ansage" ]; 
var number = [ 100, 25, 5, 40, 1, 10 ]; 
var string = [ "100", "25", "5", "40", "1", "10" ]; 
var overall = [ "티스토리", "Google", "Übel", "Ubah", 100, 25, "5", "40" ]; 

korean.sort ();
english.sort ();
others.sort ();
number.sort ();
string.sort ();
overall.sort ();

---

2. 숫자 정렬

var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Stackoverflow", "Yahoo!", "Ask", "Bing" ]; 
var others = [ "Übel", "Ubah", "Atom", "Änderung", "Ansage" ]; 
var number = [ 100, 25, 5, 40, 1, 10 ]; 
var string = [ "100", "25", "5", "40", "1", "10" ]; 
var overall = [ "티스토리", "Google", "Übel", "Ubah", 100, 25, "5", "40" ]; 

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

korean.sort ( compare );
english.sort ( compare );
others.sort ( compare );
number.sort ( compare );
string.sort ( compare );
overall.sort ( compare );

---

3. 문자와 숫자 정렬 ( 문자로 된 숫자들은 ASCII 크기순으로 정렬됨!! )

3. 1. 가나다순

// 숫자가 전혀 들어있지 않은 문자열 
var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Stackoverflow", "Yahoo!", "Ask", "Bing" ]; 
var others = [ "Übel", "Ubah", "Atom", "Änderung", "Ansage" ]; 

var number = [ 100, 25, 5, 40, 1, 10 ]; // 숫자 
var string = [ "100", "25", "5", "40", "1", "10" ]; // 문자로 된 숫자 
var overall = [ "티스토리", "Google", "Übel", "Ubah", 100, 25, "5", "40" ]; // 문자와 숫자가 섞여있음 

function ascending ( a , b ) {  
        if ( a < b ) return -1; 
        else if ( a == b ) return 0; 
        else return 1; 
} 

/* 
위의 함수를 한줄로 요약하면, 아래와 같다. 
function ascending ( a , b ) {          return ( a < b ) ? -1 : ( a == b ) ? 0 : 1;        } 
*/ 

korean.sort ( ascending );
english.sort ( ascending );
others.sort ( ascending );
number.sort ( ascending );
string.sort ( ascending );
overall.sort ( ascending );

---

3. 2. 역순

var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Stackoverflow", "Yahoo!", "Ask", "Bing" ]; 
var others = [ "Übel", "Ubah", "Atom", "Änderung", "Ansage" ]; 
var number = [ 100, 25, 5, 40, 1, 10 ]; 
var string = [ "100", "25", "5", "40", "1", "10" ]; 
var overall = [ "티스토리", "Google", "Übel", "Ubah", 100, 25, "5", "40" ]; 

function descending ( a , b ) {          return ( b < a ) ? -1 : ( b == a ) ? 0 : 1;        } 

korean.sort ( descending );
english.sort ( descending );
others.sort ( descending );
number.sort ( descending );
string.sort ( descending );
overall.sort ( descending );

---

4. 알파벳순 정렬 ( 대소문자 상관없이 정렬됨. )

4. 1. 가나다순

var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Yahoo", "google", "yahoo", "Google", "Yahoo" ]; 
var others = [ "Übel", "Ubah", "übel", "ubah", "Übel", "Ubah" ]; 
var number = [ 100, 25, 5, 40, 1, 10 ]; 
var string = [ "100", "25", "5", "40", "1", "10" ]; 
var overall = [ "티스토리", "Google", "Übel", "Ubah", 100, 25, "5", "40" ]; 

// 대소문자 무시 ( toLowerCase ) 
function ascending ( a , b ) {  
        var a = a.toString().toLowerCase(); 
        var b = b.toString().toLowerCase(); 
        return ( a < b ) ? -1 : ( a == b ) ? 0 : 1; 
} 
 

korean.sort ( ascending );
english.sort ( ascending );
others.sort ( ascending );
number.sort ( ascending );
string.sort ( ascending );
overall.sort ( ascending );

---

4. 2. 역순

var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Yahoo", "google", "yahoo", "Google", "Yahoo" ]; 
var others = [ "Übel", "Ubah", "übel", "ubah", "Übel", "Ubah" ]; 
var number = [ 100, 25, 5, 40, 1, 10 ]; 
var string = [ "100", "25", "5", "40", "1", "10" ]; 
var overall = [ "티스토리", "Google", "Übel", "Ubah", 100, 25, "5", "40" ]; 

// 대소문자 무시 ( toLowerCase ) 
function descending ( a , b ) {  
        var a = a.toString().toLowerCase(); 
        var b = b.toString().toLowerCase(); 
        return ( b < a ) ? -1 : ( b == a ) ? 0 : 1; 
} 
 

korean.sort ( descending );
english.sort ( descending );
others.sort ( descending );
number.sort ( descending );
string.sort ( descending );
overall.sort ( descending );

---

5. 사용자 언어를 기준으로 정렬 ( 사용자의 언어에 따라 정렬됨. )

5. 1. 가나다순

var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Stackoverflow", "Yahoo!", "Ask", "Bing" ]; 
var others = [ "Übel", "Ubah", "Atom", "Änderung", "Ansage" ]; 
var number = [ 100, 25, 5, 40, 1, 10 ]; 
var string = [ "100", "25", "5", "40", "1", "10" ]; 
var overall = [ "티스토리", "Google", "Übel", "Ubah", 100, 25, "5", "40" ]; 

// 로컬에 따라 ( localeCompare ) - 언어에 따라, 결과가 다를 수 있음. 
function ascending ( a , b ) { 
        var a = a.toString(); 
        var b = b.toString(); 
        return a.localeCompare ( b ); 
} 
 

korean.sort ( ascending );
english.sort ( ascending );
others.sort ( ascending );
number.sort ( ascending );
string.sort ( ascending );
overall.sort ( ascending );

---

5. 2. 역순

var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Stackoverflow", "Yahoo!", "Ask", "Bing" ]; 
var others = [ "Übel", "Ubah", "Atom", "Änderung", "Ansage" ]; 
var number = [ 100, 25, 5, 40, 1, 10 ]; 
var string = [ "100", "25", "5", "40", "1", "10" ]; 
var overall = [ "티스토리", "Google", "Übel", "Ubah", 100, 25, "5", "40" ]; 

// 로컬에 따라 ( localeCompare ) - 언어에 따라, 결과가 다를 수 있음. 
function descending ( a , b ) { 
        var a = a.toString(); 
        var b = b.toString(); 
        return b.localeCompare ( a ); 
} 
 

korean.sort ( descending );
english.sort ( descending );
others.sort ( descending );
number.sort ( descending );
string.sort ( descending );
overall.sort ( descending );

---

6. 문자와 숫자 정렬 ( 문자열 안에 포함된 숫자들은 ASCII 크기순으로 정렬됨!! )

6. 1. 가나다순

// 숫자가 없는 문자열 
var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Stackoverflow", "Yahoo!", "Ask", "Bing" ]; 
var others = [ "Übel", "Ubah", "Atom", "Änderung", "Ansage" ]; 

var number = [ 100, 25, 5, 40, 1, 10 ]; // 숫자 
var string = [ "100", "25", "5", "40", "1", "10" ]; // 문자로 된 숫자 
var overall = [ "tistory 100", "tistory 25", "tistory 5", "tistory 40", "tistory 1" ]; // 숫자가 포함된 문자열

function ascending ( a , b ) { 
        if ( ! isNaN( a ) &&  ! isNaN( b )  ) return a - b; 
        var a = a.toString(); 
        var b = b.toString(); 
        return ( a < b ) ? -1 : ( a == b ) ? 0 : 1;   // 또는,  return a.localeCompare ( b ); 
} 
 

korean.sort ( ascending );
english.sort ( ascending );
others.sort ( ascending );
number.sort ( ascending );
string.sort ( ascending );
overall.sort ( ascending );

---

6. 2. 역순

var korean = [ "티스토리", "다음", "네이버", "드림위즈" ]; 
var english = [ "Google", "Stackoverflow", "Yahoo!", "Ask", "Bing" ]; 
var others = [ "Übel", "Ubah", "Atom", "Änderung", "Ansage" ]; 

var number = [ 100, 25, 5, 40, 1, 10 ]; 
var string = [ "100", "25", "5", "40", "1", "10" ]; 
var overall = [ "tistory 100", "tistory 25", "tistory 5", "tistory 40", "tistory 1" ]; 

function descending ( a , b ) { 
        if ( ! isNaN( a ) &&  ! isNaN( b )  ) return b - a; 
        var a = a.toString(); 
        var b = b.toString(); 
        return ( b < a ) ? -1 : ( b == a ) ? 0 : 1;   // 또는,  return b.localeCompare ( a ); 
} 
 

korean.sort ( descending );
english.sort ( descending );
others.sort ( descending );
number.sort ( descending );
string.sort ( descending );
overall.sort ( descending );

이 블로그에서 함께 볼만한 글

[ 자바스크립트 ] 배열 정렬용, 함수 만들기
[ 자바스크립트 ] 테이블 정렬하기
[ 자바스크립트 ] 리스트 정렬하기

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*