WEB/JavaScript

[JavaScript] JS Arrays sort() / reverse() 메소드 알아보기

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의 값이 음수의 경우 앞에다 배치하며 + 값일수록 뒤에 배치하는 방식이다. 해당 함수를 대입 후 결과를 확인해 보면 결과는 아래와 같이 숫자임에도 불구하고 정상적으로 정렬되는 것을 확인할 수 있다.

저작자표시 비영리

'WEB > JavaScript' 카테고리의 다른 글

[JavaScript] JS String(문자열) 대 / 소 문자 변환 방법 (0)	2021.04.05
[JavaScript] JS String(문자열) 메소드 알아보기. (0)	2021.04.04
[JavaScript] JS Arrays 배열에 대하여 알아보기 (0)	2021.04.02
[JavaScript] JS 변수 키워드 let 과 var 알아보기 (0)	2021.03.21
[JavaScript] JS 변수 키워드 const 알아보기 (0)	2021.03.20

Contents

새소식

인기 검색어