Bolinha que vai e volta (dúvida else if)

Esse eu achei complicado, mas cheguei nessa conclusão diferente da do instrutor. Na solução do instrutor ele usa else if, que eu ainda não entendi bem, alguém pode me explicar melhor?

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script type="text/javascript">

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio)
    {
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {
        pincel.clearRect(0, 0, 600, 400);
    }

    var x = 20;
    var subindo = true;
    function vaiBolinha()
    {
        if(x < 20) {
            subindo = true;
            x = 20;
        }
        if(x > 590) {
            subindo = false;
            x = 590;
        }
        if(x >= 20 && x <= 590) {
            limpaTela();
                desenhaCirculo(x, 20, 10);
                if(subindo) {
                    x++;
                } else {
                    x--;
                }
        }

    }

    setInterval(vaiBolinha,10);

    </script>