LHJ

I'm a FE developer.

13-10. Array 오브젝트(ES3 기준) / sort 알고리즘, 역순 정렬

02 Dec 2020 » js_beginner

13-10. Array 오브젝트(ES3 기준) / sort 알고리즘, 역순 정렬

sort()

  • sort 알고리즘

      var value = [101, 26, 7, 1234];
      value.sort(function (one, two) {
          return one - two;
      });
      console.log(value); // [7, 26, 101, 1234]
    

  1. sort 메소드의 파라미터에 함수를 작성합니다.
    이를 콜백 함수라 합니다.
  2. sort를 반복할 때마다 콜백 함수가 호출됩니다.
    자바스크립트 엔진이 호출을 해줍니다.
    어떻게 보면 표현식이죠?
    파라미터 값이 표현식이면 표현식을 평가합니다.
    그런데 파라마미터가 함수인 겁니다.
    그래서 함수를 실행시키는 겁니다. (평가해서 return 값 받아야되니까) return값 받아서 그걸 가지고 또 다른 처리를 하는 겁니다.
  3. 위의 코드를 보면 사람이 생각하는 승순으로 sort가 됩니다.
    어떻게 이런 결과가 나올까요?

  1. sort() 파라미터의 function(){}을 호출하면서 101과 26을 파라미터 값으로 넘깁니다.
    101이 one에, 26이 two에 설정됩니다.

  2. one(101) - two(26)의 결과는 양수이며 이 값을 반환합니다.
  3. 이때, 0보다 큰 값이 반환되면 배열에서 값의 위치를 바꿉니다.
    즉, [26, 101, 7, 1234]가 됩니다.

  4. 다시 콜백 함수를 호출하면서 101과 7을 넘겨줍니다.
    one(101) - two(7)의 결과는 양수이며 0보다 큰 값을 반환하게 됩니다.
  5. 반환 값이 0보다 크므로 배열에서 값의 위치를 바꿉니다.
    즉, [26, 7, 101, 1234]가 됩니다.

  6. 다시 함수를 호출하면서 101과 1234를 넘겨줍니다.
    one(101) - two(1234)의 결과는 음수이며 0보다 작은 값을 반환하게 됩니다.
  7. 반환 값이 0보다 작거나 같으면 배열에서 값의 위치를 바꾸지 않습니다.
    따라서, [26, 7, 101, 1234]가 됩니다.

  8. 다시 처음으로 돌아가 바뀌는 것이 없을 때까지 배열의 엘리먼트 위치를 조정합니다.

sort 알고리즘

  1. sort 메소드 호출 -> 콜백함수 호출
  2. 위 코드에서 파라미터 두개를 콜백함수로 던져줌
  3. 첫번째 파라미터 - 두번째 파라미터
  4. 결과가 양수이면 값의 위치를 바꾸고 음수이면 값의 위치를 바꾸지 않는다.
  5. 위치바꿈이 없을 때까지 콜백함수 호출

콜백함수엔 식을 작성해 리턴값을 양수 또는 음수로 던져준다.
콜백 함수의 코드를 작성한다는 것은 위 콜백 함수 안에다가 다른 알고리즘을 작성할 수 있다는 뜻이된다.
예를 들면 two - one을 할 수도 있다.
그러면 반환값이 바뀐다.

이것이 sort 알고리즘의 전체이다.


코딩시간

  • 요구사항

      var value = [101, 26, 7, 1234];
    

    배열의 엘리먼트 값을 역순으로 정렬하세요.


  • 힌트

    • sort() 메소드는 역순 정렬을 제공하지 않습니다.
    • 하지만 sort() 메소드의 콜백 함수를 사용하여 역순으로 정렬할 수 있습니다.
    • 앞 페이지 sort 알고리즘을 참조하세요

var value = [101, 26, 7, 1234];
value.sort(function (one, two) {
    return two - one;
})
// [1234, 101, 26, 7]

reverse()

구분데이터(값)
data대상
파라미터사용하지 않음
반환결과

  • 배열의 엘리먼트 위치를 역순으로 바꿈

    • 엘리먼트 값이 아닌 인덱스 기준
    • 대상 배열도 바뀜

        var value = [1, 3, 7, 5];
        console.log(value.reverse()); // [5, 7, 3, 1]
        console.log(value); // [5, 7, 3, 1]