[javascript] 배열 정렬 방법 설명 및 예제 (sort, reverse)

목 차

• 1. 개요
• 2. sort() 메서드
• 2-1. 기본 사용법
• 2-2. sort 메서드 매개변수 확인하기
• 2-3. 숫자 오름차순, 내림차순 정렬하기
• 2-4. 문자열 오름차순, 내림차순 정렬하기
• 2-5. 객체 배열 정렬하기
• 3. reverse() 메서드
• 3-1. 기본 사용법
• 3-2. 숫자 내림차순 정렬하기
• 4. 마치며

728x90

 

1. 개요

• 자바스크립트 배열 정렬 메서드에 대해 설명하고 예제를 통해 어떻게 사용해야 하는지 직접 보여드리겠습니다.

 

2. sort() 메서드

• sort()는 JavaScript 배열의 기본 정렬 메서드로, 배열을 정렬하고 정렬된 배열을 반환합니다. 기본적으로 문자열로 변환된 요소를 사전순으로 정렬하며, 정렬 기준을 커스터마이징하기 위해 콜백 함수를 인수로 받을 수 있습니다.

 

2-1. 기본 사용법

• javascript의 sort 메서드는 기본적으로 요소들을 문자열로 변환하고 정렬을 하기 때문에 200이 두번째로 위치하게 됩니다.

let arr = [40, 1, 5, 200];
arr.sort(); 
console.log(arr);

 

 

 

2-2. sort 메서드 매개변수 확인하기

• 배열 앞쪽부터 차례로 모두 비교하면서 정렬하는 데이터를 확인할 수 있습니다.

let arr = [40, 1, 5, 200];
arr.sort((a, b) => {
	console.log(a, b);
    return a-b;
});

 

 

 

2-3. 숫자 오름차순, 내림차순 정렬하기

• 숫자 배열을 올바르게 정렬하려면 비교 함수를 인수로 전달하여 sort() 메서드를 사용합니다.
• a - b: a가 b보다 작으면 음수를 반환하여 a가 b 앞에 오도록 하여 오름차순 정렬.
• b - a: b가 a보다 작으면 음수를 반환하여 b가 a 앞에 오도록 하여 내림차순 정렬.

let arr = [40, 1, 5, 200];
arr.sort((a, b) => a - b); // 오름차순 정렬
console.log(arr);

arr.sort((a, b) => b - a); // 내림차순 정렬
console.log(arr);

 

 

 

2-4. 문자열 오름차순, 내림차순 정렬하기

• 기본적으로 sort()는 문자열을 사전순으로 정렬합니다. 대소문자를 구별하여 정렬합니다.

let fruits = ["banana", "Orange", "apple", "Mango"];
fruits.sort(); // 대소문자 구분 사전순
console.log(fruits);

fruits.sort((a, b) => a.localeCompare(b)); // 대소문자 구분 없이 사전순 정렬
console.log(fruits);

 

 

 

2-5. 객체 배열 정렬하기

• 객체 배열을 정렬할 때는 비교 함수에서 객체의 특정 속성 값을 기준으로 정렬할 수 있습니다.

let people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 20 },
  { name: "Charlie", age: 30 }
];

// 나이를 기준으로 오름차순 정렬
people.sort((a, b) => a.age - b.age);
console.log(people);

 

 

3. reverse() 메서드

• JavaScript의 Array.reverse() 메서드는 배열의 요소 순서를 반대로 뒤집어 배열을 반환합니다. 정렬된 배열을 내림차순으로 뒤집고자 할 때 주로 사용됩니다.

 

 

3-1. 기본 사용법

• reverse 메서드는 그냥 사용하면 선언된 배열을 단순히 반대로 뒤집어 주는 기능을 합니다.

let arr = [40, 1, 5, 200];
arr.reverse(); 
console.log(arr);

 

 

 

3-2. 숫자 내림차순 정렬하기

• 우선 기본적으로 원하는 정렬을 해놓고 반대로 뒤집어 주는 방법으로 프로그래밍을 하셔야 합니다.

let arr = [40, 1, 5, 200];
arr.sort((a, b) => a - b).reverse(); // 내림차순 정렬
console.log(arr);

 

 

 

4. 마치며

• sort(): 배열을 기본적으로 사전순으로 정렬하며, 비교 함수를 제공하여 숫자, 객체 등을 원하는 기준으로 정렬할 수 있음.
• reverse(): 배열의 순서를 반대로 뒤집음. (단순 뒤집기 기능)
• javascript array reverse 메서드를 사용하고 싶다면, sort 메서드로 정렬해놓고 reverse 메서드를 사용해서 뒤집어 주면 됩니다.