[Javascript] 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체)

 

배열 정렬하기 (오름차순, 내림차순, 문자열, 객체)

 

1. sort() 함수
2. sort() 함수로 숫자 오름차순 정렬하기
3. sort() 함수로 숫자 내림차순 정렬하기
4. sort() 함수로 문자열 정렬하기
5. sort() 함수로 문자열(대소문자 구분없이) 정렬하기
6. sort() 함수로 객체 정렬하기

 

 

 

1. sort() 함수

Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용합니다.

 

arr.sort([compareFunction])

 파라미터 

compareFunction

정렬 순서를 정의하는 함수.

이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다.

이 함수는 두 개의 배열 element를 파라미터로 입력 받습니다.

이 함수가 a, b 두개의 element를 파라미터로 입력받을 경우,

이 함수가 리턴하는 값이 0보다 작을 경우,  a가 b보다 앞에 오도록 정렬하고,

이 함수가 리턴하는 값이 0보다 클 경우, b가 a보다 앞에 오도록 정렬합니다.

만약 0을 리턴하면, a와 b의 순서를 변경하지 않습니다.

 

 

 리턴값 

compareFunction 규칙에 따라서 정렬된 배열을 리턴합니다.

이때, 원본 배열인 arr가 정렬이 되고, 리턴하는 값 또한 원본 배열인 arr을 가리키고 있음에 유의하세요.

 

 

 예제 1 

See the Pen 배열 by anna (@hianna) on CodePen.

sort() 함수를 사용하여 오름차순으로 정렬한 예제입니다.

파라미터(compareFunction)가 생략되었으므로, 유니코드 순서에 따라서 오름차순으로 정렬되었습니다.

 

 

 예제 2. 

See the Pen 배열 by anna (@hianna) on CodePen.

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

따라서, 유니코드 순서에 따라 [1, 10, 2, 3] 으로 정렬되었습니다.

그렇지만, 이 순서는 우리가 기대했던 순서가 아닙니다.

[1, 2, 3, 10] 순서로 정렬하기 위해서는 파라미터(compareFunction)를 활용해야 합니다. (예제 3)

 

 예제 3. 

See the Pen 배열 by anna (@hianna) on CodePen.

배열의 숫자들을 유니코드 순서가 아닌, 숫자 크기 순서대로 정렬하기 위해서

sort() 함수의 파라미터로 함수를 정의하였습니다.

이 함수는 a, b 두 개의 파라미터를 입력받고,

a > b이면 1, a == b이면 0, a < b이면 -1을 리턴하여,

주어진 배열을 오름차순으로 정렬하였습니다.

 

See the Pen 배열 by anna (@hianna) on CodePen.

두 숫자의 차가 양수값이냐, 음수값이냐를 이용하여

숫자를 오름차순으로 정렬하는 예제를 위와 같이 단순화 할 수도 있습니다.

 

 

 예제 4. 

See the Pen 배열 by anna (@hianna) on CodePen.

sort() 함수는 원본 배열을 정렬하고, 

원본 배열을 가리키는 배열을 리턴합니다.

 

const arr2 = arr1.sort();

arr1; // [1, 2, 3]

arr2; // [1, 2, 3]

원본 배열인 arr1이 정렬이 되었고, 

sort() 함수가 리턴한 arr2도 정렬이 된 상태임을 확인할 수 있습니다.

 

arr1.push(4);

arr1; // [1, 2, 3, 4]

arr2; // [1, 2, 3, 4]

원본 배열인 arr1에 element 4를 추가하였습니다.

arr2는 arr1을 가리키고 있기 때문에, arr2의 배열을 출력하여도 element 4가 추가된 것을 확인 할 수 있습니다.

 

 

2. sort() 함수로 숫자 오름차순 정렬하기

See the Pen 배열 by anna (@hianna) on CodePen.

두 숫자의 차이를 리턴하는 함수를 sort() 함수의 파라미터로 전달하여,

배열을 오름차순으로 정렬하도록 하였습니다.

 

 

3. sort() 함수로 숫자 내림차순 정렬하기

See the Pen 배열 by anna (@hianna) on CodePen.

두 숫자의 차이를 리턴하는 함수를 sort() 함수의 파라미터로 전달하여,

배열을 내림차순으로 정렬하도록 하였습니다.

오름차순으로 정렬할 때와 달리, sort() 함수의 파라미터 함수에서 b-a값을 리턴하도록 수정하였습니다.

 

 

4. sort() 함수로 문자열 정렬하기

 오름차순으로 정렬하기 

See the Pen 배열 by anna (@hianna) on CodePen.

sort() 함수는,

파라미터가 입력되지 않으면, 문자열의 유니코드 순서대로 정렬하기 때문에

문자열의 오름차순 정렬에는 파라미터가 입력되지 않아도 됩니다.

 

 내림차순으로 정렬하기 

See the Pen 배열 by anna (@hianna) on CodePen.

문자열을 내림차순으로 정렬하기 위해서는

sort()의 파라미터 함수에서 두 문자열을 비교하는 내용이 들어가야 합니다.

문자열을 비교하는 방법은 아래 링크를 참조하세요.

[Javascript] 문자열 비교하기 (동등 비교, 대소 비교)

 

 

5. sort() 함수로 문자열(대소문자 구분없이) 정렬하기

See the Pen 배열 by anna (@hianna) on CodePen.

sort() 함수로 문자열을 정렬하면, 대문자가 소문자보다 앞에 오도록 정렬이 됩니다.

유니코드가 대문자가 소문자보다 앞서기 때문입니다.

 

문자열의 대소문자 구분없이 정렬하기 위해서는 

다음 방법을 사용합니다.

 

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

See the Pen 배열 by anna (@hianna) on CodePen.

sort() 함수의 파라미터 함수에서 문자열을 비교할 때

문자열을 모두 대문자로 변환하여 비교하였습니다. ( toUpperCase() 함수)

[Javascript] 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로)

 

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

See the Pen 배열 by anna (@hianna) on CodePen.

 

 

6. sort() 함수로 객체 정렬하기

See the Pen 배열 by anna (@hianna) on CodePen.

배열의 element가 객체일 때의 예제입니다.

객체의 price값을 기준으로 오름차순 정렬하였습니다.