Variables en JavaScript

Introducción

Las variables en JavaScript son fundamentales para cualquier programa que escribamos. En este artículo, profundizaremos en las variables de JavaScript, para que puedas entender cómo funcionan, cómo declararlas y cómo utilizarlas en tus programas.

¿Qué son las variables en JavaScript?

Las variables son contenedores que nos permiten almacenar y manipular datos en nuestros programas de JavaScript. En otras palabras, una variable es una forma de almacenar un valor en la memoria y luego utilizar ese valor en diferentes partes del programa.

En JavaScript, podemos almacenar diferentes tipos de datos en una variable, como números, cadenas de texto, objetos, matrices, booleanos y más.

Para declarar una variable en JavaScript, utilizamos la palabra clave var, let, o const, seguida del nombre que le daremos a la variable.

Veamos un ejemplo de cómo se declara una variable en JavaScript utilizando la palabra clave var:


var nombre = "Juan";

Lenguaje del código: JavaScript (javascript)

En este ejemplo, hemos declarado una variable llamada nombre y le hemos asignado el valor "Juan". Podemos utilizar esta variable en diferentes partes del programa y cambiar su valor en cualquier momento.

Es importante tener en cuenta que en JavaScript, las variables son case sensitive, lo que significa que una variable llamada nombre es diferente de una variable llamada Nombre.

En las siguientes secciones, profundizaremos en los diferentes tipos de variables que podemos utilizar en JavaScript y en cómo declarar y asignar valores a estas variables.

Tipos de variables en JavaScript

En JavaScript, existen diferentes tipos de variables que podemos utilizar en nuestros programas. A continuación, presentaremos algunos de los tipos de variables más comunes en JavaScript:

Variables primitivas

Las variables primitivas son variables que contienen un único valor primitivo, como un número, una cadena de texto o un valor booleano.

Ejemplo:


var numero = 42;
var texto = "Hola, mundo";
var booleano = true;

Lenguaje del código: JavaScript (javascript)

Variables no primitivas

Las variables no primitivas son variables que contienen un objeto. Los objetos pueden ser de diferentes tipos, como matrices, funciones y otros objetos.

Ejemplo:


var persona = { nombre: "Juan", edad: 30 };
var colores = ["rojo", "verde", "azul"];

Lenguaje del código: JavaScript (javascript)

Variables globales

Las variables globales son variables que se definen fuera de una función y que pueden ser utilizadas en cualquier parte del programa.

Ejemplo:


var mensaje = "Hola, mundo";

function saludar() {
  console.log(mensaje);
}

saludar(); // Imprime "Hola, mundo" en la consola

Lenguaje del código: JavaScript (javascript)

Variables locales

Las variables locales son variables que se definen dentro de una función y que solo pueden ser utilizadas dentro de esa función.

Ejemplo:


function calcularPromedio(numeros) {
  var suma = 0;
  for (var i = 0; i < numeros.length; i++) {
    suma += numeros[i];
  }
  var promedio = suma / numeros.length;
  return promedio;
}

var numeros = [2, 4, 6, 8];
var promedio = calcularPromedio(numeros);
console.log(promedio); // Imprime 5 en la consola
console.log(suma); // Error: la variable "suma" solo está definida dentro de la función "calcularPromedio"

Lenguaje del código: JavaScript (javascript)

Constantes

Las constantes son variables que se definen utilizando la palabra clave const y que no pueden cambiar su valor una vez que se han asignado.

Ejemplo:


const PI = 3.1416;
const URL_API = "https://miapi.com";

Lenguaje del código: JavaScript (javascript)

En JavaScript existen diferentes tipos de variables que podemos utilizar en nuestros programas, cada una con su propia sintaxis y uso. Es importante entender estos tipos de variables para poder utilizarlas correctamente en nuestro código.

Alcance de las variables en JavaScript

El alcance de una variable se refiere a la parte del programa donde una variable puede ser utilizada. En JavaScript, existen dos tipos de alcance de variables: el alcance global y el alcance local.

Alcance global

Las variables globales son aquellas que se declaran fuera de cualquier función y pueden ser utilizadas en cualquier parte del programa.

Ejemplo:


var nombre = "Juan";

function saludar() {
  console.log("Hola, " + nombre);
}

saludar(); // Imprime "Hola, Juan" en la consola

Lenguaje del código: JavaScript (javascript)

En este ejemplo, la variable nombre se declara fuera de la función saludar() y puede ser utilizada dentro de la función.

Alcance local

Las variables locales son aquellas que se declaran dentro de una función y solo pueden ser utilizadas dentro de esa función.

Ejemplo:


function saludar() {
  var nombre = "Juan";
  console.log("Hola, " + nombre);
}

saludar(); // Imprime "Hola, Juan" en la consola
console.log(nombre); // Error: la variable "nombre" solo está definida dentro de la función "saludar()"

Lenguaje del código: JavaScript (javascript)

En este ejemplo, la variable nombre se declara dentro de la función saludar() y solo puede ser utilizada dentro de esa función.

Alcance por la palabra let o const

Es importante tener en cuenta que el alcance de una variable también puede ser afectado por la palabra clave utilizada para declararla.

Por ejemplo, si declaramos una variable utilizando la palabra clave let o const, su alcance se limitará al bloque donde fue declarada.

Ejemplo:


function saludar() {
  let nombre = "Juan";
  if (true) {
    let nombre = "María";
    console.log("Hola, " + nombre);
  }
  console.log("Adiós, " + nombre);
}

saludar(); // Imprime "Hola, María" y "Adiós, Juan" en la consola

Lenguaje del código: JavaScript (javascript)

En este ejemplo, declaramos la variable nombre dentro de la función saludar() utilizando la palabra clave let. Dentro del bloque if, declaramos otra variable nombre con el mismo nombre, pero con un valor diferente.

Como la variable nombre dentro del bloque if se declara con la palabra clave let, su alcance se limita a ese bloque, mientras que la variable nombre fuera del bloque sigue siendo la misma.

Cómo declarar variables en JavaScript

Para declarar y asignar valores a una variable en JavaScript, utilizamos las palabras clave var, let o const, seguidas del nombre de la variable y, opcionalmente, del valor que queremos asignarle.

  1. var: es la forma más antigua de declarar variables en JavaScript y tiene un alcance de función. Si una variable se declara dentro de una función, su alcance se limita a esa función. Si se declara fuera de una función, su alcance es global.
  2. let: es una forma más nueva de declarar variables en JavaScript y tiene un alcance de bloque. Si una variable se declara dentro de un bloque de código, su alcance se limita a ese bloque.
  3. const: es similar a let, pero el valor de una variable declarada como const no puede ser reasignado. Es decir, es una variable constante.

La sintaxis básica para declarar y asignar valores a una variable en JavaScript es la siguiente:


var nombreVariable = valor;
let nombreVariable = valor;
const nombreVariable = valor;

Lenguaje del código: JavaScript (javascript)

Ejemplo:


var nombre = "Juan";
let edad = 30;
const pi = 3.14;

Lenguaje del código: JavaScript (javascript)

Es recomendable usar let y const en lugar de var, ya que ofrecen una mayor claridad y control sobre el alcance de las variables en un programa.

En el caso de las variables globales, podemos declararlas en cualquier parte del programa. En el caso de las variables locales, solo podemos declararlas dentro de una función.

Ejemplos:


// Declaración y asignación de una variable global con var
var mensaje = "Hola, mundo";
console.log(mensaje); // Imprime "Hola, mundo" en la consola

// Declaración y asignación de una variable local con let
function saludar() {
  let nombre = "Juan";
  console.log("Hola, " + nombre); // Imprime "Hola, Juan" en la consola
}

saludar();

// Declaración y asignación de una constante
const PI = 3.1416;
console.log(PI); // Imprime 3.1416 en la consola

Lenguaje del código: JavaScript (javascript)

También podemos asignar valores a una variable en cualquier momento después de declararla. Para asignar un valor a una variable ya declarada, simplemente utilizamos el nombre de la variable y el operador de asignación = seguido del valor que queremos asignar.

Ejemplo:


var edad;
edad = 30; // Asignamos el valor 30 a la variable "edad"
console.log(edad); // Imprime 30 en la consola

Lenguaje del código: JavaScript (javascript)

Reglas para declarar variables en JavaScript

En JavaScript, existen algunas reglas para definir o declarar variables de forma correcta:

  1. Nombres de variables válidos: los nombres de variables pueden incluir letras, números y guiones bajos, pero deben comenzar con una letra o un guion bajo. Además, los nombres de variables no deben ser palabras reservadas en JavaScript, como var, let, const, function, etc.
  2. Nombres de variables sensibles a mayúsculas y minúsculas: los nombres de variables en JavaScript son sensibles a mayúsculas y minúsculas, lo que significa que nombre y Nombre son variables diferentes.
  3. No se pueden usar caracteres especiales: los nombres de variables no deben incluir caracteres especiales como el punto (.), la exclamación (!), la @, etc.
  4. No se pueden usar palabras reservadas: los nombres de variables no deben ser iguales a las palabras reservadas en JavaScript, como var, let, const, function, etc.

En general, es recomendable seguir convenciones de nombramiento estándar para las variables, como usar nombres descriptivos y camelCase para los nombres de variables compuestos por más de una palabra como:

  1. camelCase: se escribe el primer carácter de la primera palabra en minúsculas y el primer carácter de cada palabra posterior en mayúsculas. Por ejemplo: firstName, lastName, age, etc.
  2. snake_case: se separan las palabras con guiones bajos. Por ejemplo: first_name, last_name, age, etc.
  3. PascalCase: se escriben todas las letras de cada palabra en mayúsculas. Por ejemplo: FirstName, LastName, Age, etc.

Es importante tener en cuenta que los nombres de variables son sensibles a mayúsculas y minúsculas en JavaScript, por lo que nombre y Nombre son variables diferentes.

Buenas prácticas

A continuación, presentaremos algunas buenas prácticas a tener en cuenta al trabajar con variables en JavaScript:

Utilizar nombres descriptivos

Es importante utilizar nombres descriptivos para las variables, de manera que sea fácil entender su función y uso en el programa. Esto puede ayudar a hacer el código más legible y fácil de mantener.

Ejemplo:


// Nombre no descriptivo
var x = 42;

// Nombre descriptivo
var edadUsuario = 42;

Lenguaje del código: JavaScript (javascript)

Utilizar “const” para valores que no cambian

Cuando sabemos que el valor de una variable no va a cambiar durante la ejecución del programa, es una buena práctica utilizar la palabra clave const para declararla. Esto puede ayudar a prevenir errores en el código y hacerlo más fácil de entender.

Ejemplo:


const PI = 3.1416;
const URL_API = "https://miapi.com";

Lenguaje del código: JavaScript (javascript)

Evitar variables globales

Es una buena práctica evitar utilizar variables globales siempre que sea posible, ya que pueden causar errores difíciles de depurar en programas grandes o complejos.

En su lugar, es recomendable utilizar variables locales dentro de funciones y pasar datos entre funciones mediante parámetros y retornos.

Declarar variables al principio de la función

Es una buena práctica declarar todas las variables que se van a utilizar en una función al principio de la función. Esto puede hacer el código más fácil de leer y entender.

Ejemplo:


function calcularPromedio(numeros) {
  var suma = 0; // Declaramos la variable "suma"
  var promedio; // Declaramos la variable "promedio"
  for (var i = 0; i < numeros.length; i++) {
    suma += numeros[i];
  }
  promedio = suma / numeros.length; // Asignamos un valor a la variable "promedio"
  return promedio;
}

Lenguaje del código: JavaScript (javascript)

Utilizar let y const en lugar de var

A partir de ECMAScript 6, se recomienda utilizar la palabra clave let y const en lugar de var para declarar variables. Esto puede ayudar a prevenir errores en el código y hacerlo más fácil de entender.

Ejemplo:


let nombre = "Juan"; // Utilizamos "let" en lugar de "var"
const PI = 3.1416; // Utilizamos "const" para valores que no cambian

Lenguaje del código: JavaScript (javascript)

Al trabajar con variables en JavaScript, es importante utilizar nombres descriptivos, evitar variables globales siempre que sea posible, declarar variables al principio de la función, utilizar const para valores que no cambian y utilizar let en lugar de var.

Seguir estas buenas prácticas puede ayudar a hacer el código más legible, fácil de entender y menos propenso a errores.

Uso de variables en JavaScript

El uso de variables en JavaScript se hace para almacenar y manipular valores en el código. Al declarar una variable, se asigna un nombre que hace referencia a ese valor. Luego, se puede utilizar ese nombre para acceder y modificar el valor de la variable en diferentes partes del código.

Hay diferentes maneras de utilizar variables en JavaScript, algunos ejemplos incluyen:

1. Asignación de valores:

Se pueden asignar valores a variables al declararlas o en un momento posterior.

Por ejemplo: var edad = 30;


var edad = 30;
console.log(edad); // 30

Lenguaje del código: JavaScript (javascript)

2. Concatenación de cadenas

Se pueden unir dos o más cadenas de texto utilizando el operador +.

Por ejemplo: var nombreCompleto = "Juan" + " Pérez";


var nombre = "Juan";
var apellido = "Pérez";
var nombreCompleto = nombre + " " + apellido;
console.log(nombreCompleto); // "Juan Pérez"

Lenguaje del código: JavaScript (javascript)

3. Uso en operaciones matemáticas

Se pueden utilizar variables en operaciones matemáticas para realizar cálculos y asignar el resultado a una nueva variable.

Por ejemplo: var resultado = 10 + 20;


var num1 = 10;
var num2 = 20;
var resultado = num1 + num2;
console.log(resultado); // 30

Lenguaje del código: JavaScript (javascript)

4. Uso en condicionales

Se pueden utilizar variables en sentencias condicionales para tomar decisiones en el código.

Por ejemplo: if (edad >= 18) {...}


var edad = 18;
if (edad >= 18) {
    console.log("Eres mayor de edad");
} else {
    console.log("Eres menor de edad");
}
// "Eres mayor de edad"

Lenguaje del código: JavaScript (javascript)

4. Uso en bucles

Se pueden utilizar variables en bucles para repetir un bloque de código varias veces.

Por ejemplo: for (var i = 0; i < 10; i++) {...}


for (var i = 0; i < 10; i++) {
    console.log(i);
}
// 0 1 2 3 4 5 6 7 8 9

Lenguaje del código: JavaScript (javascript)

Variables JavaScript en HTML

Las variables en JavaScript se pueden utilizar en HTML para agregar dinamismo e interactividad a una página web. Al declarar una variable en JavaScript, se puede almacenar información y acceder a ella desde HTML.

Aquí hay un ejemplo de cómo se pueden utilizar las variables en JavaScript en HTML:

  1. Declaración de la variable en JavaScript:

<script>
  var nombre = "Juan";
</script>

Lenguaje del código: JavaScript (javascript)
  1. Uso de la variable en HTML:

<p>Hola, <script>document.write(nombre);</script>!</p>

Lenguaje del código: HTML, XML (xml)

El resultado será:


Hola, Juan!

Lenguaje del código: texto plano (plaintext)

En este ejemplo, la variable “nombre” se declara en JavaScript y luego se utiliza en HTML mediante el método document.write() para mostrar su valor en un elemento <p>.

Además de utilizar las variables en HTML para mostrar valores, también se pueden utilizar para controlar el comportamiento de la página web, por ejemplo, mostrando y ocultando elementos HTML basados en ciertas condiciones.

De esta forma, se pueden crear experiencias más interactivas y dinámicas para los usuarios.

Más ejemplos

Aquí hay un ejemplo más avanzado de cómo se pueden utilizar las variables en JavaScript en HTML:


<!DOCTYPE html>
<html>
  <head>
    <script>
      var num1 = 10;
      var num2 = 20;
    </script>
  </head>
  <body>
    <h1>Ejemplo de Variables JavaScript en HTML</h1>
    <p>El resultado de la suma de <script>document.write(num1);</script> y <script>document.write(num2);</script> es: <script>document.write(num1 + num2);</script></p>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

El resultado será:


Ejemplo de Variables JavaScript en HTML
El resultado de la suma de 10 y 20 es: 30

Lenguaje del código: texto plano (plaintext)

En este ejemplo, se declaran dos variables en JavaScript: num1 y num2, y luego se utilizan en HTML para calcular la suma de ambos valores y mostrar el resultado en un elemento <p>.

Ejemplos prácticos utilizando variables

A continuación, presentaremos algunos ejemplos prácticos de cómo utilizar las variables en JavaScript en diferentes situaciones:

Ejemplo 1: Calculadora de promedio

En este ejemplo, utilizaremos una función para calcular el promedio de un conjunto de números. Para ello, utilizaremos una variable para almacenar la suma de los números y otra variable para almacenar el promedio.


function calcularPromedio(numeros) {
  var suma = 0;
  for (var i = 0; i < numeros.length; i++) {
    suma += numeros[i];
  }
  var promedio = suma / numeros.length;
  return promedio;
}

var numeros = [2, 4, 6, 8];
var promedio = calcularPromedio(numeros);
console.log(promedio); // Imprime 5 en la consola

Lenguaje del código: JavaScript (javascript)

Ejemplo 2: Personalización del sitio web

En este ejemplo, utilizaremos una variable para almacenar el nombre del usuario que está interactuando con nuestro sitio web y personalizar la experiencia del usuario en consecuencia.


var nombreUsuario = prompt("Ingrese su nombre:");
var mensajeBienvenida = "Bienvenido, " + nombreUsuario + "!";
document.getElementById("mensaje-bienvenida").innerHTML = mensajeBienvenida;

Lenguaje del código: JavaScript (javascript)

En este ejemplo, utilizamos la función prompt() para pedir al usuario que ingrese su nombre y almacenamos el valor en la variable nombreUsuario.

Luego, creamos un mensaje de bienvenida utilizando la variable nombreUsuario y lo mostramos en un elemento HTML utilizando la función document.getElementById().

Ejemplo 3: Cambio de colores

En este ejemplo, utilizaremos una variable para almacenar una lista de colores y cambiar el color de fondo de una página web cada vez que se hace clic en un botón.


var colores = ["red", "green", "blue", "yellow", "purple"];
var indiceColor = 0;

document.getElementById("cambiar-color").addEventListener("click", function() {
  if (indiceColor == colores.length) {
    indiceColor = 0;
  }
  document.body.style.backgroundColor = colores[indiceColor];
  indiceColor++;
});

Lenguaje del código: JavaScript (javascript)

En este ejemplo, utilizamos la variable colores para almacenar una lista de colores y la variable indiceColor para llevar un seguimiento del índice del color actual.

Luego, utilizamos la función addEventListener() para detectar cuando se hace clic en un botón y cambiamos el color de fondo de la página utilizando la variable indiceColor y la propiedad style.backgroundColor. Si llegamos al final de la lista de colores, volvemos al inicio.

Referencias

Curso de HTML Desde Cero

Inscríbete Ahora