js sort 함수로 정렬해버리기

sort() 로 문자정렬

    <script>
      const words = ['aaa', 'bbb', 'ccc', 'aba'];
      console.log(words.sort());
    </script>

array.sort()

 

sort 함수는 배열에 있는 문자를 사전에서 글자순으로 나열해 주듯이 잘 정렬해주는 고마운 함수임.

---

sort(function(a,b) { return a-b }) 로 숫자정렬

 

근데 쌩 sort() 만으로 배열에 있는 숫자를 정렬해보려고 하면 조금 이상함.

 

    <script>
      const numbers = [5, 30, 2, 8];
      console.log(numbers.sort());
    </script>

 

엥 이거 뭐냐 왜 2, 5, 8, 30 아님?

왜냐면 그냥 쌩 sort() 함수를 갖다 쓰면 사전에서 찾듯이 첫글자부터 비교하기 때문임.

 

그래서 숫자를 정렬할때는 콜백함수를 넣어야 함

    <script>
      const numbers = [5, 30, 2, 8];
      console.log(
        numbers.sort(function (a, b) {
          return a - b;
        })
      );
    </script>

 

콜백 함수를 왜 넣냐고 ? 그건 그냥 자바스크립트 만든사람이 그렇게 쓰랬음.

작동방식을 보자면은
===============================================

numbers = [5, 30, 2, 8];

배열에 있는 5, 30, 2, 8을 매개변수로 준 a,b에 순서대로

a 에 5, b에 30, 

a 에 30, b에 2,

a 에 2, b에 8,

a 에 5, b에 2

.........

이런식으로 컴퓨터가 다 한번씩 넣어보는데 

a - b 를 해서 음수가 나오면 a를 왼쪽으로 b를 오른쪽으로 남긴다.

a - b 를 해서 양수가 나오면 a를 오른쪽으로 b를 왼쪽으로 넘긴다.

===============================================

이런식으로 동작함.

이렇게 하나하나 다 비교해보고 정렬이 됨.

 

 

---

sort(function (a,b){ return a[key] - b[key] }) 로 객체 정렬

 

① 객체 안의 숫자데이터를 기준으로 정렬

sort() 로 배열에 있는 객체도 정렬을 할수가 있는데,

 

    <script>
      const items = [
        { name: 'Coconut', value: 45 },
        { name: 'Banana', value: 37 },
        { name: 'Five', value: 37 },
        { name: 'Donut', value: -12 },
        { name: 'Apple', value: 21 },
        { name: 'Egg', value: 13 },
      ];
      console.log(
        items.sort(function (a, b) {
          return a.value - b.value;
        })
      );
    </script>

value 가 작은 것부터 잘 정렬됨.

 

② 객체 안의 문자데이터를 기준으로 정렬

 

근데 name 에는 string 이 들어가있는데 이것도 잘 될까여?

모르면 해봐야지

 

    <script>
      const items = [
        { name: 'Coconut', value: 45 },
        { name: 'Banana', value: 37 },
        { name: 'Five', value: 37 },
        { name: 'Donut', value: -12 },
        { name: 'Apple', value: 21 },
        { name: 'Egg', value: 13 },
      ];
      console.log(
        items.sort(function (a, b) {
          return a.name - b.name;
        })
      );
    </script>

 

엥 이거는 안되네

왜냐면 

a.name - b.name 이 결과가 뭐에여 여러분들?

NaN 입니다.

근데 아까 sort 작동방식이 뭐랬져 ?

return 에 있는게 음수가 나오면 어쩌구 양수가 나오면 어쩌구랬잖아여

근데 NaN을 퉤 뱉으니까 고장난거임.

그래서 객체에 있는 string 을 기준으로 정렬할때는 다른 방식이 필요함다.

 

<script>
	items.sort(function (a, b) {
  		if (a.name > b.name) {
    			return 1;
  		} else if (a.name < b.name) {
    			return -1;
  		} else {
    			return 0;
  		}
	})
</script>

혹은 더 줄인다면은

<script>
	items.sort(function (a, b) {
      	return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
    })
</script>

정도가 되겟네여.

 

참고사항

참고로 sort() 함수는 원래 자료를 바꿔버립니다.

자매품으로 map() 함수 , filter() 함수가 있는데 얘네는 안그럼.

무슨 소리냐면 

 

    <script>
      const items = [3, 6, 2, 4, 1];
      items.sort();
      console.log(items);
    </script>

 

items 는 원래 3, 6, 2, 4, 1 순서인 배열이었는데 

이제 items 는 1, 2, 3, 4, 6 순서인 배열로 원본 배열이 바뀌어버렸음.

 

map 함수나 filter 이런 애들은 비교적 최근에 생긴 신문법들인데

    <script>
      const items = [3, 6, 2, 4, 1];
      const changedItems = items.map((item) => item * 2);
      console.log(items);
      console.log(changedItems);
    </script>

얘네들은 원본 배열을 바꾸지 않음.

map 은 간단히 얘기하면 원래 배열 전부에다가 뭔가를 처리해주고 다시 배열로 돌려주는 애인데

map 이나 filter 함수는 나중에 정리하겠음.