2021-04-03
자바스크립트 내부에서 정렬을 할 수 있도록 도와주는 메서드가 있다. 해당 메서드는 sort() / reverse()로 두 메서드의 기능을 알아보도록 하자.
- sort ()
sort() 메소드는 오름차순 기준으로 정렬을 수행하며, 수행 시 알파벳의 경우 a에 가까울수록 배열의 앞에 숫자의 경우 0에 가까울수록 배열의 앞에 위치하게 된다. 아래는 예제 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var arr1 = ["Ddd", "Aaa", "Ccc", "Bbb"]
console.log(arr1)
console.log(arr1.sort())
var arr2 = ["4", "2", "1", "3"]
console.log(arr2 )
console.log(arr2.sort())
</script>
</head>
<body>
Hello World
</body>
</html>
정렬 전과 정렬 후를 비교하면 아래와 같은 결과가 나타난다.
- reverse()
내림 차순으로 정렬하고자하면 reverse()라는 메서드를 사용하면 된다. 다만 해당 메서드는 문자열의 순서가 아닌 배열의 순서 인덱스 순서를 기준으로 위치를 뒤바꾸기 때문에 먼저 sort() 메서드로 오름차순 정렬을 해준 뒤 이후 reverse() 메서드를 사용해야 정상적으로 배열이 내림차순으로 정렬된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var arr1 = ["Ddd", "Aaa", "Ccc", "Bbb"]
console.log(arr1)
arr1.sort()
console.log(arr1.reverse())
var arr2 = ["4", "2", "1", "3"]
console.log(arr2)
arr2.sort()
console.log(arr2.reverse())
</script>
</head>
<body>
Hello World
</body>
</html>
결과를 출력해보면 아래와 같이 정상적으로 내림차순 정렬된 것을 확인할 수 있다.
- 숫자 정렬
sort() 메소드의 경우 정렬 기준을 String 이기 때문에 number 타입의 요소들은 정렬을 할 수 없다. 때문에 sort() 메서드 내부에서 함수를 사용하여 정렬해야 하는데, 사용법은 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var arr1 = [43, 221, 15, 39]
console.log(arr1)
arr1.sort(function (a,b) {
return a - b
})
console.log(arr1)
</script>
</head>
<body>
Hello World
</body>
</html>
function (a,b) {return a - b} 함수를 sort() 내부에 넣어주는 방식이다. 해당 함수는 배열 객체들을 두 개씩 받아 비교하고 a - b의 값이 음수의 경우 앞에다 배치하며 + 값일수록 뒤에 배치하는 방식이다. 해당 함수를 대입 후 결과를 확인해 보면 결과는 아래와 같이 숫자임에도 불구하고 정상적으로 정렬되는 것을 확인할 수 있다.
