생활코딩

Coding Everybody

코스 전체목록

닫기

sort

요약(Summary)

배열을 정렬한다.

문법(Syntax)

array.sort(sortfunc)

인자(Parameters)

인자명 데이터형 필수/옵션 설명
sortfunc function 옵션 원소들 간에 무엇이 우선인지를 판단한다

반환값(Return)

array, 정렬된 배열, 자기 자신에 대한 레퍼런스 값 임

설명(Description)

배열을 정렬한다.
알파벳 순서로 정렬한다.
숫자의 경우 암시적으로 문자열로 형변환 하기 때문에 숫자 1이 숫자 10보다 먼저 나온다. (예제 참고)
sortfunc 로 비교 대상인 두개의 인자를 전달하는데, 리턴 값에 따라서 선후를 판단한다. (예제 참고)

예제(Example)

var numbers = [9,8,7,6,5,4,3,2,1];
alert(numbers.sort()); // array, [1,2,3,4,5,6,7,8,9]
alert(numbers); // array, [1,2,3,4,5,6,7,8,9], 원본을 변경한다. 
alert(numbers.sort() === numbers); // boolean, true, 원본과 반환값이 같다.

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
//array, [1,10,2,20,3,4,5,6,7,8,9], 암시적으로 원소를 문자로 형변환 하기 때문에 10이 1뒤에 온다.
alert(numbers.sort()); 
function sortNumber(a,b){
    // 비교 대상인 a와 b가 인자로 전달된다.
    //alert('a :'+a+', b:'+b);
    // a에서 b를 뺀 결과가 음수면 a가 b보다 작고, 0이면 같다.
    // sort메소드는 return 값이 음수,양수,0인지에 따라서 순서를 정한다.
    return a-b;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [1,2,3,4,5,6,7,8,9,10,20]

function sortNumber(a,b){
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

참고

 

댓글

댓글 본문
  1. LLLEE
    callback함수 보고 넘어왔는데 보면서 진짜 아무 생각이 없었네요. 댓글을 보고서 인지를 하네요. 감사합니다.
    대화보기
    • 앙냥냥
      ㅇ0ㅇ.. sortNumber가 함수면서 () <- 이거 안 쓰는 걸 아무 생각 없이 글쿠나 ~ 하고 보고 있었는데 이 댓글들 보면서 왜 그런 생각 못 했는지, 왜 안 쓰는 건지 이해 완료해써요 짱짱 감사합니닷
      대화보기
      • 주니어개발자
        헷갈리실 수 있겠네요.

        저의 설명이 도움이 될지 모르겠지만
        예를 들어
        alert(sortNumber()) 라고 하면 sortNumber 라는 함수를 "호출"하고,
        리턴값이 있으면 그 리턴값을 받아 경고창에 표시하겠죠?
        따라서 이때는 alert의 인자로 전달한 sortNumber() 는
        sortNumber라는 함수를 "호출" 했다고 볼 수 있습니다.

        반면에 헷갈리셨던 numbers.sort(sortNumber); 를 보죠.
        sortNumber 라고만 되어있습니다. 일단 위와 비교하면 함수를 "호출" 했다고 볼 수 없습니다.
        함수를 호출하려면 sortNumber() 라고 해야 합니다.

        여기서 sort 메서드의 인자에 sortNumber()가 아닌
        sortNumber라고 함수 이름만 적은 것은 함수를 "호출" 하는 것이 아니라,
        sort의 인자에 "sortNumber란 함수 자체를 전달" 했다고 보시면 됩니다.

        sortNumber 라는 함수를 호출한 것이 아니라,
        sortNumber 라는 함수 자체를 인자로 전달한 것입니다.
        (쉽게 말해 함수를 담은 변수라고 생각하시면 됩니다.)
        (어렵게 말하면 함수는 1급 객체이기 때문에 함수 자체를 다른 함수의 인수(Argument)로 전달할 수 있기 때문에 그렇습니다. 나중에 궁금하면 알아보세요)
        대화보기
        • 큐ㅜㅠㅠㅜㅠ
          졸귀탱 ㅜㅜㅡㅜ
          대화보기
          • JHJO
            1. b-a 의 값으로 정렬을 다시는 것이 아님
            2. b-a의 값이 양수이면 a,b의 자리를 바꿔야 한다는 의미 음수이면 a,b의 자리가 정렬된 상태라는 의미

            결국 return b-a가 양수/음수 를 따지기 위한 것
          • 홍주호
            20191020 완료
          • 두둠칫
            원래 문법으로 함수를 호출할때는 당연히 ()를 사용하는데 예외가 있더라고요. 외울필요는 없고 error가 뜨면 딱 보이니까 그때마다 자주 접하다보면 자연스럽게 습득되지 않을까 생각합니다.
            대화보기
            • 초심자 입장에서 소트에 소트넘버를 기입할 때
              numbers.sort(sortNumber())); 처럼 소트넘버는 함수니까 ()를 더 써줘야 할거 같은데 안써주는게 조금 이상하게 느껴지는군요
              일관성이 없다고 해야 하는건지 아니면 내가 컴퓨터문법에 익숙하지 못해서 그런건지 아리송해지네
            • 행인
              sort함수 파라미터는 콜백함수이며 콜백함수의 파라미터는 a와 b 즉 두 값을 순차적으로 비교하기 위해서 그런 문법이니까 그냥 외우면 됨 그리고 당연히 콜백함수니까 리턴은 있어야하는거고
              대화보기
              • 띠리링또로롱
                머야 무슨말이얌.
              • 처음 해봐요.
                C / C++ 개발만 해오다 JavaScript를 처음 공부하게 되었는데요....

                위의 sort함수를 보면 parameter로 function이 올수 있다은건 이 문서를 보고 알수 있습니다.
                그런데 sort함수 parameter인 function의 parameter와 retrun에 대한 설명(?)은 어떻게 알수 있나요??

                예를들어서
                var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
                function sortNumber(a,b){
                return a - b;
                }

                이럴때, sortNumber함수(내가 만들려는 함수 )의 파라미터가 2개 (a,b)인건 어찌 알수있고,
                return함수가 어떻게 동작하는지는 어떻게 알수 있을까요?
              • 지나가다님 질문이요
                그럼 자바스크립트에서 지원하는 정렬이 버블정렬인건가요?
              • 푸른하늘
                13일차 공부 감사합니다
              • 지나가다가
                구체적인 정렬 알고리즘은 프로그래밍 초심자가 이해하기 어려워서
                이고잉님께서 일부러 설명을 스킵하신 것 같은데...
                밑에 잘못된 정보가 있어 제가 굳이 설명을 보탭니다.

                우선 [20, 10, 9,8,7,6,5,4,3,2,1]의 배열에서 a-b라는 연산을 모두 한 다음
                그 결과값으로 정렬하는 것이 결코 아닙니다.
                뭐하러 굳이 뺄셈을 하고 그 값으로 또 정렬하겠습니까?

                자바스크립트의 정확한 알고리즘은 아니지만
                쉽게 정렬 알고리즘을 설명하면 이렇습니다.

                (a,b) 형식으로 지정한 두 인자를 차례로 비교합니다.

                우선 배열 numbers[0]과 numbers[1] 즉, 20과 10을 비교해 볼까요?
                20-10 = 10
                결과값이 10 즉, 양수입니다.
                sort함수에 sortNumber(a,b)의 return 값으로 양수 10을 전달합니다.
                그럼 sort함수가 양수값을 전달받고 배열의 순서를 바꾸어 버립니다.
                (정확하게 말하면 두 배열 안에 든 값을 교체)
                그럼 배열이 [10, 20, 9,8,7,6,5,4,3,2,1] 이렇게 바뀝니다.

                그 다음 numbers[0]과 numbers[2] 즉 10과 9를 비교합니다. 10 - 9 = 1 >0, 양수입니다.
                결과값이 양수이므로 또 10과 9의 순서를 바꿉니다.
                이런 식으로 계속 두 인자를 비교해서 결과값이 양수가 나오면 순서를 바꾸고,
                음수가 나오면 순서를 그대로 유지하는 겁니다.

                배열이 바뀌어가는 순서를 보면 이해하기 쉽습니다.

                [(20), (10), 9,8,7,6,5,4,3,2,1] 20-10 = 10, 즉 양수이므로 순서바뀜! ()는 비교되는 인자값.
                [(10), 20, (9),8,7,6,5,4,3,2,1] 10 - 9 = 1 또 양수, 순서 바뀜.
                [(9), 20, 10, (8),7,6,5,4,3,2,1] 반복...
                [(8), 20, 10, 9,(7)...]
                ...
                [(2). 20, 10...3, (1)]
                [(1), 20, 10...]

                그럼 배열 내에서 가장 작은 값 1이 찾아지겠죠.

                [1, 20, 10, 9,8,7,6,5,4,3,2]

                1의 순서는 바뀌지 않습니다. 1-2 = -1
                즉 결과값이 음수이기 때문이죠.

                그 다음은 두번째 배열 차례입니다.
                20 - 10 = 10 > 0 이므로 순서를 또 바꿉니다.

                [1, (20), (10), 9,8,7,6,5,4,3,2]
                [1, (10), 20, (9), 8...]
                [1, (9), 20, 10, (8)...]

                이런 식으로 반복하다 보면 두번째로 작은 값 2도 찾게 됩니다.

                ....
                [1, 2, 20, 10, 9,8,7,6,5,4,3]

                그럼 다음은 세번째...
                이렇게 지루하게 반복하면 결국 정렬이 됩니다.

                물론 실제 자바스크립트에서는 비교하는 순서가 다릅니다.
                다른 알고리즘을 쓰기 때문이죠.

                이렇게 차례차례 비교해 나가면 인간이 이해하기는 쉽지만
                연산량이 기하급수적으로 늘어나기 때문에 다른 정렬 알고리즘을 쓰는 것이죠.

                실제로는
                [20, 10, 9,8,7,6,5,4,3,2,1]
                배열의 양쪽 끝부터 비교하고 (20, 1),
                그 다음 배열의 가운데 값을 차례로 비교해 나갑니다. (1,6)
                디버깅해 보시면 쉽게 아실 수 있을 겁니다
              • Dong Il Kim
                여기 글을 잘 보시면 sort()는 '원소들 간에 무엇이 우선인지를 판단한다'라고 되어 있습니다. 우선순위를 판단해서 순서를 반환하는거지 각각의 값을 반환하는게 아니겠죠. 1, 20, 2, 20 이 아니라 1, 2, 20이 되겠죠.
                대화보기
                • 제이슨고
                  이해가 잘 안되서 그런데요, 모든 값들끼리 a-b를 해서 나온 값을 sort 하면 -19, -18, -17, ... , 17, 18, 19 이렇게 순서가 되는데요, 그 다음 처리가 이해가 잘 안가요~ -19(1-20)이니까 1과 20은 1, 20 순서로 sort 되고 -18(2-20)이니까 2,20순서로 sort 되면 1, 20, 2, 20 이렇게 되는거 아닌가요?? sort 할 때에는 a 값만 살리는지?? 이 부분이 이해가 잘 안됩니다. 1은 항상 20보다 앞이다. 2는 항상 20보다 앞이다. 그리고 1과 2인 경우에는 1이 항상 2보다 앞이다.. 이런식으로 해서 정렬이 된다는 건지요??
                  대화보기
                  • Dong Il Kim
                    var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
                    function sortNumber(a,b){
                    return a - b;
                    }
                    를 하게 되면 모든 값들끼리 a - b를 하게 됩니다.

                    그렇게 나온 값들을 sort()에 넣으면, (a - b)의 순서가 숫자가 낮은 것부터 높은 순서대로 정렬이 되겠죠.
                    -19(1 - 20), -9(1-10), -8(1-9), -7(1-8), -6(1-7), -5(1-6), -4(1-5), -3(1-4), -2(1-3), -1(1-2)
                    -18(2-20), -8(2-10), -7(2-9), -6(2-8), -5(2-7), -4(2-6), -3(2-5), -2(2-4), -1(2-3), 0(2-2), 1(2-1)
                    -17(3-20), -7(3-10), -6(3-9), -5(3-8), -4(3-7), -3(3-6), -2(3-5), -1(3-4), 0(3-3), 1(3-2), 2(3-1)
                    ...
                    10(20-10), 11(20-9), 12(20-8), 13(20-7), 14(20-6), 15(20-5), 16(20-4), 17(20-3), 18(20-2), 19(20-1)

                    그럼 계산된 숫자의 크기에 따라서 a와 b의 순서가 sort()에 의해 재배열 되어
                    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20
                    가 나옵니다.
                    대화보기
                    • 박철오
                      잘모르겟다 설명좀 해주세요
                    • Joon Seo An
                      감사합니다.
                    • 나무마루
                      lert 는 뭔가요?
                    graphittie 자세히 보기