sort

• Array 배열에서 사용 가능한 정렬 함수
• 원래 배열 자체를 수정한다.
• 가나다순 정렬, 내림차순, 오름차순 정렬 등 가능
• Array배열.sort(function(a,b){return compareFunction})형식으로 사용
• function에서 파라미터 없이 쓸 경우 아스키 문자 기준으로 정렬해서 모든 데이터를 문자로 인식하여 배열하므로 숫자 크기대로 정렬되지 않음

처음에 강의만 듣고 오름차순 내림차순 정렬 적용 원리가 이해되지 않다가 구글링을 두 글을 읽고 이해하게 되었다.

내림차순 원리 이해 https://brunch.co.kr/@swimjiy/12
오름차순 원리 이해 https://noirstar.tistory.com/359

내림차순, 오름차순대로 정렬하려면 compareFunction에 배열의 요소를 2개씩 보내고, 그 반환값을 기준으로 정렬을 한다.

반환값이 양수면 두 요소의 자리를 바꾼다.

반환값이 음수면 두 요소의 자리를 바꾸지 않는다.

sort 오름차순 정렬

<script>
//오름차순 정렬(작은 것부터 큰 것 순으로)
var ex = [4,1,3,7,8,89];
ex.sort(function(a, b){
	return a - b;
});
//a, b는 ex의 데이터 하나하나를 의미하는 파라미터를 의미한다.

console.log(ex);
//[1,3,4,7,8,89]
</script>

• a-b>0 이면(반환값이 양수이면) 두개 자리를 바꿔버린다.
• a-b =0 이면 순서를 바꾸지 않는다.
• a-b<0 이면 a<b를 의미하므로 a를 앞에, b를 뒤에 둔다는 의미이다.

ex의 배열 중 숫자 두개로 예시를 들어보면

var ex = [4,1,3,7,8,89];
ex.sort(function(a, b){
	return a - b;
});

a = 4, b = 1 일 경우

a-b = 4-1 = 3, 반환값이 양수이므로 
a와 b의 순서를 바꾼다.
[1,4...] 이런식으로 배열된다

따라서 작은거부터 큰거 순(오름차순) 정렬이 된다

sort 내림차순 정렬 원리

<script>
//내림차순 정렬(큰 것부터 작은 거 순으로)
ex.sort(function(a,b){
	return b - a;
});
//a, b는 ex의 데이터 하나하나를 의미하는 파라미터를 의미한다.

console.log(ex);
//[89,8,7,4,3,1]
</script>

ex 배열로 예시를 들어보면

var ex = [4,1,3,7,8,89];
ex.sort(function(a, b){
	return b - a;
});



a = 4, b = 1
b-a = 1-3 = -2 < 0
반환값이 음수이므로 두 개 순서는 바꾸지 않는다.
따라서 [...4,1]식으로 정렬된다.

번외편 - 문자 역정렬법(일명 다나가순)

역정렬 바로 들어가기 전에 일단 알아야 할 사실!

• 자바스크립에서 문자는 부등호 사용을 통해 비교가 가능하다. 뒤로 갈 수록 큼
• ex) '가' < '나' => true

이 사실과 함께 정렬의 원리인

• 반환값이 양수면 자리를 바꾸기, 음수거나 0이면 자리를 바꾸지 않는다를 적용할 것

<script>
var arr = ['a', 'c', 'b'];
arr.sort(function(a, b){

	//a = 'a', b = 'c'일 경우(a < b 일경우), 자리를 바꿔라(return 양수)
    //a = 'a', b = 'b'일 경우(a < b 일경우), 자리를 바꿔라(return 양수)
    //a= 'c', b = 'b'일 경우(a > b 일경우), 그대로 둬라(return 음수)

	if(a < b){
    	return 1;
    }
    if(a > b){
    	return -1;
    }
    else{return 0;}
})
</script>

console.log(arr);//['c', 'b', 'a']
//['']

map

• 적용할 array배열.map(function(a){return 적용할 식;})
• function 함수를 적용해서 배열을 새로운 배열을 만드는 함수
• 원래 array와 별개로 새로운 배열을 생성하기 때문에 배열 자체가 수정되지는 않음
• 변수 따로 선언해야함

<script>
var ex = [4,1,3,7,8,89];
var ex2 = ex.map(function(a){
	return a * 10;
})

console.log(ex2);
//[40, 10, 30, 70, 80, 890]
</script>

filter

• 적용할 array 배열.filter(function(a){return 조건문});
• array 배열 데이터 중 조건문에 맞는 데이터만 모아 새로운 배열을 만드는 함수
• 원래 array와 별개로 새로운 배열을 생성하기 때문에 배열 자체가 수정되지는 않음
• 변수 따로 선언해야함

<script>
	var ex = [4, 1, 3, 7, 8, 89];
      var new_ex = ex.filter(function (a) {
        return a < 10;//10미만인 데이터만 모아주세요
      });

      console.log(new_ex);
      //[4, 1, 3, 7, 8]
</script>