[javascript] 배열(Array) 변형 sort()와 reverse()

 

* 배열(Array) 변형 메서드인 sort()와 reverse()

 🫠 callback 함수를 이용하지 않고, 배열을 변형할 수 있는 정말 간단한 방법이 있는데, 이는 바로 sort(), reverse(), 또 하나로는 join()이 있다. join()은 저번 포스팅에서 split()과 함께 다뤘기 때문에 이번 포스팅에서는 sort()와 reverse()만 실습해 보자.

 

 

 

---

🫠 sort()

> 입력형식 : Array.sort()

> 오름차순 배열에 해당 (숫자 -> 작은 수부터, English -> a부터, 한글 -> 가부터)

/* sort() */

let nums = [1, 2, 6, 8, 3, 9, 4, 5, 7];
let colors = ['red', 'pink', 'blue', 'green'];
let flowers = ['장미', '튤립', '해바라기', '개나리'];

console.log(nums.sort()); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(colors.sort()); // [ 'blue', 'green', 'pink', 'red' ]
console.log(flowers.sort()); // [ '개나리', '장미', '튤립', '해바라기' ]

👉🏻 output : 주석 처리 확인
✅ nums, colors, flowers 모두 sort() 메서드로 오름차순 된 것을 확인할 수 있다.

 

 

 

---

🫠 reverse()

> 입력형식 : Array.reverse()

> 배열 요소를 역방향으로 정렬(반전)

/* reverse() */

let nums = [1, 2, 6, 8, 3, 9, 4, 5, 7];
let colors = ['red', 'pink', 'blue', 'green'];
let flowers = ['장미', '튤립', '해바라기', '개나리'];

console.log(nums.reverse()); // [7, 5, 4, 9, 3, 8, 6, 2, 1]
console.log(colors.reverse()); // [ 'green', 'blue', 'pink', 'red' ]
console.log(flowers.reverse()); // [ '개나리', '해바라기', '튤립', '장미' ]

👉🏻 output : 주석 처리 확인
✅ nums, colors, flowers 모두 reverse() 메서드로 배열의 요소들이 반전이 되어 뒤에서부터 정렬된 것을 확인할 수 있다. sort()가 오름차순으로 동작하는 것처럼 reverse()는 내림차순으로 동작할 줄 알았는데.. 
❗️ 내림차순으로 정렬하기 위해서는 어떻게 해야 할까?

 

 

🫠 배열 내림차순 정렬 

> 내림차순 정렬 (숫자 -> 큰 수부터, English -> z부터, 한글 -> 하부터)

/* sort() & reverse() */

let nums = [1, 2, 6, 8, 3, 9, 4, 5, 7];
let colors = ['red', 'pink', 'blue', 'green'];
let flowers = ['장미', '튤립', '해바라기', '개나리'];

console.log(nums.sort()); 
console.log(colors.sort()); 
console.log(flowers.sort()); 

console.log(nums.reverse()); // [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log(colors.reverse()); // [ 'red', 'pink', 'green', 'blue' ]
console.log(flowers.reverse()); // [ '해바라기', '튤립', '장미', '개나리' ]

👉🏻 output : 주석 처리 확인
✅ nums, colors, flowers 모두 sort() 메서드로 오름차순 정렬을 시켜준 뒤, reverse() 메서드를 동작시키면 원하는 대로 내림차순으로 정렬되어 출력된다. 
❗️ 하지만 매번 내림차순을 하기 위해 sort()와 함께 쓰면 매우 불편해지며, 건강한 코드가 아니라고 생각된다.
이러한 문제점과 또 다른 문제점이 있는데 아래에서 확인해 보자

 

 

 

---

/* sort() 정렬의 문제점 */

let nums = [10, 25, 9, 4, 52, 7];
let colors = ['red', 'Red', 'pink', 'blue', 'Blue', 'green'];

console.log(nums.sort()); // [ 10, 25, 4, 52, 7, 9 ]
console.log(colors.sort()); // [ 'Blue', 'Red', 'blue', 'green', 'pink', 'red' ]

👉🏻 output : 주석 처리 확인
❗️nums를 sort() 메서드로 정렬할 경우, 10이 제일 먼저 정렬된 것을 볼 수 있다. 가장 큰 수로는 9가 정렬되었는데, 이는 배열의 요소가 일시적으로 문자열로 변경되어 발생했기 때문이다. (10의 1이 9보다 작다고 인식됨)
❗️ colors 또한 blue와 Blue는 똑같지만 대/소문자 구분으로 인해 대문자가 소문자보다 앞에 정렬되어 출력되었다.  

 

🫠 이러한 sort()의 문제점에 대한 해결방안을 다음 포스팅에서 정리할 계획이다.