웹 프로그래밍 기초/객체

sort(), reverse()

별초롱언니 2025. 4. 7. 21:52

sort() 메서드는 배열의 모든 요소의 값을 문자로 변경한 후 문자열 유니코드 순서에 따라 정렬 실행한다. 

(오름차순 정렬이며 영문자 소문자가 대문자보다 뒤에 나타난다. 숫자의 경우 비교가 제대로 안되기 때문에 compare() 함수를 써야한다. )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let fruits = ["apple","pear","orange","banana"];
    fruits.splice(2,1, "lemon","mango");

    document.write("정렬된 결과 : " + fruits.sort() + "<br>");
    document.write("원래의 결과 : " + fruits + "<br>");
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function compare(a,b) {
      return a-b;
    }
    let score = [40,10,8,90,58,19,80];
    document.write(score.sort(compare));
  </script>
</body>
</html>


copare 함수는 sort() 메서드에 의해 내부적으로 호출되어 배열의 정렬 기준을 제공하는 역할을 하며, 인자를 명시적으로 제공하지 않아도 sort 메서드가 자동으로 배열 요소들을 처리하면서 compare 함수를 호출한다. 이로 인해 배열이 올바르게 정렬된다. return b-a;로 바꾸어 적용하면 내림차순 정렬이 된다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let fruits = ["Orange","Pear","Apple","Banana"];
    let reverse = fruits.reverse();
    document.write(reverse);
  </script>
</body>
</html>

'웹 프로그래밍 기초 > 객체' 카테고리의 다른 글

forEach()  (0) 2025.04.07
delete 연산자  (0) 2025.04.07
splice(), slice()  (0) 2025.04.07
shift(), unshift()  (0) 2025.04.07
indexOf()  (0) 2025.04.07