スタック＆キューを考えるには剰余演算子に登場してもらうといい。

データの格納方法として、スタックとキューというものがある。
array関数を使わずにこれらのコードを書いてみた。
##配列をリングとして考える＆剰余演算子を使う
スタックに比べるとキューは考えを工夫する必要がある。その際にリングバッファという概念が役に立った。配列をリングのように考えると配列の頭としっぽがくっつく形になるがこれが便利だった。キューからアウト（OuｔQue）すると要素が入った順番に抜けていくが、抜けた後の空箱にもデータを入れていく必要がある。かといって、適当な順番にデータを入れていくことはここではルールに反する。

そこで、データを入れるindexを次のように求めた。

 NewIn = (queTop + queTail) % 4

ここでは格納できるデータの数を４としている。
queTailは配列に格納されているデータ数とイコールになる。

アウトしていくデータについては

queTop = (queTop + 1) % 4;

であり、このarray[queTop]がアウトしていくデータのindexとなる。
データのinOutに際してデータのかたまりがぐるぐると円をまわるイメージ。
もちろんデータが満杯になったときはそこでストップ。

以下サンプルコード。
簡単なフォームもついているので実行するとイメージしやすいかも。
##汚いコードでも手を動かしていたら少し理解が深まった。
JavaScriptを学びはじめて一ヶ月。どんな汚いコードでもまずは手を動かすことをこれからも意識していこうと思う。

<div>Stuck</div>
<input type="button" value="StuckPush" onclick="StuckPush();">
<input type="text" id="StuckPush">

<input type="button" value="StuckPop" onclick="StuckPop();">
<div id="output1"></div>

<div>Que</div>
<input type="button" value="inQue" onclick="inQue();">
<input type="text" id="inQue">

<input type="button" value="outQue" onclick="outQue();">
<div id="output2"></div>

<script>
    //---------スタックプッシュ-----------
    let stuckTop = 0;
    let a = [];

    function StuckPush() {
        if (stuckTop >= 0 && stuckTop < 4) {
            a[stuckTop] = $('#StuckPush').val();
            //a[]の中は4個しか入れない
            console.log(a[stuckTop]);
            console.log(a);
            stuckTop++;
            $('#StuckPush').val("");
        } else if (stuckTop = 4) {
            alert('ERROR');
        }
    }
    //---------スタックポップ-----------
    function StuckPop() {
        if (stuckTop > 0 && stuckTop <= 4) {
            aaa = a[stuckTop - 1];
            $("#output1").append(aaa + '→');
            console.log(stuckTop);
            a[stuckTop - 1] = null;
            stuckTop--;
            console.log(aaa)
        } else if (stuckTop = 0) { 
            alert('ERROR');
        }
    }
    //---------インキュー-----------
    let queTop = 0;
    let queTail = 0; //要素の数
    let b = [];
    //配列は4個の要素が入る
    function inQue() {
        if (queTail < 4) {
            NewIn = (queTop + queTail) % 4
            b[NewIn] = $('#inQue').val();
            console.log(b[NewIn]);
            console.log(b);
            queTail++;
            $('#inQue').val("");
        } else {
            alert('ERROR');
        }
    }
    //---------アウトキュー-----------
    function outQue() {
        if (queTail > 0) {
            bbb = b[queTop];
            $("#output2").append(bbb + '→');
            queTop = (queTop + 1) % 4;
            queTail--;
        } else {
            alert('ERROR');
        }
    }


</script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>