Variables en JavaScript

¿Qué son las variables en JavaScript?

En JavaScript, una variable es un contenedor que almacena un valor y se puede referir a él mediante un nombre. Puede ser utilizado para almacenar diferentes tipos de valores, como números, cadenas de texto, objetos, arreglos, y otros tipos de datos.

Las variables pueden ser declaradas y reasignadas en diferentes puntos del programa, lo que permite una manipulación dinámica de los datos.

Tipos de variables en JavaScript

Existen diferentes tipos de variables que se usan en JavaScript para almacenar valores de diferentes tipos:

  • Números: almacenan valores numéricos.

let edad = 30;
let peso = 75.5;
console.log(edad + peso); // 105.5

Lenguaje del código: JavaScript (javascript)
  • Cadenas de texto: almacenan secuencias de caracteres entre comillas simples o dobles.

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

Lenguaje del código: JavaScript (javascript)
  • Booleanos: almacenan valores verdaderos o falsos.

let esMayorEdad = true;
if (esMayorEdad) {
    console.log("Eres mayor de edad");
} else {
    console.log("Eres menor de edad");
}
// "Eres mayor de edad"

Lenguaje del código: JavaScript (javascript)
  • Objetos: son estructuras de datos que almacenan propiedades y valores, como {nombre: “Juan”, edad: 30}.

let persona = {
    nombre: "Juan",
    apellido: "Pérez",
    edad: 30
};
console.log(persona.nombre); // "Juan"

Lenguaje del código: JavaScript (javascript)
  • Arreglos: son estructuras de datos que almacenan una colección de valores.

let diasSemana = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
console.log(diasSemana[0]); // "Lunes"

Lenguaje del código: JavaScript (javascript)
  • Null: representa la ausencia de valor.

let y = null;
console.log(y); // null

Lenguaje del código: JavaScript (javascript)
  • Undefined: representa la falta de asignación a una variable.

var x;
console.log(x); // undefined

Lenguaje del código: JavaScript (javascript)
  • Symbols: son valores únicos que no se pueden duplicar.

Es importante tener en cuenta que los valores primitivos (números, cadenas, booleanos, null, undefined y symbols) son inmutables, es decir, no se pueden cambiar una vez que se han asignado.

Por otro lado, los objetos y arreglos son mutables, lo que significa que sus propiedades y elementos pueden ser cambiados.

Cómo declarar variables en JavaScript

En JavaScript, se deben declarar las variables usando la palabra clave var, let o const.

  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.

var nombre = "Juan";

Lenguaje del código: JavaScript (javascript)
  1. 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.

let edad = 30;

Lenguaje del código: JavaScript (javascript)
  1. const: es similar a let, pero el valor de una variable declarada como const no puede ser reasignado. Es decir, es una variable constante.

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.

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.

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:

  • 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)
  • 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)
  • 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)
  • 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)
  • 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>.