메뉴 건너뛰기

조회 수 272 댓글 0

  

안녕하세요~ 관리자입니다.

배열의 정렬하는 기능인 Array.sort()에 대해 여러 독자들이 질문하셔서 Array의 메소드 sort()에 대해 자세히 알아보겠습니다.

Array.sort()를 잘 사용하려면 약간 복잡하고 어려운 개념을 잘 이해해야 합니다.

Array는 여러 개의 원소들을 저장하고 다루는 배열을 나타내고, sort()는 Array 배열에 들어 있는 요소들을 오름차순이나 내림차순으로 재정렬하는 메소드입니다.

특별히 Array에 문자열들이 들어 있을 때는 이들을 오름차순으로 정렬합니다.

sort()의 형식은 다음과 같습니다.

var arrayObj = new Array();

arrayObj.sort(sortFunction)

 

여기서, sort() 메소드에 전달되는 sortFunction은 함수인데, 선택사항으로서 있어도 되고 없어도 됩니다.

이에 대해서는 뒤에서 자세히 설명하겠습니다.

 

array.sort()

 

sortFunction이 주어지지 않는 경우를 먼저 알아봅시다.

sortFunction이 주어지지 않는 경우 sort() 메소드가 원소들을 모두 처리하여 사전에 나오는 순서의 오름차순으로 정렬합니다.

다음 예제는 문자열을 원소로 가진 배열에 sort()의 결과를 보여줍니다.

sort() 함수를 이용하면 문자열을 사전 순서의 오름차순으로 정렬합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        var array = ["유재석""김연아""박지성""손흥민"];
 
        document.write("정렬 전 : ");
        for(i=0; i < array.length; i++) {
            document.write(array[i] +" " );
        }
        document.write("<br>");
 
        array.sort();
 
        document.write("정렬 후 : ");
        for(i=0; i < array.length; i++) {
            document.write(array[i] +" " );
        }
   </script>
</body>
</html>
cs

              ↑코드1 - 배열에 문자열만 있을 때 sort()를 이용한 정렬

 

정렬 전 : 유재석 김연아 박지성 손흥민

정렬 후 : 김연아 박지성 손흥민 유재석

                                                 ↑결과1

 

이번에는 숫자로만 이루어진 배열을 정렬을 해보겠습니다. sort()는 배열에 들어 있는 숫자를 문자열로 인지하고 문자열을 비교하듯이 정렬합니다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        var array = [5,9,1,7,4];
 
        document.write("정렬 전 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
        document.write("<br>");
 
        array.sort();
 
        document.write("정렬 후 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
   </script>
</body>
</html>
cs

    코드2 - 배열에 숫자만 있을 때 sort()를 이용한 정렬

 

정렬 전 : 5 9 1 7 4

정렬 후 : 1 4 5 7 9

                                   ↑결과2

 

 

sortFunction의 필요성

 

이번에는 배열 [1, 20, 2, 10 30, 3]과 같이 두 자리 수가 있는 배열을 정렬해 봅시다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        var array = [1,20,2,10,30,3];
 
        document.write("정렬 전 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
        document.write("<br>");
 
        array.sort();
 
        document.write("정렬 후 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
   </script>
</body>
</html>
cs

            ↑코드3 – 두 자리 수가 있는 배열을 정렬

 

정렬 전 : 1 20 2 10 30 3

정렬 후 : 1 10 2 20 3 30

                                   ↑결과3

 

이상한 결과가 나옵니다.

원하는 결과는 1,2,3,10,20,30이 출력 되어야 하는데 왜 이리 나올까요?

이것은 sort()가 숫자를 문자열로 인지하고, 10과 2를 비교할 때 “10”과 “2”의 형태로 비교하여 이들 중 누가 사전에서 먼저 나오는 것인지 판단합니다.

여기서는 숫자 10이 아닌 문자열 “10”이기 때문에 사전순서로는 “10”이 “2”보다 먼저 오게 됩니다.

즉, sortFunction이 없는 sort() 메소드는 숫자를 포함하지 않은 문자열에서 정렬이 잘 작동하지만, 숫자를 포함한 문자열에서 정렬이 제대로 작동하지 않습니다.

 

sortFunction을 활용하여 두 자리 정수 정렬

 

위와 같은 문제를 해결하기 위해서 사용자는 sort()를 이용할 때 정렬의 기준을 알려주면 됩니다.

sortFunction이 바로 sort()에게 정렬의 기준을 제공하는 것입니다.

sortFunction이 주어지면, sort()는 원소들을 직접 비교하지 않고 sortFunction에게 원소들의 비교를 맡깁니다.

그리고 sortFunction의 리턴 결과를 보고 어떤 원소의 값이 큰지 판단합니다.

그러므로 sortFunction은 두 개의 값을 비교한 후 반드시 음수, 0, 양수 중 하나의 값을 반환하여 sort()에게 두 수의 자리바꿈을 해야 하는지 알려줍니다.

sort()와 sortFunction의 관계를 좀 더 정리해봅시다. sort()는 순서를 정할 2개의 값 a, b를 sortFunction에게 넘겨주어 비교하게 하고 리턴 값을 받고 다음과 같이 행동합니다.

sortFunction(a,b)가 음수를 리턴하면, sort()는 a가 b보다 먼저 오도록 순서를 정합니다.

sortFunction(a,b)가 0을 리턴하면, 두 수가 같다는 뜻이므로 sort()는 a와 b의 자리를 변경하지 않습니다.

sortFunction(a, b)가 양수를 리턴하면 sort()는 b를 a보다 먼저 오도록 순서를 정합니다.

 

다음 예제는 앞의 예제에 배열에 들어있는 두 자리 정수를 오름차순으로 정렬하는 코드입니다.

sortFunction으로 increasingOrder(a, b) 함수는 작성되었으며, 오름차순으로 정렬하는 함수입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        function increasingOrder(a, b) {
            return a-b; //양수를 리턴하면 자리 바꾸기.
                  //즉 큰값을 뒤로 보내어 오름차순 정렬
        }
        var array = [1,20,2,10,30,3];
 
        document.write("정렬 전 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
        document.write("<br>");
 
        array.sort(increasingOrder);
 
        document.write("정렬 후 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
   </script>
</body>
</html>
cs

     코드4 - sortFunction으로 increasingOrder()함수를 작성한 결과

 

정렬 전 : 1 20 2 10 30 3

정렬 후 : 1 2 3 10 20 30

                                          ↑결과4

 

이제 원하는 모습이 나왔습니다. sortFunction을 이용하면 내림차순 정렬도 할 수 있습니다.

내림차순 정렬을 하려면 다음과 같은 함수를 만들어서 호출하면 됩니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        function decreasingOrder(a, b) {
            return b-a; //작은 값을 뒤로 보내기
                  //내림차순 정렬
        }
        var array = [1,20,2,10,30,3];
 
        document.write("정렬 전 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
        document.write("<br>");
 
        array.sort(decreasingOrder);
 
        document.write("정렬 후 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
   </script>
</body>
</html>
cs

             ↑코드5 – 두 자리 수가 있는 배열을 정렬

 

정렬 전 : 1 20 2 10 30 3

정렬 후 : 30 20 10 3 2 1

                                    ↑결과5

 

sortFunction을 이용하여 문자열을 원소로 가지는 배열의 내림차순 정렬을 할 수 있습니다.

이때도 항상 기억해야 될 것은 sortFunction은 음수, 0, 양수 중 하나를 리턴해야 되는 것입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        function decreasingOrder(a, b) {
            if(a > b)
                return -1;
            else if(b > a)
                return 1;
            else
                return 0;
        }
        var array = ["유재석""김연아""박지성""손흥민"];
 
        document.write("정렬 전 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
        document.write("<br>");
 
        array.sort(decreasingOrder);
 
        document.write("정렬 후 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
   </script>
</body>
</html>
cs

              ↑코드6 – 문자열을 원소로 가지는 배열을 내림차순 정렬

 

정렬 전 : 유재석 김연아 박지성 손흥민

정렬 후 : 유재석 손흥민 박지성 김연아

                                               ↑결과6

 

 

sortFunction을 익명함수로 작성하기

 

코드6에서는 sortFunction인 decreasingOrder()함수를 미리 작성하여 sort()함수에서 호출하였습니다.

그러나 sortFunction을 익명함수로도 작성할 수 있습니다.

익명함수란 함수의 이름없는 함수를 말합니다.

코드6의 일부를 다음과 같이 작성할 수 있습니다.

 

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
        var array = ["유재석""김연아""박지성""손흥민"];
 
        document.write("정렬 전 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i] +" ");
        }
        document.write("<br>");
 
        array.sort(function (a, b) {
            if(a > b)
                return -1;
            else if(b > a)
                return 1;
            else
                return 0;
        });
cs

                  ↑코드7 – 코드6의 sortFunction을 익명함수로 작성

 

 

객체 배열 정렬하기

 

지금까지는 배열의 원소가 숫자, 문자인 경우에서만 정렬을 해봤습니다.

이번에는 객체를 원소로 가지는 배열을 정렬해보도록 하겠습니다.

객체 배열을 정렬하기 위해서는 반드시 sortFunction을 작성해야 합니다.

sortFunction(a, b)의 매개변수 a, b에는 배열의 원소인 객체가 전달됩니다 독자들은 스스로 정렬의 기준을 세워야 합니다.

기준에 따라 sortFunction을 작성하여 0, 음수, 양수 중 하나를 리턴하게 해야 합니다.

코드8은 계좌를 나타내는 객체 Account를 원소로 가지는 배열을 정렬하는 사례입니다.

코드8에서는 계좌의 이름(name)을 기준으로 오름차순 정렬하는 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        //프로토타입 만들기
        function Account(name, code, balance) {
            this.name = name;
            this.code = code;
            this.balance = balance;
        }
 
        //객체배열 생성
        var array = [
            new Account("유재석"33335000),
            new Account("김연아"22240000),
            new Account("손흥민"11128000),
            new Account("박지성"44460000),
        ];
 
        //정렬 전 출력
        document.write("정렬 전 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i].name + ", ");
        }
        document.write("<br>");
 
        //정렬하기
        array.sort(function (a, b) {
            if(a.name > b.name
                return 1;
            else if(b.name > a.name)
                return -1;
            else
                return 0;
        });
 
        //정렬 후 출력
        document.write("정렬 후 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i].name + ", ");
        }
        
   </script>
</body>
</html>
cs

     코드8 –Account객체의 code를 기준으로 오름차순 정렬

 

정렬 전 : 유재석, 김연아, 손흥민, 박지성,

정렬 후 : 김연아, 박지성, 손흥민, 유재석,

                                     ↑결과8

 

sort()와 reverse()를 이용하여 정렬하기

 

arrray객체의 sort()와 reverse() 메소드를 이용하여 간단하게 내림차순으로 정렬할 수 있습니다.

sort() 메소드를 이용하면 먼저 오름차순으로 정렬이 됩니다.

그리고 reverse() 메소드를 사용하면 배열에 저장된 원소의 순서가 바뀌어 내림차순으로 정렬됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        var array = ["유재석""김연아""박지성""손흥민"];
        document.write("sort() 메소드 호출 전 : " + array +"<br>" );
        array.sort();
        document.write("sort() 메소드 호출 후 : "+ array +"<br>" );
        array.reverse();
        document.write("reverse() 메소드 호출 후  : "+ array +"<br>");
        array.reverse();
        document.write("reverse() 메소드 재호출 후 : "+ array +"<br>");
   </script>
</body>
</html>
cs

                              ↑코드9 – sort()와 reverse()를 이용한 정렬

 

sort() 메소드 호출 전 : 유재석,김연아,박지성,손흥민

sort() 메소드 호출 후 : 김연아,박지성,손흥민,유재석

reverse() 메소드 호출 후 : 유재석,손흥민,박지성,김연아

reverse() 메소드 재호출 후 : 김연아,박지성,손흥민,유재석

                                                   ↑결과9

 

도전하기!

 

원을 나타내는 프로토타입을 정의하시오. 프로퍼티로는 name, radius, color가 있습니다.

정의한 객체를 원소로 가지는 객체 배열을 만들어서 원의 넓이가 큰 것에서 작은 순서로 정렬하는 sortFunction을 작성해보시기 바랍니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Array Sort</title>
</head>
<body>
    <script>
        //프로토타입 정의
        function Circle(name, radius, color) {
            this.name = name;
            this.radius = radius;
            this.color = color;
        }
 
        //객체 배열 생성
        var array = [
            new Circle("a"10"red"),
            new Circle("b"5"blue"),
            new Circle("c"20"yellow"),
            new Circle("d"8"green"),
        ];
 
        //정렬 전 출력
        document.write("정렬 전 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i].name +  " ");
        }
        document.write("<br>");
 
        //정렬하기
        array.sort(function (a, b) {
            var areaA = a.radius*a.radius*3.14;
            var areaB = b.radius*b.radius*3.14;
 
            if(areaA > areaB )
                return -1;
            else if(areaA <areaB)
                return 1;
            else
                return 0;
        });
 
        //정렬 후 출력
        document.write("정렬 후 : ");
        for(i=0; i<array.length; i++) {
            document.write(array[i].name + " ");
        }
 
   </script>
</body>
</html>
cs

                      ↑코드10 – 도전하기 소스코드

 

정렬 전 : a b c d

정렬 후 : c a d b

                                        ↑결과10

 

  

?

Admin's Blog

관리자의 블로그입니다.

  1. No Image 23Aug
    by 관리자2
    2018/08/23 by 관리자2
    Views 272 

    Array의 sort() 메소드를 이용하여 정렬하기

  2. 집 안의 PC를 몽구스 웹 서버로 만들고 외부에서 접속하기

  3. 웹페이지를 그래서 어떻게 만들라는거야? 웹프로그래밍 스타팅 가이드라인

  4. 초간단! 5분만에 내 컴퓨터를 웹 서버로 만들어보자

목록
Board Pagination Prev 1 Next
/ 1
위로