JavaScript
1
Índice
Consulta rápidamente cada concepto y el ejemplo en el que se explica.
¿Qué son las variables? 3 Scope global 13
Cómo declarar una variable 3 Scope de módulo 14
Asignar un valor 4 Scope de función 14
Declarar y asignar al mismo tiempo 4 Scope de bloque 15
Cambiar el valor de una variable 5 Formas de declarar variables 16
Restablecer un valor 6 Scope de var 16
Variables que no reciben una nueva Cambiar el valor y volver a declarar 17
asignación: const 6
¿Cuándo utilizar let o const? 7 Volver a declarar con var 18
Declarar varias variables 7 Hoisting 19
¿Qué valores podemos guardar en una Reglas para nombres de variables 20
variable? 8
Conocer el tipo de un valor 9 Mayúsculas, minúsculas y Unicode 21
El caso especial de null 10 Nombres significativos 22
Tipado dinámico 11 Convenciones para nombres 22
Tipado débil 11 Palabras reservadas 23
Operaciones con variables 12 Nombres incorporados de JavaScript 24
¿Qué es el scope? 13 Buenas prácticas para nombres de archivos
25
2
JAVASCRIPT - VARIABLES
¿Qué son las variables?
Las variables son nombres que utilizamos para guardar o identificar valores que
nuestro programa necesitará utilizar.
JavaScript
const nombre = "Carlos";
const edad = 27;
En estos ejemplos:
- nombre es el nombre de la variable y "Carlos" es el valor guardado.
- edad es el nombre de la variable y 27 es el valor guardado.
Cómo declarar una variable
Para crear una variable podemos utilizar let.
JavaScript
let edad;
La variable edad ya existe, pero no escribimos un valor inicial. JavaScript le asigna
automáticamente el valor undefined.
JavaScript
let edad;
[Link](edad);
Consola
undefined
undefined indica que la variable existe, pero todavía no le hemos asignado otro valor.
3
JAVASCRIPT - VARIABLES
Asignar un valor
Después de declarar una variable, podemos asignarle un valor.
JavaScript
let edad;
edad = 27;
[Link](edad);
Consola
27
El signo = es el operador de asignación. Guarda el valor de la derecha dentro de la variable que
aparece a la izquierda.
Parte Función
edad Variable
= Realiza la asignación
27 Valor asignado
Declarar y asignar al mismo tiempo
Podemos declarar una variable y asignarle un valor en una sola instrucción.
JavaScript
let edad = 27;
Parte Qué indica
let Crearemos una variable
edad Nombre de la variable
= Asigna un valor
27 Valor inicial
La parte = 27 recibe el nombre de inicializador porque establece el valor inicial de la
variable.
4
JAVASCRIPT - VARIABLES
Cambiar el valor de una variable
Una variable creada con let puede cambiar de valor.
JavaScript
let edad = 27;
edad = 28;
[Link](edad);
Consola
28
La variable primero contenía el valor 27 y después cambió a 28.
El nombre técnico para esta acción es reasignar, pero podemos entenderlo simplemente
como cambiar el valor de una variable que ya existe.
JavaScript
let pais = "México";
pais = "España";
[Link](pais);
Consola
España
5
JAVASCRIPT - VARIABLES
Restablecer un valor
También podemos devolver una variable a su valor inicial.
JavaScript
let contador = 0;
contador = 10;
contador = 0;
[Link](contador);
Consola
Podemos decir que restablecimos o reiniciamos el contador. Para JavaScript, contador = 0 sigue
siendo un cambio de valor o reasignación.
Variables que no reciben una nueva asignación:
const
Utilizamos const cuando no queremos asignarle otro valor a una variable.
JavaScript
const nombre = "Carlos";
[Link](nombre);
Consola
Carlos
Si intentamos asignarle otro valor:
JavaScript
const nombre = "Carlos";
nombre = "Arturo";
Resultado
TypeError: Assignment to constant variable
6
JAVASCRIPT - VARIABLES
Además, const debe recibir un valor al momento de declararse.
JavaScript
const nombre;
Resultado
SyntaxError: Missing initializer in const declaration
¿Cuándo utilizar let o const?
Utilizamos let cuando el valor puede cambiar
JavaScript
let cantidadProductos = 1;
cantidadProductos = 2;
Utilizamos const cuando no asignaremos otro valor
JavaScript
const nombreUsuario = "Carlos";
En JavaScript moderno, normalmente utilizamos const como primera opción y let cuando
sabemos que el valor necesitará cambiar.
Declarar varias variables
Podemos declarar varias variables en una misma instrucción.
7
JAVASCRIPT - VARIABLES
JavaScript
let telefono,
pais = "México",
id;
[Link](telefono);
[Link](pais);
[Link](id);
Consola
undefined
México
undefined
- telefono contiene undefined.
- pais contiene "México".
- id contiene undefined.
También podemos declararlas por separado. Esta forma suele hacer que el código sea más fácil
de leer.
JavaScript
let telefono;
let pais = "México";
let id;
¿Qué valores podemos guardar en una variable?
Las variables pueden guardar diferentes tipos de valores:
Valor Descripción
string Cadena de texto
number Número
boolean Verdadero o falso
object Objeto
function Función
null Valor nulo
undefined Valor sin definir
8
JAVASCRIPT - VARIABLES
JavaScript
const nombre = "Carlos"; // string
const edad = 27; // number
const sesionActiva = true; // boolean
const usuario = { nombre: "Ana" }; // object
const saludar = function () {}; // function
const resultado = null; // null
let telefono; // undefined
Podemos comprobar algunos de estos valores:
JavaScript
[Link](nombre);
[Link](edad);
[Link](sesionActiva);
[Link](resultado);
[Link](telefono);
Consola
Carlos
27
true
null
undefined
Conocer el tipo de un valor
Podemos utilizar el operador typeof para conocer el tipo de un valor.
JavaScript
const nombre = "Carlos";
const edad = 27;
const activo = true;
[Link](typeof nombre);
[Link](typeof edad);
[Link](typeof activo);
Consola
string
number
boolean
También podemos comprobar los demás valores:
9
JAVASCRIPT - VARIABLES
JavaScript
const usuario = { nombre: "Ana" };
const saludar = function () {};
const resultado = null;
let telefono;
[Link](typeof usuario);
[Link](typeof saludar);
[Link](typeof resultado);
[Link](typeof telefono);
Consola
object
function
object
undefined
El caso especial de null
Si utilizamos typeof con null, JavaScript devuelve "object".
JavaScript
[Link](typeof null);
Consola
object
Este es un comportamiento histórico de JavaScript. Para comprobar si un valor es null, podemos
compararlo directamente:
JavaScript
const resultado = null;
[Link](resultado === null);
Consola
true
10
JAVASCRIPT - VARIABLES
Tipado dinámico
En JavaScript no necesitamos indicar qué tipo de valor guardará una variable. JavaScript
determina el tipo a partir del valor asignado.
JavaScript
let variable = "Texto";
[Link](typeof variable);
Consola
string
Una variable creada con let puede recibir después un valor de otro tipo.
JavaScript
let variable = "Texto";
variable = 7;
[Link](variable);
[Link](typeof variable);
Consola
7
number
La variable primero contenía una cadena de texto y después cambió a un número.
Tipado débil
JavaScript puede convertir automáticamente algunos valores cuando realizamos operaciones
con tipos diferentes.
JavaScript
[Link]("5" + 2);
Consola
52
JavaScript convierte el número 2 en texto y une ambos valores.
11
JAVASCRIPT - VARIABLES
JavaScript
[Link]("5" - 2);
Consola
En este caso, JavaScript convierte "5" en número para realizar la resta.
- El tipado dinámico permite cambiar el tipo de valor guardado.
- El tipado débil permite realizar algunas conversiones automáticas.
Operaciones con variables
Operaciones aritméticas
Podemos utilizar los valores guardados en las variables para realizar operaciones.
JavaScript
const numero1 = 10;
const numero2 = 5;
const resultado = numero1 + numero2;
[Link](resultado);
Consola
15
Concatenar cadenas de texto
Cuando utilizamos + con cadenas de texto, JavaScript une los valores.
JavaScript
const nombre = "Carlos";
const apellido = "Arturo";
const nombreCompleto = nombre + " " + apellido;
[Link](nombreCompleto);
Consola
Carlos Arturo
12
JAVASCRIPT - VARIABLES
¿Qué es el scope?
El scope o alcance determina en qué partes del código podemos utilizar una variable.
Una variable puede estar disponible:
- En todo el script.
- Dentro de un módulo.
- Dentro de una función.
- Dentro de un bloque.
Tipo de scope Dónde existe la variable
Global En el script actual
Módulo Dentro del módulo
Función Dentro de la función
Bloque Dentro de las llaves { }
Scope global
Cuando ejecutamos un script tradicional, una variable declarada fuera de funciones y bloques
pertenece al scope global.
JavaScript
const pais = "Guatemala";
function mostrarPais() {
[Link](pais);
}
mostrarPais();
[Link](pais);
Consola
Guatemala
Guatemala
La variable pais se encuentra en el scope exterior. La función puede acceder a las variables que
se encuentran en un scope exterior.
13
JAVASCRIPT - VARIABLES
Scope de módulo
Cuando trabajamos con un archivo cargado como módulo, las variables declaradas en el nivel
superior pertenecen al módulo.
JavaScript
const nombreAplicacion = "Mi aplicación";
La variable estará disponible dentro de ese módulo, pero no se agregará automáticamente al
objeto global.
Scope de función
Una variable declarada dentro de una función solamente puede utilizarse dentro de esa
función.
JavaScript
function saludar() {
const mensaje = "¡Hola!";
[Link](mensaje);
}
saludar();
Consola
¡Hola!
Si intentamos utilizarla fuera de la función:
JavaScript
function saludar() {
const mensaje = "¡Hola!";
}
[Link](mensaje);
Resultado
ReferenceError: mensaje is not defined
La variable mensaje solamente existe dentro de saludar().
14
JAVASCRIPT - VARIABLES
Scope de bloque
Un bloque es una sección de código delimitada por llaves { }.
JavaScript
if (true) {
const mensaje = "Estoy dentro del bloque";
[Link](mensaje);
}
Consola
Estoy dentro del bloque
Fuera del bloque, la variable ya no está disponible:
JavaScript
if (true) {
const mensaje = "Estoy dentro del bloque";
}
[Link](mensaje);
Resultado
ReferenceError: mensaje is not defined
Esto también sucede en los bucles:
JavaScript
for (let i = 0; i < 3; i++) {
[Link](i);
}
[Link](i);
Consola y error
0
1
2
ReferenceError: i is not defined
15
JAVASCRIPT - VARIABLES
Formas de declarar variables
Ahora que conocemos el scope, podemos comparar las tres formas principales de declarar
variables:
Declaración Cambio de valor Scope
let Sí Bloque
const No recibe otra asignación Bloque
var Sí Función, módulo o global
let
- Permite cambiar el valor.
- No permite volver a declarar el mismo nombre dentro del mismo scope.
- Respeta el scope de bloque.
const
- No permite asignar otro valor.
- Debe recibir un valor al declararse.
- Respeta el scope de bloque.
var
- Permite cambiar el valor y volver a declarar el nombre.
- No respeta el scope de bloque.
- Se mantiene principalmente por compatibilidad con código antiguo.
Scope de var
var no tiene scope de bloque.
JavaScript
if (true) {
var mensaje = "Hola";
}
[Link](mensaje);
Consola
Hola
Aunque mensaje fue declarada dentro del if, puede utilizarse fuera del bloque.
16
JAVASCRIPT - VARIABLES
Cuando var se declara dentro de una función, pertenece a esa función:
JavaScript
function saludar() {
var mensaje = "Hola";
}
[Link](mensaje);
Resultado
ReferenceError: mensaje is not defined
Cambiar el valor y volver a declarar
Cambiar el valor de una variable y volver a declararla son acciones diferentes.
Cambiar el valor
JavaScript
let nombre = "Ben Parker";
nombre = "Tía May";
[Link](nombre);
Consola
Tía May
Volver a declarar
JavaScript
let nombre = "Ben Parker";
let nombre = "Tía May";
Resultado
SyntaxError: Identifier 'nombre' has already been declared
El mismo nombre en scopes diferentes
17
JAVASCRIPT - VARIABLES
JavaScript
let nombre = "Ben Parker";
if (true) {
let nombre = "Tía May";
[Link](nombre);
}
[Link](nombre);
Consola
Tía May
Ben Parker
Volver a declarar con var
var permite volver a declarar una variable dentro del mismo scope.
JavaScript
var nombre = "Ben Parker";
var nombre = "Tía May";
[Link](nombre);
Consola
Tía May
Este comportamiento es otra razón por la que actualmente se prefieren let y const.
18
JAVASCRIPT - VARIABLES
Hoisting
JavaScript registra algunas declaraciones antes de ejecutar el código. Este comportamiento se
conoce como hoisting.
Hoisting con var
JavaScript
[Link](usuario);
var usuario = "Carlos";
Consola
undefined
JavaScript conoce la declaración de usuario, pero todavía no ha procesado la asignación de
"Carlos".
Hoisting con let y const
JavaScript
[Link](usuario);
let usuario = "Carlos";
Resultado
ReferenceError: Cannot access 'usuario' before initialization
JavaScript
[Link](pais);
const pais = "Guatemala";
Resultado
ReferenceError: Cannot access 'pais' before initialization
El periodo comprendido entre el inicio del scope y la declaración de una variable let o const
se conoce como zona temporal muerta o TDZ.
19
JAVASCRIPT - VARIABLES
Reglas para nombres de variables
No pueden comenzar con un número
JavaScript
let 1usuario = "Carlos";
Resultado
SyntaxError
JavaScript
let usuario1 = "Carlos";
Pueden comenzar con _ o $
JavaScript
let _contador = 0;
let $elemento = "botón";
Pueden contener números después del primer carácter
JavaScript
let usuario1;
let objeto123;
No pueden contener espacios
JavaScript
let nombre usuario;
Resultado
SyntaxError
JavaScript
let nombreUsuario;
20
JAVASCRIPT - VARIABLES
Mayúsculas, minúsculas y Unicode
JavaScript es case sensitive: distingue entre letras mayúsculas y minúsculas.
JavaScript
let nombre = "Carlos";
let Nombre = "Arturo";
[Link](nombre);
[Link](Nombre);
Consola
Carlos
Arturo
Nombre Diferencia
nombre Comienza con n minúscula
Nombre Comienza con N mayúscula
Caracteres Unicode
JavaScript permite utilizar muchos caracteres Unicode en los nombres.
JavaScript
const año = 2026;
const país = "Guatemala";
Algunos equipos prefieren utilizar caracteres sin tildes ni ñ para mantener una convención
uniforme.
JavaScript
const anio = 2026;
const pais = "Guatemala";
21
JAVASCRIPT - VARIABLES
Nombres significativos
Los nombres deben indicar qué información guarda la variable.
Nombre poco descriptivo
JavaScript
let x = "Fernando";
Nombre más claro
JavaScript
let nombreUsuario = "Fernando";
Otros ejemplos:
JavaScript
let cantidadProductos = 5;
let nombreCliente = "Ana";
let sesionActiva = true;
Los nombres descriptivos ayudan a entender el código sin necesidad de agregar demasiados
comentarios.
Convenciones para nombres
camelCase
Es la convención más utilizada para variables y funciones. La primera palabra comienza con
minúscula y las siguientes con mayúscula.
JavaScript
let nombreUsuario;
let contadorDeElementos;
let precioTotal;
PascalCase
Cada palabra comienza con mayúscula. Se utiliza principalmente para clases y componentes.
22
JAVASCRIPT - VARIABLES
JavaScript
class UsuarioPremium {}
class ObjetoGrafico {}
snake_case
JavaScript
let nombre_de_usuario;
UPPER_SNAKE_CASE
Puede utilizarse para constantes compartidas que representan configuraciones fijas.
JavaScript
const API_URL = "[Link]
const MAX_INTENTOS = 3;
Palabras reservadas
Las palabras reservadas tienen una función específica dentro de JavaScript. No podemos
utilizarlas libremente como nombres de variables.
JavaScript
let if = true;
let const = 10;
let for = 5;
Resultado
SyntaxError
Algunas palabras reservadas son:
Grupo 1 Grupo 2 Grupo 3 Grupo 4
break const function return
case continue if switch
catch default import this
class else new throw
delete export null true
23
JAVASCRIPT - VARIABLES
Grupo 1 Grupo 2 Grupo 3 Grupo 4
do extends super try
false finally typeof var
for in void while
instanceof with
Algunas palabras dependen del contexto: await, let, static, yield.
Palabras reservadas para posibles usos futuros: enum, implements, interface, package, private,
protected, public.
Nombres incorporados de JavaScript
Algunos nombres no son palabras reservadas, pero ya representan valores, funciones u objetos
importantes de JavaScript.
Por ejemplo: undefined, NaN, Infinity, Math, Number, Object, String, isNaN, isFinite, alert,
prompt, confirm.
Es recomendable evitar crear variables con estos nombres cuando podrían ocultar su
significado original.
JavaScript
const Math = "Matemáticas";
[Link](4.7);
Resultado
TypeError: [Link] is not a function
Un nombre más claro sería:
JavaScript
const nombreMateria = "Matemáticas";
[Link](nombreMateria);
Consola
Matemáticas
24
JAVASCRIPT - VARIABLES
Nombres como name, length, value o toString no están prohibidos. Podemos utilizarlos
cuando tengan sentido y no produzcan confusión.
Buenas prácticas para nombres de archivos
Se recomienda escribir los nombres de los archivos en minúsculas y separar las palabras con
guiones.
JavaScript
[Link]
[Link]
[Link]
Evitar espacios
Evitar Preferir
nombres de [Link] [Link]
Los sistemas Linux distinguen entre letras mayúsculas y minúsculas.
Nombre Diferencia
[Link] Comienza con V mayúscula
[Link] Comienza con v minúscula
Aunque la diferencia visual es pequeña, Linux puede interpretarlos como dos archivos
diferentes. Mantener una convención uniforme facilita la organización y ayuda a evitar
errores.
25