Introducción a JavaScript - Declaración de variables y su ámbito

En este ejemplo se muestran ejemplos sencillos de declaración de variables y su ámbito en JavaScript

Declaración var

La declaración de variables con var en un script crea una variable global a toda la página. Si se declara dentro de una función, sin embargo, su ámbito es solamente esa función.


    <script>
      var p=document.getElementById("resultado");
      p.innerHTML="Puedo obtener el valor de la variable global aquí="+global;
                    
      function ambitolocal(){
        var global=5;
        var local = 5;
        p.innerHTML="Pero si la declaro dentro de una función su valor es el local="+global;
      }
      //Abra la consola de JavaScript del navegador para ver qué sucede 
      p.innerHTML=p.innerHTML+"Pero si quiero usar una variable local fuera me da un error="+local;//ReferenceError
    </script>
                

Declaración let y const

La declaración con let y const tiene ámbito solamente del bloque en el que se declara, por lo que no entran en conflicto con variables llamadas iguales en diferentes declaraciones <script>.

Mira la consola del navegador los mensajes que se envían

<script>
  if (true) {
    var dentrodeif = 25;
  }

  //A pesar de estar declarada dentro del if, si ámbito es global ya no es una función
  console.log("var dentrodeif=" + dentrodeif);
  if (true) {
    let letdentrodeif = 25;
  }

  //Ahora esto da un error porque con let el ámbito es el bloque
  console.log("let letdentrodeif=" + letdentrodeif);//ReferenceError
  try{
    console.log("let letdentrodeif=" + letdentrodeif);//ReferenceError
  }catch(e){//El ReferenceError es capturado y permite que se sigua ejecutando este script
    console.log("El catch captura el error");     
  }
                   
  if (true) {
    const constante = 25;
    console.log("Dentro de bloque -> const constante=" + constante);//ReferenceError
  }
  //Igual que con let con let el ámbito es el bloque
  console.log("const constante=" + constante);//ReferenceError
</script>
                


Inicio