[JS] Ex03_Stack구조.html

이뮨01 2023. 6. 20. 17:00

차곡차곡 데이터를 쌓아올리는 스택을 배우다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* Stack (스택)
        "쌓다"라는 의미로 데이터를 차곡차곡 쌓아올린 형태의 자료구조
        ex) 김치전을 할 때 아래부터 차곡차곡 쌓지만
            => 먹을 때는 마지막에 들어온 부침개부터 먹는다.
            Last In, First Out (LIFO, 후입선출)


        웹브라우저 방문기록(뒤로가기)
        if 내가 구글 => 네이버 => 다음 => 인공지능사관학교 이동
        뒤로가기 => 다음으로 이동
        가장 마지막에 쌓인 다음이 가장 먼저 보여지는 후입선출 구조
        */

        let array = [];
        let index = 0; // 함수에서 인덱스 값 증가를 위한 변수


        let push = (num) => {
            // 사용자가 데이터를 넣었을 때 배열의 맨 마지막에 데이터 추가하기
            console.log("push function", num)
            array[index] = num
            index++;
            console.log(array)
        }

        let pop = () => {
            // 사용자가 데이터를 삭제했을 때 배열의 맨 마지막의 데이터 삭제하기
            console.log("현재 array", array)
            index-- // index - 1을 splice 함수에 쓰면 안되는 이유는 index가 다음에도
                    // 또 쓰이기 때문에 다음 과정과 이어서 index의 값이 -1 되어야하기 때문
            array.splice(index, 1); // 배열의 특정 부분 제거하는 배열 함수
            console.log("삭제된 후 array", array) //제거 됐는지 확인

        }

        while (true) {
            let choice = prompt("1. 입력 2. 출력 3. 확인 4. 종료"); // 입력값 1, 2, 3, 4

            if (choice == 1) {
                let addData = prompt("추가할 데이터를 입력하세요.");
                push(addData)
            }
            else if (choice == 2) {
                pop()
            }
            else if (choice == 3) {

            }
            else if (choice == 4) {
                array = [];
                break;
            }
            else {
                break;
            }



        }
    </script>
</body>

</html>

웹 브라우저 뒤로가기처럼 마지막의 데이터가 가장 먼저 출력되는 것이 Stack(스택) 구조이다. pop 배열함수를 사용하지않고 인덱스, splice를 사용해서 배열의 가장 마지막 데이터를 출력한다.

저작자표시 비영리 변경금지 (새창열림)