JAVASCRIPT ) 자료구조

데이터 프로세싱

자료처리(데이터 프로세싱)란 수학적 방법을 통해

무의미한 데이터를 유의미한 데이터로

정렬되지않은 데이터를 정렬된 데이터로

의사결정을 할 수 없는 데이터를 의사결정이 가능한 데이터로

만드는 과정  

자료구조

 

 

1. Stack - LIFO (Last In Frist Out) : 자료의 역전
   • 자료를 넣는 행위를 push, 꺼내는 행위를 pop이라고 칭한다.
2. Queue - FOFO (First In Frist Out) 구조
   • 자료를 넣는 행위를 push, 꺼내는 행위를 shift라고 칭한다.
   • 1. linearQ - 순환되지않는 구조
     2. circleQ - 순환 구조
   • buffer(성능100%일때 성능저하를 막는 목적)나 cache(성능이100%일때 성능을 끌어올리는 목적)도 Queue의 형태이다.
3. Deck(Deque) - 양방향 구조

 

Stack 구조 코드화

class Stack {
    constructor(id){
        this.id = id;
        this.array = [];
        this.itemLength = 0;
    }
    pushItem(item){
        this.array.push(item);
    }
    popItem(){
        return this.array.pop();
    }
    countItem(){
        this.itemLength = this.array.length;
    }
}

const stack1 = new Stack('stack');
stack1.pushItem('a');   //a 넣기
stack1.pushItem('b');   //b 넣기
stack1.pushItem('c');   //c 넣기
stack1.countItem(); //카운트하기
document.write(stack1.itemLength);  // 갯수 도출 // 3
document.write(stack1.popItem());   // 꺼내기 // c
document.write(stack1.popItem());   // 꺼내기 // b
document.write(stack1.popItem());   // 꺼내기 // a
stack1.countItem(); //카운트하기
document.write(stack1.itemLength);  // 갯수 도출 // 0

 

예제) Stack 구조로 Palindrom 만들기

class Stack {
    constructor(id){
        this.id = id;
        this.array = [];
    }
    pushItem(item){
        this.array.push(item);
    }
    popItem(){
        return this.array.pop();
    }
}

const stack1 = new Stack('stack');  // 'stack'을 constructor에 파라미터 id로
const testString = "ABAB";
let reverseString = '';
for(let i=0; i<testString.length; i++){ //i : 0~3
    stack1.pushItem(testString[i]); //testString[i]를 pushItem에 파라미터 item으로
}

//위의 과정으로 this.array에 testString이 배열로 담김
for(let i=0; i<testString.length; i++){
    reverseString += stack1.popItem();  //return값을 reverseString에 담음
}

//testString과 역전된 testString을 담은 reverseString의 글자가 같은지 비교
if(testString == reverseString){    
    document.write("Palindrome");
}else {
    document.write("Not Palindrome");
}

 

class Stack{
    constructor(id){
        this.id = id;
        this.stackStorage = [];
        this.count = 0;
    }
    pushItem(item){
        this.stackStorage.push(item);
    }
    popItem(){
        return this.stackStorage.pop();
    }
    countStorage(){
        this.count = this.stackStorage.length;
    }
}

class Palindrom {
    constructor(id){
        this.id = id;
        this.inputString = '';
        this.reverseString = '';
        this.result = null;
    }
    inputAction(anyString){
        this.inputString = anyString;
    }
    reverseAction(){
        const useStack = new Stack("useStack"); //"useStack"은 Stack의 파라미터 id로
        for(let i=0; i<this.inputString.length; i++){
            useStack.pushItem(this.inputString[i]); //this.inputString[i]는 파라미터 item으로
        }
        for(let i=0; i<this.inputString.length; i++){
            this.reverseString += useStack.popItem();   //popItem()의 return값은 this.reverseString으로
        }
    }
    comparePalindrom(){
        if(this.inputString == this.reverseString){ //값 비교
            this.result = true;
        } else {
            this.result = false;
        }
    }
    runPalindrom(anyString){
        this.inputAction(anyString);
        this.reverseAction();
        this.comparePalindrom();
    }
}

const myPalin = new Palindrom("myPalin");
myPalin.runPalindrom("ABBA");
document.write(myPalin.result ? "Palindrom" : "Not Palindrom"); //삼항연산자

 

 

Queue 구조 코드화

class Queue {
    constructor(id){
        this.id = id;
        this.storage = [];
        this.length = 0;
    }
    pushItem(anyItem){
        this.storage.push(anyItem);
    }
    shiftItem(){
        return this.storage.shift();    //내 클래스 밖으로 던지는 행위기때문에 return으로 받는게 낫다.
    }
    countQueue(){
        this.length = this.storage.length;
        return this.length; //this.length을 속성값으로 넘겼고 속성값을 return함
    }
}
const myQ = new Queue("myQ");
myQ.pushItem('a');
myQ.pushItem('b');
myQ.pushItem('c');
document.write(myQ.storage);    //a,b,c
myQ.shiftItem();
document.write(myQ.storage);    //b,c
myQ.shiftItem();
document.write(myQ.storage);    //c
document.write(myQ.countQueue());   //1

 

Deck 구조 코드화

class Deck {
    constructor(id){
        this.id = id;
        this.storage = [];
        this.length = 0;
    }
    pushItem(anyItem){
        this.storage.push(anyItem);
    }
    popItem(){
        //내 클래스 밖으로 던지는 행위기때문에 return으로 받는게 낫다.
        return this.storage.pop();  
    }
    shiftItem(){
        return this.storage.shift();    
    }
    unshiftItem(anyItem){
        this.storage.unshift(anyItem);
    }
    countDeck(){
        this.length = this.storage.length;
        return this.length; //this.length을 속성값으로 넘겼고 속성값을 return함
    }
}
const myD = new Deck("myD");

 

예제) Deck 구조 슬라이드

<style>
    *{margin: 0; padding: 0;}
    .slider {height: 148.83px; display: flex; align-items: center; justify-content: center; gap: 10px;}
    figure {width: 170px; height: 150px; text-align: center;}
    button {width: 40px; height: 40px;}
</style>
<body>
    <div class="slider">
        <button id="prevBtn">&lt;</button>
        <div id="imgArea" class="imgArea">
            <figure></figure>
        </div>
        <button id="nextBtn">&gt;</button>
    </div>
    
    
    <script>
        class Deck {
            constructor(id){
                this.id = id;
                this.storage = [];
                this.length = 0;
            }
            pushItem(anyItem){
                this.storage.push(anyItem);
            }
            popItem(){
                //내 클래스 밖으로 던지는 행위기때문에 return으로 받는게 낫다.
                return this.storage.pop();  
            }
            shiftItem(){
                return this.storage.shift();    
            }
            unshiftItem(anyItem){
                this.storage.unshift(anyItem);
            }
            countDeck(){
                this.length = this.storage.length;
                return this.length; //this.length을 속성값으로 넘겼고 속성값을 return함
            }
        }

        class slider {
            constructor(id){
                this.id = id;
                this.lastItem = null;
            }
            prev(){
                this.lastItem = myD.popItem();
                const outputString = `
                    <figure>
                        <img src="${this.lastItem.img}" style="width: 170px;">
                        <figcaption>${this.lastItem.name}</figcaption>
                    </figure>`;
                document.getElementById("imgArea").innerHTML = outputString;
                myD.unshiftItem(this.lastItem);
            }
            next(){
                this.lastItem = myD.shiftItem();
                const outputString = `
                    <figure>
                        <img src="${this.lastItem.img}" style="width: 170px;">
                        <figcaption>${this.lastItem.name}</figcaption>
                    </figure>`
                document.getElementById("imgArea").innerHTML = outputString;
                myD.pushItem(this.lastItem);
            }
        }
        
        const imgString1 = "https://url.kr/g5icvg"
        const imgString2 = "https://url.kr/7vklif"

        zardAlbum = [
            {name: "ZARD 1", img: imgString1},
            {name: "ZARD 2", img: imgString2},
            {name: "ZARD 3", img: imgString1},
            {name: "ZARD 4", img: imgString2},
            {name: "ZARD 5", img: imgString1},
            {name: "ZARD 6", img: imgString2},
            {name: "ZARD 7", img: imgString1},
            {name: "ZARD 8", img: imgString1},
            {name: "ZARD 9", img: imgString2}
        ]
        
        const mySlider = new slider("mySlider");
        const myD = new Deck("myD");
        
        zardAlbum.forEach(function(v){
            myD.pushItem(v);

        });
        document.getElementById('prevBtn').addEventListener(
            'click',
            function(event){
                mySlider.prev();
            }
        )
        document.getElementById('nextBtn').addEventListener(
            'click',
            function(event){
                mySlider.next();
                console.log(zardAlbum)
            }
        );
    </script>
</body>

 

 

SET

Stack, Queue, Deck은 순서가 보증된 자료구조 형태이다.

Set은 순서가 없는 형태를 말한다.