MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-Learn-Section-Survey

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Almacenando la información que necesitas — Variables

Después de leer los dos últimos artículos, ahora debe saber qué es JavaScript, qué puede hacer por usted, cómo lo usa junto con otras tecnologías web y cuáles son sus características principales desde un alto nivel. En este artículo vamos a centrarnos en lo básico, y veremos cómo trabajar con la mayoría de los componentes más básicos de JavaScript: Variables.

Prerrequisitos: Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.
Objectivo: Familiarizarse con los conceptos básicos de las variables de JavaScript.

Herramientas que necesitas

A lo largo de este artículo, se le pedirá que escriba las líneas de código para probar su comprensión del contenido. Si está utilizando un navegador de escritorio, el mejor lugar para escribir su código de muestra es la consola de JavaScript de su navegador (consulte Qué son las herramientas de desarrollo del navegador para obtener más información sobre cómo acceder a esta herramienta).

Sin embargo, también proporcionamos una consola JavaScript simple incrustada en la página siguiente para que ingrese este código, en caso de que no esté utilizando un navegador con una consola JavaScript fácilmente disponible, o encuentre una consola en la página más cómoda.

¿Qué es una variable?

Una variable es un contenedor para un valor, como un número que podríamos usar en una suma, o una cadena que podríamos usar como parte de una oración. Pero una cosa especial acerca de las variables es que sus valores contenidos pueden cambiar. Veamos un ejemplo simple:

<button>Presioname</button>
const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('¿Cuál es tu nombre?');
  alert('Hola ' + name + ', me alegro de vert!');
}

En este ejemplo, presionar el botón ejecuta un par de líneas de código. La primera línea muestra un cuadro en la pantalla que le pide al lector que ingrese su nombre, y luego almacena el valor en una variable. La segunda línea muestra un mensaje de bienvenida que incluye su nombre, tomado del valor de la variable.

Para entender por qué esto es tan útil, pensemos en cómo escribiríamos este ejemplo sin usar una variable. Terminaría luciendo algo como esto:

var name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

Puede que no comprendas del todo la sitaxis que estamos utilizando (todavía), pero serás capaz de entender la idea — si no tuviesemos las variable disponibles, tendríamos que implementar un bloque gigante de código que compruebe el nombre enviado por el usuario, y después muestre el mensaje correspondiente para ese nombre. Obviamente eso es ineficiente (el código es muy grande, incluso para solo cuatro opciones), y seguiría sin funcionar — posiblemente no pudiese almacenar todas esas opciones.

Las variables tienen sentido, y a medida que vayas aprendiendo más sobre JavaScript, te irán resultando más naturales.

Otra cosa especial de las variables es que pueden tener de todo — no solo cadenas y números. Las variables también pueden contener datos complejos e incluso funciones enteras con las que hacer cosas asombrosas. Aprenderás más sobre esto más adelante.

Recuerda que hemos dicho que las variables contienen valores. Es una importante diferencia a tener en cuenta. Las variables no son valores por sí mismas; son contenedores de valores. Puedes pensar en ellas con una caja de cartón donde puedes guardar cosas dentro.

Declarando una variable

Para usar una variable, primero tienes que crearla — más especificamente, a esto se le llama declarar una variable. Para hacer esto, escribimos la palabra clave var o let seguido del nombre que le quieres poner a la variable:

let myName;
let myAge;

Ahora estamos creando dos variable llamadas myNamemyAge. Ahora prueba a escribir estas líneas en la consola de tu navegador, o en la consola de debajo (Puedes abrir la consola en una pestaña o en una ventana diferente, si así lo prefieres). Después, prueba creando una variable (o dos) con los nombres que tú elijas.

Nota: En JavaScript, todas las instrucciones deben terminar con punto y coma (;) — tu código puede funcionar correctamente para líneas singulares, pero probablemente no funcionará cuando estés escribiendo múltiples líneas de código juntas. Procura acostumbrarte a incluirlo.

Puedes probar si estos valores existen ahora en el entorno de ejecución tecleando únicamente el nombre de las variables, por ejemplo:

myName;
myAge;

Ahora mismo no tienen ningún valor, son contenedores vacíos. Cuando tecleas el nombre de las variables, recibirás de vuelta el resultado undefined. Si las variables no existen, recibirás un mensaje de error — prueba a teclear:

scoobyDoo;

Nota: No confundas una variable que existe y que no tiene asignado ningún valor, con una variable que no existe  — son cosas diferentes.

Inicializar una variable

Una vez que has declarado la variable, puedes inicializarla con un valor. Haz esto escribiendo el nombre de la variable, seguido del signo de igual (=), continuado por el valor que le quieres dar. Por ejemplo:

myName = 'Chris';
myAge = 37;

Intenta volver a la consola y escribe estas líneas. Deberías poder ver en la consola los valores que asignaste a la variable para confirmar que se incializaron correctamente. De nuevo, puedes ver el valor de cada variable escribiendo su nombre en la consola — inténtelo de esta manera:

myName;
myAge;

Puedes declarar e inciar una variable al mismo tiempo de la siguiente forma:

let myDog = 'Rover';

Probablemente esto sea lo que hagas la mayoría del tiempo, es más rápido que hacer las dos acciones en líneas de código diferentes.

Nota: Si escribe un programa multilínea de JavaScript que declara e incializa variables, puedes declarar la variable después de incializarla y seguirá funcionando. Debido a que las declaraciones de variables generalmente se ejecutan primero antes que el resto del código. Esto es llamado hoisting — leer var hoisting para mas detalles acerca del tema.

Diferencia entre var y let

En este punto puedes estar pensando "¿por qué necesitamos dos palabras clave para definir las variables? ¿Por qué tener var y let?".

Las razones son un tanto históricas. Cuando Javascript fue creado por primera vez, sólo había var. Esto funciona básicamente bien en la mayoría de los casos, pero tiene algunos problemas en la forma en que funciona — su diseño a veces puede ser confuso o francamente molesto. Por eso, let fue creado en versiones modernas de JavaScript, una nueva palabra clave para crear variables que funciona de forma algo diferente a var, arreglando sus problemas en el proceso.

A continuación se explican un par de diferencias sencillas. No vamos a entrar en todas las diferencias ahora, pero empezarás a descubrirlas a medida que aprendas más sobre JavaScript (si realmente quieres leer sobre ellas ahora, no dudes en visitar visitar nuestra página de referencia).

Para empezar, si escribes un programa JavaScript multilínea que declare e inicialice una variable, puedes declarar una variable con var después de inicializarla y seguirá funcionando. Por ejemplo:

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

Nota: El código anterior no funcionará cuando se escriben líneas individuales en una consola JavaScript, sólo cuando se ejecuta un programa multilínea de JavaScript en un documento web.

Si escribe un programa multilínea de JavaScript que declara e incializa variables, puedes declarar la variable después de incializarla y seguirá funcionando. Debido a que las declaraciones de variables generalmente se ejecutan primero antes que el resto del código. Esto es llamado hoisting — leer hoisting para mas detalles acerca del tema.

El código anterior funciona debido al hoisting.

El Hoisting ya no funciona con let. Si cambiáramos var por let en el ejemplo anterior, fallaría con un error. Esto es algo bueno — declarar una variable después de inicializarla hace que el código sea confuso y más difícil de entender.

En segundo lugar, cuando usas var, puedes declarar la misma variable tantas veces como quieras, pero con let no puedes. Lo siguiente funcionaría:

var myName = 'Chris';
var myName = 'Bob';

Pero lo siguiente arrojaría un error en la segunda línea:

let myName = 'Chris';
let myName = 'Bob';

Tendrías que hacer esto en su lugar:

let myName = 'Chris';
myName = 'Bob';

 

Una vez más, se trata de una decisión lingüística sensata. No hay razón para redeclarar las variables - sólo hace que las cosas sean más confusas.

No hay ninguna razón para usar var, a menos que necesites soportar versiones antiguas de Internet Explorer en tu código (no soporta let hasta la versión 11; el navegador moderno de Windows Edge soporta let a la perfección).

 

Note: Actualmente estamos en el proceso de actualizar el curso para usar let en lugar de var.

Actualizando una variable

Una vez que has inicializado la variable con un valor, puedes cambiar (o actualizar) ese valor simplemente dándole un valor diferente. Intenta introducir las siguientes líneas en tu consola:

myName = 'Bob';
myAge = 40;

Reglas para asignar nombres a las variables

Puedes nombrar a una variable casi como quieras, pero hay limitaciones. Generalmente debe limitarse a usar solo caracteres latinos (0-9, a-z, A-Z) y el carácter subrayado ( también llamada barra baja o guión bajo  " _  ").

  • No debe usar otros caracteres, pues puede ocasionar errores o confusión cuando una audiencia internacional intente entender su código.
  • No use el guión bajo al iniciar una variable — esto es usado en ciertos constructores de Javascript para representar cosas específicas, por lo que puede resultar confuso.
  • No use números al inciar los nombres de las variables. Esto no está permitido y causará un error.
  • Una buena práctica a seguir es usar el "lower camel case" o también conocido como "camel case", donde se unen varias palabras, usando minúsculas para la primera y luego capitalizar las siguientes. Hasta ahora hemos estado utilizando esto para nombrar nuestras variables.
  • Haga a los nombres de las variables intuitivas, de manera que describan los datos que contienen. No solo use letras/numeros, o frases grandes y largas.
  • Las variables son case sensitive — eso quiere decir que myage es una variable diferente de myAge.
  • Un último punto— También debe evitar usar palabras reservadas para nombrar variables — Con esto, nos referimos a las palabras que conforman la sintaxis de Javascript. Por lo tanto no puede usar palabras como var, function, let, y for para nombrar variables. Los navegadores los reconocerán como items de la sintáxis del código, y generará errores.

Nota: Puede encontrar la lista completa de palabrars reservadas para poder evitarlas en  Lexical grammar — keywords.

Ejemplos de nombres correctos:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

Ejemplos de nombres incorrectos:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

Ejemplo de nombres que pueden resultar en error:

var
Document

Prueba a crear unas cuantas variables más, con la siguiente guía en mente.

Tipos de variables

Hay distintos tipos de datos que puede almacenar en variables. En esta sección, los describiremos de manera breve, luego en futuros artículos aprenderemos mas detalles acerca de estos.

Hasta ahora hemos visto los 2 primeros, pero hay otros.

Números

Puede almacenar números en las variables, ya sean números enteros como 30 (también llamados integers) números decimales como 2.456 (también llamados floats o números de punto flotante).

En Javascript no es necesario declarar el tipo de variable, a diferencia de otros lenguajes de programación. Cuando asignas un valor numérico a una variable, no debe incluir comillas:

let myAge = 17;

Strings

Los Strings son piezas de texto. Cuando asignas a una variable un String, debe encerrarlo entre comillas simples ( ' ' ) o dobles ( " " ), de lo contrario Javascript lo interpretará como si se tratase del nombre de otra variable. En las últimas versiones del EcmaScript se incluyen los templates literales.

let dolphinGoodbye = 'So long and thanks for all the fish';

Booleanos

Los Booleanos son valores de verdadero o falso — estos pueden tener 2 valores, truefalserespectivamente. Generalmente se usan en condicionales, despúes de lo cual el código se ejecuta según corresponda. Por ejemplo, un caso simple sería:

let iAmAlive = true;

Mientras que en la mayoría de casos se usaría así:

let test = 6 < 3;

Esto usando el operador "menor que" (<) para probar si 6 es menor que 3. Como era de esperarse, esto retorna false,¡porque 6 no es menor que 3! Aprenderás mucho mas acerca de dichos operadores más adelante en el curso.

Arrays

Un array o también llamado arreglo es un objeto único que contiene varios elementos encerrados entre corchetes y separados por comas. Intente ejecutar esto en su consola:

let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10,15,40];

Una vez definidos estos arreglos, puede acceder a cada elemento por su ubicación dentro del array. Pruebe estas líneas:

myNameArray[0]; // debería retornar 'Chris'
myNumberArray[2]; // debería retornar 40

Los corchetes especifican un valor de índice que corresponde a la posición del valor que quiere retornar. Es posible que se haya fijado que los arreglos en Javascript están indexadas en cero, el primer elemento de un array está en el índice 0.

Aprenderás mucho más acerca de arrays en un futuro artículo.

Objetos

En programación, un objeto es una estructura de código que modela o representa a un objeto de la vda real. Puede tener un objeto simple que represente a una caja que contenga datos sobre su ancho, largo y alto, o podría tener un objeto que represente a una persona, y contenga datos sobre su nombre, altura, peso, que idioma habla, como saluda en este, y más.

Intente introducir esta línea en su consola:

let dog = { name : 'Spot', breed : 'Dalmatian' };

Para recuperar la información almacenada en un objeto, puede usar la siguiente sintaxis:

dog.name;

Por el momento no veremos más acerca de los objetos, pero lo haremos más adelante en módulos futuros.

Débilmente tipado

JavaScript es un lenguaje "débilmente tipado", lo cual significa que , a diferencia de algunos otros lenguajes, no es necesario especificar el tipo de dato que vamos a almacenar en una variable(Ej. números, strings, arrays, etc).

Por ejemplo, si declara una variable y encierra su valor entre comillas, el navegador tratará esa variable como un string:

let myString = 'Hello';

Mientras el valor de esta variable esté dentro de comillas, seguirá siendo un string, así que ten cuidado:

let myNumber = '500'; // ups, esto sigue siendo un string
typeof(myNumber);
myNumber = 500; // mucho mejor— ahora es un número
typeof(myNumber);

Intentede ingresar en su consola las 4 líneas anteriores, y vea cuáles son los resultados. Notará que usamos una función especial llamada typeof() — esta retorna el tipo de dato de la variables que se le pasa. La primera que vez fue llamada retornó un string, ya que en es punto la variable myNumber contiene un string, '500'. Heche un vistazo al resultado la segunda vez que llama a esa función.

Constantes en JavaScript

Muchos lenguajes de programación manejan el término constante— una variable que cuyo valor una vez declarado nunca se puede cambiar. Hay muchas razones por las que querría utilizar esto, desde razones de seguridad (si se permitiera que un script de terceros cambiara dichos valores, podría generar problemas) hasta la depuración y comprensión del código (es más difícil cambiar por accidente valores que no deberían cambiarse y desordenar las cosas).

En los incios de  JavaScript, no existían las constantes. en versiones modernas, tenemos la palabra reservada const, que nos permite almacenar valores que nunca se pueden cambiar:

const daysInWeek = 7;
const hoursInDay = 24;

const funciona exactamente igual que let, a excepción que a const no le puedes asignar un nuevo valor. En el siguiente ejemplo, la segunda línea debería lanzar un error:

const daysInWeek = 7;
daysInWeek = 8;

Resumen

A estas alturas ya debería saber una cantidad razonable sobre las variables de Javascript y como crearlas. En el siguiente artículo nos centramos en los números con más detalle, y veremos funcionalidades matemáticas básicas en Javascript.

En este módulo

Etiquetas y colaboradores del documento

Colaboradores en esta página: Creasick, TheJarX, hchelbat, JaviMartain, Dhelarius
Última actualización por: Creasick,