Dudas

Buenas tardes.

Mi pregunta es la siguiente. Generalmente cuando declaramos una variable lo hacemos de la siguiente forma:

var xAleatorio = sortearPosicion(600);
var yAleatorio = sortearPosicion(400);

Pero, he visto que el profesor declaró las variables sin asignarle un valor y solo lo asigna dentro de una función llamada actualizarPantalla. No entiendo este nuevo método:

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

<script>

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



    function dibujarCirculo(x, y, radio,color){

        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2*Math.PI)
        pincel.fill();

    }




    function limpiarPantalla(){

        pincel.clearRect(0,0,600,400);

    }


    var x = 0;
    var i = 0;
    var sentido = 1;
    var colores = ["blue","red","green","yellow","black"];
    var radio = 10;


    var xAleatorio;
    var yAleatorio;



    function CambiarColor(){


        if(i < colores.length){

            colors = colores[i];
            i++
        }

        else{

            i = 0;

        }
    }   




    function sortearPosicion(maximo){

        //Esta nueva función de abajo es para que en vez de redondear para arriba lo haga hacia abajo. Ejemplo 400.5 lo muestre así 400.
        return Math.floor(Math.random()*maximo);
    }

    function disenarObjetivo(x,y){

        //Sería recomendable poner una condición en caso de que los parámetros de x,y entrén fuera del borde, evitar eso

        dibujarCirculo(x,y,radio + 20,"red");
        dibujarCirculo(x,y,radio + 10,"white");
        dibujarCirculo(x,y,radio,"red");

    }


    function actualizarPantalla(){


        limpiarPantalla();


        //Estos valores es el máximo que puede tener de acuerdo a las dimensiones de nuestro Canvas.
        xAleatorio = sortearPosicion(600);
        yAleatorio = sortearPosicion(400);
        disenarObjetivo(xAleatorio,yAleatorio);

    }

    function disparar(evento){

        //Con esto vamos a comparar las coordenadas de x,y con las coordenadas aleatorias de xAleatorio y yAleatorio
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;


        alert("Usted acertó al blanco!")
    }



    pantalla.onclick = fun









    setInterval(actualizarPantalla,500);
    //setInterval(CambiarColor,500);







</script>