La mayoría de las veces, una aplicación JavaScript necesita trabajar con información. Aquí hay dos ejemplos:
Una tienda en línea: la información puede incluir productos en venta y un carrito de compras.
Una aplicación de chat: la información puede incluir usuarios, mensajes y mucho más.
Las variables se utilizan para almacenar esta información.
Una variable es un "almacenamiento con nombre" para datos. Podemos utilizar variables para almacenar obsequios, visitantes y otros datos.
Para crear una variable en JavaScript, use la palabra clave let .
La siguiente declaración crea (en otras palabras: declara ) una variable con el nombre "mensaje":
dejar mensaje;
Ahora, podemos poner algunos datos usando el operador de asignación = :
dejar mensaje; mensaje = 'Hola'; // almacena la cadena 'Hola' en la variable llamada mensaje
La cadena ahora se guarda en el área de memoria asociada con la variable. Podemos acceder a él usando el nombre de la variable:
dejar mensaje; mensaje = '¡Hola!'; alerta(mensaje); //muestra el contenido de la variable
Para ser concisos, podemos combinar la declaración y asignación de variables en una sola línea:
dejar mensaje = '¡Hola!'; // define la variable y asigna el valor alerta(mensaje); // ¡Hola!
También podemos declarar múltiples variables en una línea:
let usuario = 'John', edad = 25, mensaje = 'Hola';
Puede parecer más corto, pero no lo recomendamos. Para mejorar la legibilidad, utilice una sola línea por variable.
La variante multilínea es un poco más larga, pero más fácil de leer:
dejar usuario = 'Juan'; sea edad = 25; dejar mensaje = 'Hola';
Algunas personas también definen múltiples variables en este estilo de varias líneas:
dejar usuario = 'Juan', edad = 25, mensaje = 'Hola';
…O incluso en el estilo “coma primero”:
dejar usuario = 'Juan' , edad = 25 , mensaje = 'Hola';
Técnicamente, todas estas variantes hacen lo mismo. Entonces, es una cuestión de gusto y estética personal.
var en lugar de let
En scripts más antiguos, también puedes encontrar otra palabra clave: var en lugar de let :
var mensaje = 'Hola';
La palabra clave var es casi la misma que let . También declara una variable, pero de una manera ligeramente diferente, "a la vieja escuela".
Existen diferencias sutiles entre let y var , pero todavía no nos importan. Los cubriremos en detalle en el capítulo La antigua "var".
Podemos comprender fácilmente el concepto de “variable” si la imaginamos como una “caja” para datos, con una etiqueta con un nombre exclusivo.
Por ejemplo, la variable message se puede imaginar como un cuadro denominado "message" con el valor "Hello!" en él:
Podemos poner cualquier valor en el cuadro.
También podemos cambiarlo tantas veces como queramos:
dejar mensaje; mensaje = '¡Hola!'; mensaje = '¡Mundo!'; // valor cambiado alerta(mensaje);
Cuando se cambia el valor, los datos antiguos se eliminan de la variable:
También podemos declarar dos variables y copiar datos de una a la otra.
let hola = '¡Hola mundo!'; dejar mensaje; // copia 'Hola mundo' de hola al mensaje mensaje = hola; // ahora dos variables contienen los mismos datos alerta(hola); // ¡Hola Mundo! alerta(mensaje); // ¡Hola Mundo!
Declarar dos veces genera un error
Una variable debe declararse sólo una vez.
Una declaración repetida de la misma variable es un error:
dejar mensaje = "Esto"; // la repetición de 'let' genera un error let mensaje = "Eso"; // SyntaxError: 'mensaje' ya ha sido declarado
Entonces, debemos declarar una variable una vez y luego referirnos a ella sin let .
Lenguajes funcionales
Es interesante notar que existen los llamados lenguajes de programación funcionales puros, como Haskell, que prohíben cambiar los valores de las variables.
En dichos lenguajes, una vez que el valor se almacena “en la caja”, permanece ahí para siempre. Si necesitamos almacenar algo más, el lenguaje nos obliga a crear un nuevo cuadro (declarar una nueva variable). No podemos reutilizar el viejo.
Aunque pueda parecer un poco extraño a primera vista, estos lenguajes son bastante capaces de desarrollarse seriamente. Más que eso, hay áreas como los cálculos paralelos donde esta limitación confiere ciertos beneficios.
Hay dos limitaciones sobre los nombres de variables en JavaScript:
El nombre debe contener solo letras, dígitos o los símbolos $ y _ .
El primer carácter no debe ser un dígito.
Ejemplos de nombres válidos:
dejar nombre de usuario; vamos a probar123;
Cuando el nombre contiene varias palabras, se suele utilizar camelCase. Es decir: las palabras van una tras otra, cada palabra, excepto la primera, comienza con una letra mayúscula: myVeryLongName .
Lo que es interesante: el signo de dólar '$' y el guión bajo '_' también se pueden utilizar en los nombres. Son símbolos regulares, como letras, sin ningún significado especial.
Estos nombres son válidos:
sea $ = 1; // declaró una variable con el nombre "$" sea _ = 2; // y ahora una variable con el nombre "_" alerta($ + _); // 3
Ejemplos de nombres de variables incorrectos:
sea 1a; // no puede comenzar con un dígito deja mi-nombre; // no se permiten guiones '-' en el nombre
El caso importa
Las variables denominadas apple y APPLE son dos variables diferentes.
Se permiten letras no latinas, pero no se recomiendan.
Es posible utilizar cualquier idioma, incluidas letras cirílicas, logogramas chinos, etc., como este:
let имя = '...'; let 我 = '...';
Técnicamente, aquí no hay ningún error. Estos nombres están permitidos, pero existe una convención internacional para utilizar el inglés en los nombres de variables. Incluso si estamos escribiendo un guión pequeño, es posible que tenga una larga vida por delante. Es posible que personas de otros países necesiten leerlo en algún momento.
Nombres reservados
Hay una lista de palabras reservadas, que no se pueden usar como nombres de variables porque las usa el propio idioma.
Por ejemplo: let , class , return y function están reservados.
El siguiente código da un error de sintaxis:
dejar dejar = 5; // no puedo nombrar una variable "let", ¡error! dejar regresar = 5; // tampoco puedo nombrarlo "retorno", ¡error!
Una cesión sin use strict
Normalmente, necesitamos definir una variable antes de usarla. Pero en los viejos tiempos, era técnicamente posible crear una variable simplemente asignando el valor sin usar let . Esto todavía funciona ahora si no use strict en nuestros scripts para mantener la compatibilidad con los scripts antiguos.
// nota: no se permite "uso estricto" en este ejemplo número = 5; // se crea la variable "num" si no existía alerta(núm); // 5
Esta es una mala práctica y provocaría un error en modo estricto:
"uso estricto"; número = 5; // error: el número no está definido
Para declarar una variable constante (que no cambia), use const en lugar de let :
const miCumpleaños = '18.04.1982';
Las variables declaradas usando const se llaman "constantes". No se pueden reasignar. Un intento de hacerlo provocaría un error:
const miCumpleaños = '18.04.1982'; miCumpleaños = '01.01.2001'; // error, ¡no se puede reasignar la constante!
Cuando un programador está seguro de que una variable nunca cambiará, puede declararla con const para garantizar y comunicar ese hecho a todos.
Existe una práctica generalizada de utilizar constantes como alias para valores difíciles de recordar que se conocen antes de la ejecución.
Estas constantes se nombran con letras mayúsculas y guiones bajos.
Por ejemplo, hagamos constantes para los colores en el llamado formato "web" (hexadecimal):
constante COLOR_RED = "#F00"; constante COLOR_GREEN = "#0F0"; constante COLOR_BLUE = "#00F"; constante COLOR_ORANGE = "#FF7F00"; // ...cuando necesitamos elegir un color dejar color = COLOR_ORANGE; alerta(color); // #FF7F00
Beneficios:
COLOR_ORANGE es mucho más fácil de recordar que "#FF7F00" .
Es mucho más fácil escribir mal "#FF7F00" que COLOR_ORANGE .
Al leer el código, COLOR_ORANGE es mucho más significativo que #FF7F00 .
¿Cuándo deberíamos usar mayúsculas para una constante y cuándo deberíamos nombrarla normalmente? Dejémoslo claro.
Ser una "constante" simplemente significa que el valor de una variable nunca cambia. Pero algunas constantes se conocen antes de la ejecución (como un valor hexadecimal para el rojo) y algunas constantes se calculan en tiempo de ejecución, durante la ejecución, pero no cambian después de su asignación inicial.
Por ejemplo:
const pageLoadTime = /* tiempo que tarda una página web en cargarse */;
El valor de pageLoadTime no se conoce antes de cargar la página, por lo que se nombra normalmente. Pero sigue siendo una constante porque no cambia después de la asignación.
En otras palabras, las constantes con nombres en mayúsculas sólo se utilizan como alias para valores "codificados".
Hablando de variables, hay una cosa más extremadamente importante.
El nombre de una variable debe tener un significado claro y obvio que describa los datos que almacena.
La denominación de variables es una de las habilidades más importantes y complejas de la programación. Un vistazo a los nombres de las variables puede revelar qué código fue escrito por un desarrollador principiante o por un desarrollador experimentado.
En un proyecto real, la mayor parte del tiempo se dedica a modificar y ampliar una base de código existente en lugar de escribir algo completamente separado desde cero. Cuando volvemos a algún código después de hacer otra cosa durante un tiempo, es mucho más fácil encontrar información bien etiquetada. O, dicho de otro modo, cuando las variables tienen buenos nombres.
Dedique tiempo a pensar en el nombre correcto de una variable antes de declararla. Hacerlo le recompensará generosamente.
Algunas reglas buenas a seguir son:
Utilice nombres legibles por humanos como userName o shoppingCart .
Manténgase alejado de abreviaturas o nombres cortos como a , b y c , a menos que sepa lo que está haciendo.
Haga que los nombres sean lo más descriptivos y concisos posible. Ejemplos de malos nombres son data y value . Esos nombres no dicen nada. Solo está bien usarlos si el contexto del código hace que sea excepcionalmente obvio a qué datos o valores hace referencia la variable.
Acuerde los términos dentro de su equipo y en su mente. Si un visitante del sitio se llama "usuario", entonces debemos nombrar las variables relacionadas currentUser o newUser en lugar de currentVisitor o newManInTown .
¿Suena simple? De hecho lo es, pero crear nombres de variables descriptivos y concisos en la práctica no lo es. A por ello.
¿Reutilizar o crear?
Y la última nota. Hay algunos programadores perezosos que, en lugar de declarar nuevas variables, tienden a reutilizar las existentes.
Como resultado, sus variables son como cajas en las que la gente arroja diferentes cosas sin cambiar sus pegatinas. ¿Qué hay dentro de la caja ahora? ¿Quién sabe? Necesitamos acercarnos y comprobarlo.
Estos programadores ahorran un poco en la declaración de variables pero pierden diez veces más en la depuración.
Una variable adicional es buena, no mala.
Los navegadores y minificadores de JavaScript modernos optimizan el código lo suficientemente bien, por lo que no crearán problemas de rendimiento. Usar diferentes variables para diferentes valores puede incluso ayudar al motor a optimizar su código.
Podemos declarar variables para almacenar datos usando las palabras clave var , let o const .
let – es una declaración de variable moderna.
var : es una declaración de variable de la vieja escuela. Normalmente no lo usamos en absoluto, pero cubriremos las diferencias sutiles con let en el capítulo La antigua "var", en caso de que las necesite.
const : es como let , pero el valor de la variable no se puede cambiar.
Las variables deben nombrarse de manera que nos permita comprender fácilmente lo que hay dentro de ellas.
importancia: 2
Declare dos variables: admin y name .
Asigne el valor "John" al name .
Copie el valor de name a admin .
Muestre el valor de admin usando alert (debe generar "John").
En el código siguiente, cada línea corresponde al elemento de la lista de tareas.
dejar administrador, nombre; // puedo declarar dos variables a la vez nombre = "Juan"; administrador = nombre; alerta (administrador); // "John"
importancia: 3
Crea una variable con el nombre de nuestro planeta. ¿Cómo nombrarías tal variable?
Cree una variable para almacenar el nombre de un visitante actual de un sitio web. ¿Cómo nombrarías esa variable?
Eso es simple:
let ourPlanetName = "Tierra";
Tenga en cuenta que podríamos usar un nombre más corto, planet , pero puede que no sea obvio a qué planeta se refiere. Es bueno ser más detallado. Al menos hasta que la variable sea NotTooLong.
let nombre de usuario actual = "Juan";
Nuevamente, podríamos acortarlo a userName si sabemos con seguridad que el usuario está actualizado.
Los editores modernos y el autocompletado facilitan la escritura de nombres de variables largos. No ahorres en ellos. Un nombre con 3 palabras está bien.
Y si su editor no tiene el autocompletado adecuado, consiga uno nuevo.
importancia: 4
Examina el siguiente código:
cumpleaños constante = '18.04.1982'; edad constante = algún código (cumpleaños);
Aquí tenemos una constante birthday para la fecha, y también la age constante.
La age se calcula a partir birthday usando someCode() , lo que significa una llamada a función que aún no explicamos (¡lo haremos pronto!), pero los detalles no importan aquí, el punto es que age se calcula de alguna manera en función del birthday .
¿Sería correcto usar mayúsculas para birthday ? ¿Para age ? ¿O incluso para ambos?
const CUMPLEAÑOS = '18.04.1982'; // ¿poner el cumpleaños en mayúsculas? const EDAD = algúnCódigo(CUMPLEAÑOS); // ¿poner la edad en mayúsculas?
Generalmente usamos mayúsculas para constantes que están "codificadas". O, en otras palabras, cuando el valor se conoce antes de la ejecución y se escribe directamente en el código.
En este código, birthday es exactamente así. Entonces podríamos usar mayúsculas para ello.
Por el contrario, age se evalúa en tiempo de ejecución. Hoy tenemos una edad, un año después tendremos otra. Es constante en el sentido de que no cambia durante la ejecución del código. Pero es un poco “menos constante” que birthday : se calcula, por lo que debemos mantener las minúsculas.