[Dúvida] Variável raio dentro da função desenhaCirculo

Oi, tudo bem? Espero que sim.

Entendi sua dúvida. Vamos analisar as partes da função desenhaCirculo que são importantes para entender melhor essa questão. Em um primeiro momento vamos avaliar a função que contém uma variável em seu escopo.

function desenhaCirculo(evento) {

    var raio = 10;

if (evento.shiftKey) {
      raio = raio + 10;
    }
}

O código apresenta o seguinte argumento na condição if (evento.shiftKey) : toda vez que a tecla shift é clicada o raio vai ser igual ao valor do raio +10.

Quando a variável está no interior da função, assim que o shift é pressionado o valor assumido pelo raio é 20, já que inicialmente o raio é 10. Contudo este valor não aumenta progressivamente, pois sempre que a função é lida novamente, linha por linha, o valor inicial do raio volta a ser 10.

Quando a variável é colocada fora da função, tem-se:

var raio = 10;

function desenhaCirculo(evento) {

if (evento.shiftKey) {
      raio = raio + 10;
    }
}

De acordo com o código, sempre que o comando desenhaCirculo for lido e a tecla shift for pressionada, o raio não vai mais ter o valor fixo de 10, mas sim o último valor atribuído ao raio pela condição if (evento.shiftKey). Dessa forma o valor crescerá em uma progressão constante de 10.

Caso tenha curiosidade de ler mais sobre funções e como elas funcionam em um código, deixo o link da documentação oficial de sintaxe e tipos, que comenta sobre isso.

• Funções

Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição para te auxiliar.

Grande abraço e bons estudos!