Declarando variables (var, let, Const)

   Después de esta lección aprenderás a:

  • Fijar conceptos con “Easy Interactivo
  • Identificar los tres tipos para la declaración de una variable en JS.
  • Reconocer el manejo de las declaraciones para evitar errores del compilador o comportamientos extraños.
  • Practicar en el editor VS.Net.

 

Cursos Institucionales.
El Aprendizaje Hecho Fácil. ¡Disfrútalo!

   Existen muchos tipos de datos en JS. El compilador reconocerá como cadena de texto una variable siempre que el dato o valor se encuentre encerrado entre comillas dobles o simples. Así, “5”, ‘7’ los verá como cadenas o caracteres alfabéticos y no como números.

Declaración de variables 


 

USANDO LA PALABRA RESERVADA var

La palabra reservada var permite declarar variables para ser asignadas en memoria. las variables declaradas podrán ser localesglobales.

Ejemplos:

  • var nomEstu = “Verónica”;
  • var promEstu = 4.7;

Observa  que la palabra reservada var permite almacenar cadenas y números. Además debes usar el operador  ( ; ) para indicar final de línea.

En este ejemplo:

var nota1 = 4.1;
var nota2 = 3.2;
var promedio = (nota1 + nota2)/2; 

se almacenará en la variable var promedio el cálculo del promedio. Si quisiéramos mostrar el resultado por pantalla, utilizaríamos el siguiente código: (las partes del código se explicarán en lecciones posteriores):

<!DOCTYPE html>
<html>
 <head></head>
  <body>
   <h2>Variables JS</h2>
   <p id="demo"></p>
    <script>
     var nota1 = 4.1;
     var nota2 = 3.2;
     var promedio = (nota1 + nota2)/2;
     document.getElementById("demo").innerHTML ="Tu promedio es: " + promedio;
    </script>
  </body>
</html> 

Y esta será la salida o resultado en el navegador:

DemoVariablesJS-01 - EASY TO MAKE

En la línea de código document.getElementById("demo").innerHTML ="  estamos utilizando un método, document.getElementById("demo"), que nos permite usar como parámetro el atributo id para obtener un elemento de HTML— en este caso una etiqueta

o párrafo — y haciendo uso de la propiedad innerHTML define el contenido o resultado que se mostrará, en nuestro caso, el contenido de la variable promedio.  

Con var se puede utilizar una variable y posteriormente ser declarada. Por ejemplo:

nota1 = 4.1;
var nota1;
var nota2 = 3.2;
var promedio = (nota1 + nota2)/2; 

USANDO LA PALABRA RESERVADA let

La palabra reservada let —introducida en 2015— permite declarar variables para ser asignadas en memoria. Anterior a esta fecha las variables no tenían alcance global ni de función o bloque {  } (Block Scope). Las diferencias con la palabra clave o reservada var son:

  • Con var no se tiene Block Scope
  • Las variables no podrán declararse por segunda vez en el código.
  •  Su alcance se limita al bloque

Por ejemplo, si utilizar let el compilador marcará un error con las siguientes declaraciones:

{
  let nota1 = 4.1;
  // ..alguna directiva aquí..
.
}

{
  let nota1 = 3.2;
} 

Por el contrario con var puedes declararlas así:

{
  var nota1 = 4.1;
  // ..alguna directiva aquí..
}

{
  var nota1 = 3.2;
} 

Adicionalmente con let no es posible usar una variable y ser utilizada posteriormente:

nota1 = 4.1;
let nota1;
let nota2 = 3.2;
let promedio = (nota1 + nota2)/2; 

Al intentar la declaración con let se mostrará un mensaje de error:

ERROR LET - EASY TO MAKE

USANDO LA PALABRA RESERVADA Const

Esta palabra igual que la palabra clave let, fue introducida a JS en 2015. Su función es almacenar datos o valores constantes. Como recomendaciones espaciales tenemos:

  • Tiene alcance de bloque {  }, Block Scope.
  • No puede redeclararse por segunda vez.
  • No permiten reasignación de datos nuevamente.

Algunos usos de esta keyword:

const FACTOR = 7.33;
//Si intentamos esto:
FACTOR = 7,21;   
FACTOR = FACTOR + 0.77; 

El compilador desplegará este error:

ERROR CONST- EASY TO MAKE

   Captura de errores

Si intentamos en nuestro editor ejecutar los scripts anteriores, se mostrará una página en blanco.

En los lenguajes de programación existen técnicas para capturar posibles errores y desplegar avisos al usuario. Generalmente los lenguajes utilizan la estructura:

<script>
  try {
    //aquí código...
  }
  catch (err) {
  document.getElementById("ID").innerHTML = err;
  }
</script> 

El compilador desplegará un objeto tipo err haciendo uso de las palabras reservadas TypeError o ReferenceError

Este tema lo manejarás en lecciones posteriores.

APLICA YA! - Easy To Make
Easy interactivo. ¡Inténtalo!


Afina tus conocimientos con el siguiente repaso interactivo. Puedes repasar o regresas al soporte teórico las veces que necesites.

   Para cargar el repaso debes estar registrado o logeado