Las variables
Guardando valores
Si en un programa un dato tiene un valor permanente, que no va a cambiar nunca, podemos usarlo directamente en el código. Son valores constantes.
Pero esto no siempre va a ser así. Lo más normal es que los datos guarden su valor en una variable: en elemento con nombre usado para guardar valores.
Javascript es sumamente permisivo en el uso de variables
- Una variable puede guardar cualquier tipo de datos
- Las varialbes se pueden crear en cualquier parte del programa
- Las variables no necesitan declararse.
¿Flexiilidad? si, pero también fuente de errores y causa de programas engorrosos.
Al definir las variables decimos que tienen nombres, y en el programa para usar su contenido escribimos su nombre. Ya habrás visto eso en los pequeños ejemplos que aparecen en otras secciones del tutor.
El nombre de una variable puede ser cualquier combinación de letras, números y subrayados. Se recomienda utilizar nombres significativos y relacionados con el dato que almacenan o la función que tengan en el programa. Nose pueden usar los nombres de palabras reservadas de JavasScript, como por ejemplo if, while, do, let, var, function.
Si usas nombres en español seguro que no tienes problemas con las palabras reservadas de Javascript que son todas inglesas. Pero en general se suelen usar nombres en inglés.
No es lo mismo la variable de nombre Altura que altura. No son iguales las mayúsuclas que las minúsculas.
Si una variable se llama precio seguro que sabes de que va el dato que almacena. Si en el programa quiero usar su valor escribo el nombre de la variable.
Aunque puedes usar una misma variable para diferente tipos de datos y crearlas en cualquier parte del programa, lo correcto es declararla y hacerlo al inicio del programa o la función.
Una variable se declara con la palabra var o con let seguida del nombre de la variable. Su valor por defecto es null
var altura = 10;
var base = 20;
let perímetro;
perímetro = 2*altura + 2*base;
Aqui se declara la variable altura y le damos el valor 10, luego se declara la variable base y le damos el valor 20, Por último se declara la variable perimetro. Nombres autodocumentados, no hace falta que te explique lo que hace ese programita ¿verdad?
Fíjate como se guarda un valor en la variable, con el símbolo = (igual), que aquí no significa lo mismo que en matemáticas. Este símbolo se puee leer como en la variable altura se guarda el valor 10.
También puedes uar constantes para valores que no cambiarán durante toda la ejecución del programa. Se declaran con la palabra clave const seguida de cualquier identificador vállido y con un valor asignado. Luego ya no puede cambiar nunca. En sus nombres suelen usarse solo letras mayúsculas.
En resumen
En cualquier programa procura usar siempre datos con nombre. Sin son datos cambiantes no tienes más remedio que hacerlo al usar variables, pero si son valores permanetes asignalos también a una variable o decláralo como una constante.
Procura usar nombres de variables significativos, que den una idea de lo que hace ese valor. Si usas nombres en español no podrás interferir con las palabras claves de Javascript.
Las variables con scope de bloque (const, let) no tienen por que ser locales. Si las declaras al principio del script, fuera de todas las funciones y bloques que definas, son variables de ámbito global
Desde fuera no se ve dentro de las cajas interiores pero desde las interiores si se ve hacia afuera, esa es la idea del ámbito global, local y de bloque.
Ámbito
Otro aspecto a tener en cuenta a la hora de usar las variables es su ámbito, en inglés, scope. Nos indica desde donde podemos acceder a ellas.
Con este criterio podemos encontrar dos tipos de variables:
- Global: Se accede desde todo los scripts de la página donde esté definida. Se declaran con la palabra clave var
- Local: solo se accede desde dentro de la función donde esté definida y desde las funciones anidadas. Se declaran con la palabra clave var
- De bloque: son variables que solo viven dentro del bloque de código donde se defina, por ejemplo dentro de un blucle o dentro de un bloque condicional. Fuera no se conocen. Se declaran con let y const
Por ejemplo en el siguiente script tenemos variables globales y locales:
var nombre = "Carmen";
function saludar() {
var saludo = "Hola"
window.alert (saludo + " "+nombre);
}
window.alert(saludo+" "+nombre) //Error: saludo no existe aquí.
En este ejemplo nombre sería global y saludar puede verla, es decir, utilizarla. Sin embargo saludo es una variable que solo existe dentro de la función saludar, por eso la úlima linea del ejemplo provoca un error de variable no encontrada.
Siempre que se pueda debemos usar variables locales. Las globales pueden tener efectos colaterales no controlados, por ejemplo si una página utiliza plugins de fuentes diferentes podríamos encontrar que distinatsa funciones usan variables con el mismo nombre.
Te animo a que pruebes los ejemplos que ves aquí y a que juegues con ellos. Usa las declaraciones var, let, const y comprueba sus ámbitos.
Para probar
Prueba estos scripts, están hechos para que lo veas con el panel de desarrollador abierto, para que veas los mensajes de error que en algún caso va a producirse
var dia="Lunes";
function verDia(){
console.log("Hoy es ", dia);
}
verDia();
En el terminal verás que se escribe Hoy es lunes, porque dentro de la función se ve la variable dia, es global.
function anotarDia(){
var dia = "Lunes";
}
function verDia(){
console.log("hoy es ", dia);
}
verDia();
En este caso obtiene un mensaje de error: dia is not defined, porque la variable dia solo existe dentro de la función anotarDia().
Y para terminar una de let, con el bloque más simple y corto del mundo.
var dia = "Martes";
{ let dia="Lunes"; }
console.log("Hoy es ", dia);
Fíjate que el script dice que Hoy es Martes, no hace caso de la linea 3, porque con la declaración let lo que ocurre dentro del bloque con la variable dia queda dentro del bloque.
¿Entonces que usar: var, let o const?
Pues como todo: depende de para que quieras esa variable. Así que a modo de resumen: