Variables y valores

docs.scrimba.com

Digamos que estás construyendo una página de pago y el precio de un artículo aparece en tres lugares: la línea del producto, el total acumulado y la confirmación. Si escribes 19.99 en los tres lugares a mano, una venta se convierte en una tarde de buscar y reemplazar. Almacénalo una sola vez bajo un nombre y cámbialo en un lugar, y cada punto que lo utilice se actualiza contigo. Ese nombre es una variable, y este capítulo trata sobre cómo crear una, cuándo bloquearla y cómo llamarla.

Almacenar un valor

Una variable es un nombre que le das a un valor para poder usarlo más tarde. Creas una con la palabra let, luego un nombre, luego =, luego el valor que quieres almacenar:

let userName = "María";
console.log(userName); // María

Esa línea dice: toma el texto "María" y recuérdalo bajo el nombre userName. De ahí en adelante, siempre que escribas userName, JavaScript devuelve lo que almacenaste.

Lee el = como "pon este valor bajo este nombre". No es el signo de igual de la clase de matemáticas, donde ambos lados ya son iguales. Es una instrucción: toma el valor a la derecha y guárdalo bajo el nombre a la izquierda.

Como es una instrucción de almacenamiento, puedes cambiar de opinión más tarde. Escribe el nombre y = nuevamente con un nuevo valor, y JavaScript mantiene el más nuevo:

let score = 0;
score = 10;
console.log(score); // 10

La primera línea crea score y pone 0 en ella. La segunda le da un nuevo valor. No hay un segundo let, porque score ya existe; la estás actualizando, no creándola de nuevo.

Una variable es un nombre vinculado a un valor. La declaras con let y estableces su valor con el operador de asignación =:

let total = 0;
total = 42;
console.log(total); // 42

El = es asignación, no comparación. Evalúa la expresión a la derecha, luego almacena el resultado bajo el nombre a la izquierda. Por eso = significa "asigna este valor", nunca "es igual a"; la comparación que encontrarás en operadores es un símbolo separado, ===.

Declarar con let crea el nombre; asignar a él nuevamente actualiza el valor que contiene. Solo usas let una vez por variable. Después de eso, el nombre solo a la izquierda es suficiente:

let itemPrice = 19.99;
itemPrice = 24.99;
console.log(itemPrice); // 24.99

El valor a la derecha puede ser cualquiera de los tipos de datos que tiene JavaScript: texto, un número, un booleano. La variable no le importa cuál; contiene lo que hayas asignado más recientemente.

Una variable es un identificador (un nombre en tu código) vinculado a un valor. El = es el operador de asignación: evalúa la expresión del lado derecho y vincula el resultado al nombre de la izquierda. Nunca prueba igualdad, y nunca copia un valor en una caja fija; apunta un nombre a un valor.

let total = 0;
total = 42;
console.log(total); // 42

La reasignación no crea una nueva variable, reorienta la vinculación existente. Esa distinción permanece invisible con primitivos como números y cadenas, donde cada valor es separado y autónomo. Comienza a importar en el momento en que una variable contiene algo compartido, como un objeto, porque entonces dos nombres pueden apuntar al mismo valor y un cambio a través de uno se muestra a través del otro. Lo verás completamente cuando objetos lleguen; por ahora, mantén la idea de que un nombre apunta a un valor en lugar de contenerlo.

Una cosa más que el = no hace: no bloquea el valor en su lugar. let score = 0 dice "apunta score a 0 por ahora", y la siguiente línea es libre de apuntarlo a otro lugar. Si una vinculación puede reorientarse en absoluto es la diferencia entre let y const, que es lo siguiente.

JunoAlmacenar un valor Una variable es un nombre para un valor que quieres reutilizar, y haces una con let nombre = valor. Lee el = como "pon este valor bajo este nombre", no como iguales de clase de matemáticas. Para cambiarlo más tarde, escribe el nombre y = nuevamente sin un segundo let, y JavaScript mantiene el valor más nuevo.

JunoAlmacenar un valor Declarar con let crea un nombre; asignar con = almacena un valor bajo él. El = es asignación, no comparación, así que nunca significa "es igual a". Solo escribes let una vez por variable; después de eso el nombre solo actualiza el valor que contiene.

JunoAlmacenar un valor El = vincula un nombre a un valor, nunca copia en una caja o prueba igualdad. La reasignación reorienta la vinculación existente en lugar de hacer una nueva variable. Eso permanece invisible con números y cadenas y comienza a afectar una vez que un nombre apunta a algo compartido, así que mantén "el nombre apunta al valor" en mente antes de que objetos aparezcan.

let vs const

Hay dos palabras para hacer una variable: let y const. Ya has visto let. Usa const cuando el valor nunca debe cambiar después de que lo estableces:

const taxRate = 0.2;
console.log(taxRate); // 0.2

Una tasa de impuesto es fija, así que const encaja: dice "esto está establecido, y no quiero que cambie por accidente". Si intentas reasignar un const, JavaScript te detiene con un error, que es una barrera de protección útil.

Recurre a const primero. Usa let solo cuando sepas que el valor cambiará, como una puntuación que sube o un total al que le sumas. Si un valor permanece igual durante toda su vida, const lo dice y lo protege.

const currency = "USD";
let itemsInCart = 0;
itemsInCart = 3;
console.log(itemsInCart); // 3

La moneda no cambiará, así que es const. El número de artículos en el carrito lo hará, así que es let.

JavaScript te da dos formas de declarar una variable, y la elección se trata de si el valor será reasignado. const declara una vinculación constante: una vez que la asignas, no puedes apuntar ese nombre a un nuevo valor.

const taxRate = 0.2;
taxRate = 0.25; // TypeError: Assignment to constant variable.

let permite reasignación; const la prohíbe. La regla que mantiene el código limpio es recurrir a const por defecto, y usar let solo cuando debes reasignar. La mayoría de las variables se establecen una vez y se leen muchas veces, así que la mayoría de ellas deberían ser const.

const currency = "USD";
let runningTotal = 0;
runningTotal = 19.99;
console.log(runningTotal); // 19.99

const no se trata de que el valor sea especial; es una señal para cualquiera que lea el código, incluyéndote a ti la próxima semana, de que este nombre no se moverá. Esa señal hace que un programa sea más fácil de seguir, porque un const en el que puedes confiar para que permanezca quieto.

Tanto let como const declaran una vinculación (el vínculo entre un nombre y un valor). La diferencia es si esa vinculación puede ser reasignada. const congela la vinculación: después de la asignación inicial, apuntar el nombre a un nuevo valor es un TypeError.

const taxRate = 0.2;
taxRate = 0.25; // TypeError: Assignment to constant variable.

Por defecto usa const y cambia a let solo donde la reasignación es real. Esto no es futileza estilística; un const es un hecho en el que puedes confiar mientras lees, un nombre menos que podría cambiar bajo ti, y eso reduce dónde puede vivir un bug.

La sutileza que vale la pena establecer temprano: const congela la vinculación, no el contenido. Te impide reorientar el nombre, pero si el valor es algo con partes internas, esas partes aún pueden cambiar. Un número o una cadena no tiene partes internas para cambiar, así que con esos const se comporta exactamente como "este valor es fijo". Con un objeto, sin embargo, const solo garantiza que el nombre siga apuntando al mismo objeto; el contenido del objeto en sí sigue siendo editable. Esa brecha sorprende a la gente, y es más fácil de absorber ahora que en medio de una depuración, así que objetos lo retoman directamente.

const currency = "USD";
let runningTotal = 0;
runningTotal = 19.99;
console.log(runningTotal); // 19.99

Hay una tercera palabra clave más antigua que encontrarás en código existente: var. No la uses. Se diferencia de let de dos formas que causan bugs. Primero, var tiene scope de función: ignora los bloques { } que let y const respetan, así que un var declarado dentro de un bloque se filtra hacia toda la función que lo rodea, mientras que let y const tienen scope de bloque y permanecen dentro del { } más cercano. Segundo, var es hoisted: la declaración se trata como si se moviera a la parte superior de su scope, así que un nombre var existe (sosteniendo undefined) antes de la línea que lo declara, lo que oculta errores en lugar de atraparlos.

let y const también son hoisted, pero alcanzarlos antes de su línea de declaración lanza un error en lugar de dar silenciosamente undefined; esa ventana temprana se llama la zona muerta temporal, y el error que produce es una característica, ya que convierte un bug silencioso en uno ruidoso. La versión corta: escribe const por defecto, let cuando debes reasignar, y trata var como conocimiento de solo lectura para mantener código antiguo.

Junolet vs const Usa const para un valor que nunca debe cambiar, y let para uno que lo hará. Recurre a const primero, y cambia a let solo cuando sepas que el valor necesita cambiar. Reasignar un const te da un error, que es la barrera de protección haciendo su trabajo.

Junolet vs constconst prohíbe reasignación; let la permite. Por defecto usa const y recurre a let solo cuando un valor tiene que cambiar. Un const le dice al siguiente lector que este nombre no se moverá, y la mayoría de las variables se establecen una vez y se leen muchas veces, así que la mayoría deberían ser const.

Junolet vs constconst congela la vinculación, no el contenido, así que reasignar el nombre es un TypeError pero un objeto al que apunta aún puede ser editado. Por defecto usa const, usa let solo para reasignación real, y trata la antigua var como conocimiento de solo lectura, ya que tiene scope de función y es hoisted de formas que ocultan bugs. La brecha vinculación-versus-contenido atrapa gente, así que tenla en mente para cuando objetos lleguen.

Nombrar variables

Un nombre de variable tiene algunas reglas. Puede usar letras, dígitos, _ y $, pero no puede comenzar con un dígito, y no puede contener espacios:

let firstName = "María";
let item2 = "libro";

Los nombres son sensibles a mayúsculas y minúsculas, lo que significa que firstName y firstname son dos variables diferentes. Equivocarse con las mayúsculas es un error común al principio, así que ayuda mantener los nombres consistentes.

El estilo que usan los desarrolladores de JavaScript se llama camelCase: comienza en minúsculas, y capitaliza la primera letra de cada palabra posterior, sin espacios. Así firstName, itemPrice, isLoggedIn.

let itemPrice = 19.99;
let isLoggedIn = true;

Más allá de las reglas, busca nombres que digan qué contienen. price supera a p, e userName supera a x. Leerás tu código mucho más de lo que lo escribes, y los nombres claros son lo que lo hacen legible.

Las reglas para un nombre válido: puede contener letras, dígitos, _ y $, no puede comenzar con un dígito, y no puede incluir espacios o palabras reservadas como let. Los nombres son sensibles a mayúsculas y minúsculas, así que total y Total son variables separadas.

Dentro de esas reglas, la convención es camelCase: primera palabra en minúsculas, cada palabra siguiente capitalizada, sin separadores.

let firstName = "María";
let itemPrice = 19.99;
let isLoggedIn = true;

La convención no se aplica por el lenguaje, pero se aplica por todas las bases de código en las que trabajarás, así que síguelo desde el principio. Un booleano a menudo se lee bien con un prefijo is o has (isLoggedIn, hasDiscount), que señala de un vistazo que el valor es verdadero o falso.

El nombre es documentación. daysUntilExpiry le dice al siguiente lector lo que significa el valor; d lo hace ir a buscar. Los nombres descriptivos cuestan algunos pulsaciones de tecla y ahorran tiempo real, así que gástalos.

Las reglas léxicas: un identificador válido (un nombre en código) puede contener letras, dígitos, _ y $, no puede comenzar con un dígito, y no puede ser una palabra reservada (let, const, return, etc.). Los identificadores son sensibles a mayúsculas y minúsculas, así que total y Total son distintos.

La convención superpuesta es camelCase para variables, y vale la pena tratarlo como innegociable aunque el lenguaje no lo aplique. Las herramientas, los compañeros y todas las guías de estilo populares lo asumen, así que desviarse añade fricción sin ganancia.

const firstName = "María";
const itemPrice = 19.99;
const isLoggedIn = true;

El hábito de mayor valor es nombrar para significado. Un nombre es la documentación más barata que tienes y la más probable de permanecer precisa, porque se sienta en el valor que describe. remainingCredits sobrevive a un refactor que un comentario diciendo "créditos restantes" podría no sobrevivir. Los booleanos se leen mejor como una pregunta sí/no (isActive, hasAccess), y evita nombres que se reinterpretan después de un cambio, como un const total al que mantienes conceptualmente sumando; si el significado se desvía, renómbralo. El nombrado claro es el hábito de mayor apalancamiento en este capítulo, y es gratis.

JunoNombrar variables Un nombre puede usar letras, dígitos, _ y $, pero no puede comenzar con un dígito ni contener espacios. Los nombres son sensibles a mayúsculas y minúsculas, así que firstName y firstname son diferentes. Usa camelCase como itemPrice, y elige nombres que digan qué contienen, así price sobre p.

JunoNombrar variables Los nombres válidos usan letras, dígitos, _ y $, nunca comienzan con un dígito, y son sensibles a mayúsculas y minúsculas. La convención es camelCase, y aunque el lenguaje no lo aplique, todas las bases de código lo hacen, así que síguelo desde el primer día. Un nombre descriptivo es documentación que permanece precisa, así que gasta las pulsaciones de tecla en daysUntilExpiry sobre d.

JunoNombrar variables Los identificadores permiten letras, dígitos, _ y $, no pueden comenzar con un dígito, no pueden ser palabras reservadas, y son sensibles a mayúsculas y minúsculas. Usa camelCase; el lenguaje no lo aplica pero todas las herramientas y compañeros lo asumen. Nombrar para significado es el hábito de mayor apalancamiento aquí, y no cuesta nada, así que haz remainingCredits la opción por defecto sobre r.

Hacia dónde van las variables desde aquí

Las variables son la base sobre la que se sienta todo lo demás: un valor no es útil hasta que tiene un nombre por el que puedas alcanzarlo. Ahora tienes los tres movimientos que importan, almacenar un valor con let, bloquear uno con const, y nombrarlo bien, y usarás los tres en todo programa que escribas de aquí en adelante.

A continuación mirarás los valores en sí en tipos de datos: el texto, números y booleanos que has estado almacenando, y qué hace que cada uno se comporte como lo hace. Después de eso, operadores te muestra cómo combinar esos valores, y funciones te permite nombrar un pedazo de trabajo de la forma en que una variable nombra un valor.