Entrar Ainda não tem acesso?
1
resposta

Variavel global e de função ?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Movendo elementos: animações simples e atividade Onde está o erro?

por Adriano Guilhermino dos Santos
| 45.9k xp | 11 posts
Analista

Tenho uma duvida, se existisse uma variavel declarada duas vezes, uma fora e outra dentro da função, elas seriam variaveis diferentes ou a mesma com valores diferentes no decorrer a execução do codigo ?

Exemplo:

<script>

    var x = 10;
    var b = 2;

    function soma (){
        var x = 5;
        document.write(x + b);            
    }

    soma();

</script>

A var x fora da função vale 10, mas dentro ela vale 5, quando executei o código o resultado foi 7. A pergunta é existem duas funções X ? X1 e X2 ou é o mesmo x com o seu valor alterado pela função ? se eu fosse chamar o X em outra função depois a execução da função soma, x seria 10 ou 5 ?

não sei se consegui me fazer entender, mas agradeço a ajuda.

1 resposta
por Breno Bosser Morim
| 902k xp | 102 posts
Estagiário em Desenvolvimento React

Olá! Tudo bem? Nesse caso existem duas variáveis x que tem valores diferentes mas nome iguais. O que acontece é que como a segunda x foi declarada dentro do bloco (região de código limitada por {}) de uma function ela se torna acessível somente dentro desse mesmo bloco da function. Isso significa que a primeira x é uma variável global que pode ser acessada em qualquer parte do código, enquanto a segunda x é uma variável restrita a function soma. A primeira x poderia ser acessada dentro da function soma, mas como a segunda x foi declarada dentro da própria function essa segunda acaba tendo prioridade de chamada, por isso o resultado deu 7 e não 12. Vou te mostrar alguns casos:

var x = 10;
var b = 2;

function soma (){
    var x = 5;
    document.write(x + b); // Escreve 7            
}
soma();

document.write(x); // Escreve 10

Chamando de novo a variável x fora do bloco da function temos o valor da primeira x de volta. Agora veja o que acontece se não tivesse a declaração da primeira x:

var b = 2;

function soma (){
    var x = 5;
    document.write(x + b); // Também escreve 7            
}
soma();

document.write(x); // Dá erro, porque nesse caso a variável x foi declarada somente dentro da função

Nesse caso quando tentamos chamar a variável x que foi declarada dentro da function acontece um erro, porque quando uma var nasce dentro de uma function ela também "morre" na própria function. Agora e se tentarmos mudar o valor de uma variável dentro da function:

var x = 10;
var b = 2;

function soma (){
    x = 5;
    document.write(x + b); // Nesse caso também é escrito 7          
}
soma();
document.write(x); // Dessa vez aparece 5

Perceba que dessa vez nós reatribuímos o valor da variável x, que passou a valer 5. Resumindo, nos primeiros casos nós tínhamos duas variáveis diferentes, que tinham o mesmo nome, porém áreas de atuação diferentes (uma global var x = 10; e outra própria de uma function var x = 5;), enquanto nesse último caso tivemos uma variável x que começou com o valor 10 e depois teve seu valor reatribuído para 5, porém continuou sendo a mesma variável, ou seja, sempre que usamos a palavra var nós vamos estar criando uma variável diferente. 

var x = 10;
var x = 8
var b = 2;

function soma (){
    var x = 5;
    document.write(x + b); // Nesse caso também é escrito 7          
}
soma();
document.write(x); // Aparece 8

Nesse último caso, temos três variáveis x, porém dentro da função a var x = 5 tem a prioridade, e fora da função a var x = 8 acaba tendo prioridade sobre a var x = 10, já que a var x = 8 foi declarada por último. É um tópico complexo, mas espero ter esclarecido um pouco sua dúvida!