시베리안 허숙희의 자바스크립트 비기닝 21 (sort 직접 맹글깅)

자바스크립트

by e7e 2023. 6. 16. 18:13

배열의 sort는 이해한 만큼 쓸 수 있어 그 만큼 중요하당. 내림차순 올림차순 생강(쓰당)난당!

sort는 정렬이고, 정렬되어 있는 것은 보기 좋으니, 찾기 쉽고, 쓰기 쉽당!~~

생강은 쓰나 몸에는 좋당. 그럼 몸에 좋은 건 다 쓴강?, 고통이 과하면 엔돌핀 방출?

sort(정렬)을 이해하기 위해서, 배열 속의 값중 최대값을 구하는 걸 먼저 한번 보장

아래 코드 처럼 작성할 수 있을 거당.(if문 안의 부등호 > 을 < 로 바꾸면 최소값이겠당)

괘니 그냥 for문 대신 forEach 메소드 한번 써 보았당!ㅡ

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    var numArr = [5, 4, 7, 2, 8, 9, 1, 3, 2,6];

    // MAX값 구해 보깅
    var numMax = numArr[0];  // 첫번째 값이 MAX라 가정
    numArr.forEach((value,index)=>{
        if(value > numMax){  // 더 큰 값이 오면 변수값 더퍼쓰깅
            numMax = value;
        }
    });
    alert("체킁 numMax: " + numMax);
</script>

쉽당! 변수에 들어있는 값보다 큰게 있으면 무조건 그 값으로 변수를 더퍼쓴당.

sort(정렬)을 위해선, 값을 더퍼쓰면 안되고, 서로 자리를 바꿔야 하는 게 뽀인토당!

보통 두개 변수의 값만 바꾸는 건, 임시 저장 변수 1개 추가를 통해 아래처럼 해결한당.

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
   var roze = "로젱";
   var jenni = "제닝";

   //두 변수의 값 교환하깅
   var temp = roze;
   roze = jenni;
   jenni = temp;

   alert(`roze=${roze}, jenni=${jenni}`);
</script>

배열 속의 숫자 중 가장 큰 숫자가 제일 앞에 오게 하는 걸 먼저 해보장!

대략 아래 코드와 비슷하게 짤것이당.(혹 누네 익숙치 않은 사람이 있다면

꼭 종이에 index별 값 바뀜을 손으로 써서 누느로 확인하기 바란당 - 매우 중요하당)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    var numArr = [5, 4, 7, 2, 8, 9, 1, 3, 2,6];

    //MAX값을 index 번호 0에 오게 하깅
    for (let j = 1; j < numArr.length; j++) {
        if (numArr[0] < numArr[j]) {  // 두개의 값 자리바꾸는 일반 로직
            var temp = numArr[0];
            numArr[0] = numArr[j];
            numArr[j] = temp;
        }
    }
    alert("체킁 index 0번 값에 주목 " + numArr);
</script>

첫번째 가장 큰 수 9가 와 있당!( 종이에 쓴 본인의 숫자 순서와 최종결과 일치? 중요)

이제 위의 방식을 2번째 다음엔 3번째에도 적용한다면 아래와 같을 것이당

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    var numArr = [5, 4, 7, 2, 8, 9, 1, 3, 2, 6];

    //MAX값을 index 번호 0에 오게 하깅
    for (let j = 1; j < numArr.length; j++) {
        if (numArr[0] < numArr[j]) {  // 두개의 값 자리바꾸는 일반 로직
            var temp = numArr[0];
            numArr[0] = numArr[j];
            numArr[j] = temp;
        }
    }
    alert("체킁 index 0번 값 " + numArr);


    //index 0번 제외한 MAX값을 index 번호 1에 오게 하깅
    for (let j = 2; j < numArr.length; j++) {
        if (numArr[1] < numArr[j]) {  // 두개의 값 자리바꾸는 일반 로직
            var temp = numArr[1];
            numArr[1] = numArr[j];
            numArr[j] = temp;
        }
    }
    alert("체킁 index 0,1번 값 " + numArr);


    //index 0번,1번 제외한 MAX값을 index 번호 2에 오게 하깅
    for (let j = 3; j < numArr.length; j++) {
        if (numArr[2] < numArr[j]) {  // 두개의 값 자리바꾸는 일반 로직
            var temp = numArr[2];
            numArr[2] = numArr[j];
            numArr[j] = temp;
        }
    }
    alert("체킁 index 0,1,2번 값 " + numArr);

</script>

결과가 누네 들어 올 거시당. for문 안의 j변수 값과 if문 안의 numArr[고정숫자]에 주목하장

위의 방식으로 하면 개발자가 매번 배열의 요소 갯수 만큼 for문을 써야 한당(소름끼친당!)

j변수값과 고정숫자(i변수로 할당)의 변화패턴에 주목하면 아래처럼 2중 for문 처럼 고쳐진당.

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    var numArr = [5, 4, 7, 2, 8, 9, 1, 3, 2, 6];

    for (let i = 0; i < numArr.length; i++) {
        for(let j=i+1; j< numArr.length; j++){
            if (numArr[i] < numArr[j]) { 
                var temp = numArr[i];
                numArr[i] = numArr[j];
                numArr[j] = temp;
            }
        }
    }
    alert("체킁 최종 정렬 상태 " + numArr);
</script>

위 정렬방식을 보통 버블 정렬이라 부르고, 정렬 알고리즘 중에 가장 쉽당.

현재 내림차순(크기가 작아짐)인데 부등호만 바꾸면 오름차순이 된당!. (뭐얌 쉽잖앙!)

억지로 크기 비교해서 자리바꿈 하는 if문 블락을 별도 함수로, 괘니 따라서 버블정렬하는

부분도 별도 함수로 빼내어 정리하면 대략 아래와 같아진당.(이상하게 정리하면 별거없당!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    //테스통 데이터
    var numArr = [5, 4, 7, 2, 8, 9, 1, 3, 2, 6];

    //배열 자리바꿈 함수(매개변수-> 배열,서로바꿀 index 2갱)
    const posChg = function (pArr, pI, pJ) {
        if (pArr[pI] < pArr[pJ]) {
            var temp = pArr[pI];
            pArr[pI] = pArr[pJ];
            pArr[pJ] = temp;
        }
    }

    //버블 정렬 함수(매개변수 -> 배열)
    const bubbleSort = function (pArr) {
        for (let i = 0; i < pArr.length; i++) {
            for (let j = i + 1; j < pArr.length; j++) {
                posChg(pArr, i, j);
            }
        }
        return pArr;
    }
    alert("체킁 최종정렬 " + bubbleSort(numArr));
</script>

이제 그럼 배열객체에 이미 구현되어 있는 sort 메소드 사용법을 한번 보장

<script>
    //테스통 데이터
    var numArr = [5, 4, 7, 2, 8, 9, 1, 3, 2, 6];

    alert(numArr.sort()); //결과 오름차순
    
    alert(numArr.sort((a,b)=>{
        return a-b;            // 오름 차순
    }));

    alert(numArr.sort((a,b)=>{
        return b-a;           // 내림 차순
    }));

</script>

그냥 sort()만 쓰면 기본 오름차순이당.(머 그렇당, 우린 내림차순으로 맹글었는뎅..)

sort(콜백함수) 형태를 통해, 오름차순/내림차순을 선택할 수 있당!(괜찮당, 설명할거당)

지금까진 배열 요소가 넘버(숫자)였당, 문자열이면 어케 될깡?(해보장)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    //테스통 데이터
    var strArr = ["로제","제니","리사","지수","주성치"];
    
    alert(strArr.sort((a,b)=>{    // 안된당
        return a-b;
    }));

    alert(strArr.sort((a,b)=>{   // 안된당
        return b-a;
    }));

    alert(strArr.sort());           // 된당   
    alert("로제" - "제니");         // 문자열 빼기 확인용
</script>

헉 기본 메소드 sort()만 되공, sort(콜백)형태는 안된당! (왜엥?)

return a-b의 형태에서 추측, 숫자로 바꿀수 없는 문자열은 빼기를 하면 어떻게 될깡?(NaN이당)

그래서 크기 비교가 안되었당.~~ ㅠㅠ

문자열은 빼기는 할 수 없지만 크기를 비교하면 아스키코드나 유니코드순으로 비교되어

누가 앞이고 누가 뒤인지 순서는 비교할 수 있당! 그래 이걸 이용하장! 코드를 수정하장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    //테스통 데이터
    var strArr = ["로제","제니","리사","지수","주성치"];
    
    alert(strArr.sort((a,b)=>{    // 된당
        if ( a > b) return 1;
        else if( a == b) return 0; 
        else return -1;
    }));

    alert(strArr.sort((a,b)=>{   // 된당
        if (b > a) return 1;
        else if( a == b) return 0; 
        else return -1;
    }));

    alert(strArr.sort());           // 된당   
</script>

다행이당! 잘 되고 무언가 느낌이 쪼메 오면서 히미하당! 선명하지 않당!

사용법은 느낌은 오지만, 무언가 답답한 느낌이당. 당연하당

콜백이 내부에서 어떤 역할을 해주는지 해소되지 않았당. 계속 궁금할 거시당!

이미 글의 기럭지가 기러졌으닝, 다음 글에서 sort(콜백) 메소드를 직접 구현해서

궁금증을 해소 하는 것으로 하장

시대가 변하고, 그에 따라 진실이 달라지고, 사람의 행동이 바뀌고, 감정의 크기가 재분배 되듯,

프로그램 공부도 시작 때 느낌과 365일 지났을 때 느낌이 전혀 다르죵,

이젠 코드를 보는 눈이 방황하지 않고, Peace Of Mind POM.xml의 느낌처럼 편해졌길........

https://www.youtube.com/watch?v=4yj0OXDCOuw

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 23 (ArrayList, HashMap도..) (0)	2023.06.19
시베리안 허숙희의 자바스크립트 비기닝 22 ( sort 확장...) (1)	2023.06.18
시베리안 허숙희의 자바스크립트 비기닝 20 (prototype 프로토타입) (2)	2023.06.16
시베리안 허숙희의 자바스크립트 비기닝 19 (this 키워드) (0)	2023.06.15
시베리안 허숙희의 자바스크립트 비기닝 18 (구조 분해 등등..) (0)	2023.06.14