시베리안 허숙희의 자바스크립트 비기닝 22 ( sort 확장...)

자바스크립트

by e7e 2023. 6. 18. 15:07

지난 글

2023.06.16 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 21

마지막에 남긴 대로 배열의 sort(콜백) 메소드를 한번 직접 구현해 보장!

(구현 자체는 구현하는 사람의 생각 수 만큼이나 많을 것이고 로직 흐름도 다를 수 있을 거시당)

아래 코드는 shy와 귀차니즘을 이겨 낸 나의 코드당. (분명 이해엔 도우미 되리랑 but Not 모든 경우!)

(뽀인또라 주석달린 부분에 주목하면서, 테스트 결과에 집중하면 분명 이해가 될 거시당)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
//나만의 배열 클래스 선언
const MyArray = function(){
    this.length = 0;
}

//테스통을 위해 필요해서 한번 더 가져다 쓰는 걸롱
MyArray.prototype.push = function(pElem){
    this[this.length] = pElem;
    this.length++;
    return this;   // 메소드 체인닝
}

//sort(콜백) 구현, 콜백없는 기본 sort는 여기선 생략
MyArray.prototype.sort = function(pCallback){
    for (let i = 0; i < this.length; i++) {
        for(let j=i+1; j< this.length; j++){
// 기존 코드  if (this[i] < this[j]) {     
            /*   
             요기가 뽀인또로 콜백의 return값(양수)에 의해 정렬 실행 여부 결정
             만약 매개변수(콜백)이 없으면, 무조건 
            */
            let cond = !pCallback? this[i] -this[j]:pCallback(this[i],this[j]); 
            if ( cond > 0 ) {       
                let temp = this[i];
                this[i] = this[j];
                this[j] = temp;
            }
        }
    }
    return this; // 메소드 체인닝용
}

//테스통 시작, 배열 생성
const testArr = new MyArray();
// 더미 데이터 랜덤 열갱 생성
for(let i=1; i<=10; i++){
    testArr.push( Math.ceil(Math.random()*10));
}
// 출력이 헷갈리는 걸 방지
let cloneArr = structuredClone(testArr);
console.log("원본  : ",cloneArr);


// 기본 정렬(오름차순)
testArr.sort();
cloneArr = structuredClone(testArr);
console.log("정렬1 : ",cloneArr);


// 정렬 오름차순
testArr.sort((a,b)=>{
    return a - b;
});
cloneArr = structuredClone(testArr);
console.log("정렬2 : ",cloneArr);

// 정렬 내림차순
testArr.sort((a,b)=>{
    return b - a;  // 내림차순
});
cloneArr = structuredClone(testArr);
console.log("정렬3 : ",cloneArr);
</script>

혹여 이해가 조금 더디다면, ? 삼항연산자 부분을 if문으로 고치든가, 추가적인 console.log를

필요한 부분에 추가하는 등, 값 추적에 시간 투자를 한다면,

누니 따라오고, 누니 움직이면 머리도 움직인당!

사실 요기까지는 두 세번의 연습을 통해 기본적으로 대부분 잘 쓴당!(전 아닌데용? 딴 생각해서 그렇당!~~)

쪼메만 상황을 복잡(이런 상황이 현업에서 더 일반적이당)하게 아래와 같은 데이터가 있다 치장!

// 단순 넘버, 문자열 값이 아닌 객체요소를 가진 배열
const newJeans = [
    {name:"민지",age:19,height:169,mbti:"ESTJ"},
    {name:"하니",age:18,height:162,mbti:"INFP"},
    {name:"다니엘",age:18,height:165,mbti:"ENFP"},
    {name:"혜린",age:17,height:165,mbti:"ISTP"},
    {name:"혜인",age:15,height:170,mbti:"INFP"}    
];

이런 경우 무작정 정렬은 의미가 없당, 어떤 객체가 어떤 객체 보다 크고 작은지 비교 기준이 없당!

위의 경우 현실을 살고 있는 사람이라면, name, age, height, mbti 속성이

정렬기준으로 (DB도 컬럼값 기준으로 정렬하지 않던가?) 그냥 누네 들어온당!

객체 자체가 아닌 객체의 속성 기준으로 정렬해야 하는 것이다.( 속성값의 크기를 비교하면 된단 이야깅!)

아마 가능하다면 잠시 생각해 보고 나서(하는 척이라도 하장), 아래 코드를 보장

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
const newJeans = [
    {name:"민지",age:19,height:169,mbti:"ESTJ"},
    {name:"하니",age:18,height:162,mbti:"INFP"},
    {name:"다니엘",age:18,height:165,mbti:"ENFP"},
    {name:"혜린",age:17,height:165,mbti:"ISTP"},
    {name:"혜인",age:15,height:170,mbti:"INFP"}
];  

// name 순으로 정렬
newJeans.sort((a,b)=>{
    if(a.name > b.name) return 1;       // 크다
    else if(a.name == b.name) return 0; // 같다
    else return -1;                     // 작다
});
let arrClone = structuredClone(newJeans);
console.log("이름  오름차순: ",arrClone);

newJeans.sort((a,b)=>{
    if(a.name < b.name) return 1;       
    else if(a.name == b.name) return 0; 
    else return -1;                     
});
arrClone = structuredClone(newJeans);
console.log("이름  내림차순: ",arrClone);

// 키 순으로 정렬
newJeans.sort((a,b)=>{
    return a.height - b.height;
});
arrClone = structuredClone(newJeans);
console.log("키  오름차순: ",arrClone);

newJeans.sort((a,b)=>{
  return b.height - a.height;                  
});
arrClone = structuredClone(newJeans);
console.log("키  내림차순: ",arrClone);
</script>

느낌이 왔다면, age와 mbti 기준 정렬은 직접 한번 해보도록 하장(손가락 협업이 없으면 기억흐리당)

코드 소스가 잘 이해되었다면 훌륭하당!(자바의 Comparator도 설계가 갑자기 그냥 이해 될거시당)

이렇게 해서 배열의 요소가 넘버, 문자열, 객체인 경우에서 정렬하는 법과 sort 메소드도 직접 구현해

봄으로써 이해도를 높여, sort에 콜백을 적용하는 데 마음이 그냥 이 이상 더 편할 수가 없당.

(전 아닌데용!!! -> 아직도 딴 생각이 중이라닝!! ㅠㅠ 딴생각이 곧 버그당!~~)

눈이 빠른 사람은 머릿속에 형광등이 켜졌을 거당!

배열의 요소에 넘버와 문자열이 믹스 된다면 어케 될깡?(왜 같은 데이타타입을 써야 좋을깡?)

요 문제는 직접 해 보는 걸로 하공, 힌트만 아래 처럼 주겠당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
alert("abA".charCodeAt(0)); // a의 ASCII Code값
alert("abA".charCodeAt(1)); // b의 ASCII Code값
alert("abA".charCodeAt(2)); // A의 ASCII Code값

alert("꺄륵".charCodeAt(0));     // 꺄의 유니코드 값   
alert("꺄륵".charCodeAt(1));     // 륵의 유니코드 값

// 자동 형변환 단어를 떠 올려보장
alert("a" > 27);               // false 왜? 아래와 다름
alert("a" > "27");             // ture  왜? 위와 다름

// 우리가 구현한 sort메소드는 데이타 타입이 다른 경우를 처리 안했지만
// 자스가 제공하는 배열의 sort메소드는 이 부분이 처리되어 있당
alert(["aa","흥","아",3,"3",6].sort());
</script>

만약 누느로만 보고, 응 그렇구낭 했다면 꼬옥 손으로 체험학습 한번 하장!

(물에 빠져도 입만 살아서 물위로 입만 두둥실 떠다닐 거란 말은 듣지 말장 -> 그건 욕이거나 꺄륵 개그당)

드라마 낭만닥터 김사부에는 참 좋은 대사가 많이 나온당!, 선택에 정답이 없다 말한당!

드라마적인 드라마틱한 요소가 실제 현실과는 거리가 있긴 하지만 현실에서 만나는

고민과 문제를 누네띠게 메세지화해서 잘 던지고 있당

두려움을 용기로 바꿀 수만 있다면....

오해와 편견을 이해와 공감으로 바꿀 수만 있다면....

문제를 만남에 회피만 선택하는 사람이 가끔은 정면돌파를 선택하게 할 수 있다면...

큰 손 잡으려 않고, 작은 손 잡아 주고 쓰다듬어 줄 수 있다면...

허망하게도... 살면서 이런 일이 일어나는 확률은 경험상 아주 히미하당!

선명함이 흔함의 홍수속에 묻히고, 히미함이 희소성으로 선명하게 빛난당.

이런 결과의 역설은 의외로 많아, 추억의 곳곳에는 후회스런 무용담도 넘친당!

그 모든 추억 하나 하나 아름답지 않은 것이 없으니, 인생 배열에 잘 담고 가끔은 정렬시키장!

https://www.youtube.com/watch?v=GHo4VptGMyo

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

시베리안 허숙희의 자바스크립트 비기닝 24 (JSON 유틸) (2)	2023.06.20
시베리안 허숙희의 자바스크립트 비기닝 23 (ArrayList, HashMap도..) (0)	2023.06.19
시베리안 허숙희의 자바스크립트 비기닝 21 (sort 직접 맹글깅) (1)	2023.06.16
시베리안 허숙희의 자바스크립트 비기닝 20 (prototype 프로토타입) (2)	2023.06.16
시베리안 허숙희의 자바스크립트 비기닝 19 (this 키워드) (0)	2023.06.15