시베리안 허숙희의 자바스크립트 비기닝 23 (ArrayList, HashMap도..)

자바스크립트

by e7e 2023. 6. 19. 16:14

function 키워드를 class의 의미로 사용하여 직접 배열 클래스를 속성 length,

그리고, 콜백을 사용하는 메소드들도 추가하여 요래 조래 맹글어 보았당.

아직 느낌이 조금 충분하지 않을 수도 있을 것이다.

Java의 ArrayList를 자바스크립트로 맹근다면 대략 아래와 같을 것이당

Java API문서와 완전히 동일하게 맹글지는 않았당(왱?, 갖고 놀길 바란당!)

머징!, 낯설지 않당, 배열 만들 때와 거의 같은 패턴이당!(음.... 요따구로 하는구망!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// ArrayList 직접 맹글어보깅!
// 메소드 전부 다하는 건 과하니 add, size, get, set, 
// contains, remove, clear 정도(자주 보는 것)만 추가해보장
const ArrayList = function(){
    this.length = 0;
    return this;     // 명시적 표현 생략가능!
}

// add
ArrayList.prototype.add = function(pElem){
    this[this.length] = pElem;
    this.length++;
    return this;
}

// size
ArrayList.prototype.size = function(){
    return this.length;
}

// get
ArrayList.prototype.get = function(pIndex){
    return this[pIndex];
}

// set
ArrayList.prototype.set = function(pIndex,pElem){
    this[pIndex] = pElem;
}

// contains
ArrayList.prototype.contains = function(pElem){
    for(let i=0; i < this.length; i++){
        if(this[i] == pElem){
            return true;
        }
    }
    return false;
}

// remove
ArrayList.prototype.remove = function(pIndex){
    delete this[pIndex];
    this.length--;
}

// clear
ArrayList.prototype.clear = function(){
    for(let i=0; i<this.length; i++){
        delete this[i];
    }
    this.length = 0;
    return this;
}

// 테스통
const tListArray = new ArrayList();  // 생성
console.log("초기화: ", tListArray);

// 값 추가
tListArray.add("로제"); tListArray.add("제니");
tListArray.add("리사"); tListArray.add("지수");
console.log("add후: ", tListArray);


// get/set/contains 테스트
console.log("get0: ", tListArray.get(0));
tListArray.set(3,"shakira");
console.log("set후: ", tListArray.contains("shakira"));

// remove/size/clear 테스트
console.log("remove전 size : ",tListArray.size());
tListArray.remove(2);
console.log("remove 후 size: ",tListArray.size());
console.log("remove 후: data",tListArray);

tListArray.clear();
console.log("clear 후: ",tListArray);

</script>

실행을 통해 결과를 확인하면, remove의 결과가 맘에 안든당.

index번호가 중간에 구멍이 나 버린당.(원치 않는 내용이당. 빈틈없는 순서를 원한당!)

remove 메소드는 아래처럼 고치면 좋을 거시당(코드가 맘에 안들면 맘껏 본인 스타일로)

// remove
ArrayList.prototype.remove = function(pIndex){
	// pIndex부터 하나씩 뒤에 껄로 땡겨 더퍼쓴당
    for(let i=pIndex; i< (this.length -1); i++){
        this[i] = this[i++];
    }
    // 마지막 껀 필요없어 진당
    delete this[this.length-1];
    this.length--;
}

내친 김에 HashMap도 비슷하게 맹글 수 있을 것 같당. 해본당

결국 index가 숫자로 사용되는 데, Map에선 숫자 대신 문자열을 쓰면 될꺼이당.

각자 취향에 따르겠지만, 아래 처럼 맹글 수 있을 것이당.(꼬옥 로그를 화긴하장!)

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// Java 패키지 흉네
const java = {};
java.util = {};

// HashMap class
java.util.HashMap = function(){
    this.length = 0;
}

// put
java.util.HashMap.prototype.put=function(pKey,pValue){
    this[pKey] = pValue;
    this.length++;
    return this;  // 메소드 체인닝!
}

// get
java.util.HashMap.prototype.get=function(pKey){
    return this[pKey];
}

// remove
java.util.HashMap.prototype.remove=function(pKey){
    delete this[pKey];
    return this; // 메소드 체인닝
}

// forEach
java.util.HashMap.prototype.forEach=function(pCallback){
    for(let key in this){
        if(this.hasOwnProperty(key)){
            pCallback(key,this[key]);
        }
    }
    return this; // 메소드 체인닝
} 

// clear
java.util.HashMap.prototype.clear = function(){
    for(let key in this){
        if(this.hasOwnProperty(key)){
            delete this[key];
        }
    }
    return this; // 메소드 체인닝
}

// size
java.util.HashMap.prototype.size = function(){
    return length;
}

// 테스통
const rozeMap = new  java.util.HashMap();
console.log("rozeMap 초기화: ",rozeMap);

rozeMap.put("이름","로제");
rozeMap.put("나이",26);
rozeMap.put("노래",["Gone","Ground"]);
rozeMap.put("MBTI","ENFP");
console.log("put 후 rozeMap: ",rozeMap);

console.log("get :",rozeMap.get("노래"));
rozeMap.forEach((pKey,pVal)=>{
    console.log("forEach: ",pKey,pVal);
});

rozeMap.remove("MBTI");
console.log("remove 후 rozeMap: ",rozeMap);

rozeMap.clear();
console.log("clear 후 rozeMap: ",rozeMap);

</script>

차분히 보았다면, 역시 코드 기럭지만 길었지, 느낌적인 느낌 패턴의 반복이당.

가끔은 원래 이런거야 하고, 당연하게 쓰는 걸 돌아볼 필요가 있당.

누구나 만들 수 있는 것도 많고, 만들면 이해도 깊어진당. 가끔 도전해보장!

넌 누구닝?, 아두 오랜만에 내 앞의 낯선 내게 질문을 던진다.

쟤가 정말 거울속에 있는 걸까?, 쟤가 거울밖에서 거울 안의 날 보는 건 아닐까?

하지 말았어야 했당. 또 지옥의 삼투압 도돌이 늪이당.!!!!

하지만 이젠 안당 간단히 외면하고 뒤돌아 서기만 하면 그 때 출구가 보인다는 걸!.

내게 낯선 나야 이젠 Go Away!

https://www.youtube.com/watch?v=3yW13T2sfKg

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

시베리안 허숙희의 자바스크립트 비기닝 25 (LocalStorage...) (0)	2023.06.21
시베리안 허숙희의 자바스크립트 비기닝 24 (JSON 유틸) (2)	2023.06.20
시베리안 허숙희의 자바스크립트 비기닝 22 ( sort 확장...) (1)	2023.06.18
시베리안 허숙희의 자바스크립트 비기닝 21 (sort 직접 맹글깅) (1)	2023.06.16
시베리안 허숙희의 자바스크립트 비기닝 20 (prototype 프로토타입) (2)	2023.06.16