JavaScript básico: Variables, bucles, condicionales y buenas prácticas

Las variables son la base de JavaScript. Si no entiendes bien let, const y var, el resto será confuso. En este tutorial aprenderás las diferencias, cuándo usar cada una y las buenas prácticas que usan los programadores profesionales.

🤔 ¿Qué vamos a aprender?

✅ Qué son las variables y por qué las necesitamos
✅ Diferencias entre let, const y var
✅ Scope (alcance) de las variables
✅ Bucles y condicionales básicos
✅ Buenas prácticas para escribir código limpio
✅ Qué es 'use strict' y por qué usarlo

📦 ¿Qué son las variables?

Una variable es como una caja donde guardas información que puedes usar después.

🏪 Analogía del almacén:

Imagina un almacén con cajas etiquetadas:

Caja "nombre" → Contiene "Juan"
Caja "edad" → Contiene 25
Caja "email" → Contiene "juan@email.com"

Las variables funcionan igual: tienen un nombre y contienen un valor.

Ejemplo básico de variables:

Declaración y uso básico de variables

// Crear variables (declarar)
let nombre = "Ana";
let edad = 22;
let esEstudiante = true;

// Usar las variables
console.log("Hola, soy " + nombre);
console.log("Tengo " + edad + " años");
console.log("¿Soy estudiante? " + esEstudiante);

🔍 let vs const vs var: Las diferencias importantes

📌 1. var (la forma antigua)

Variables con var - forma antigua

var nombre = "Pedro";
var edad = 30;

// Puedes cambiar el valor
nombre = "Luis";
edad = 31;

console.log(nombre); // "Luis"
console.log(edad);   // 31

Características de var:

✅ Se puede cambiar el valor
✅ Se puede declarar otra vez
⚠️ Tiene scope de función (explicado abajo)
❌ Puede causar bugs extraños

📌 2. let (recomendado para valores que cambian)

Variables con let - forma moderna

let puntos = 0;
let nombreJugador = "María";

// Puedes cambiar el valor
puntos = 100;
nombreJugador = "Carmen";

console.log(puntos);        // 100
console.log(nombreJugador); // "Carmen"

Características de let:

✅ Se puede cambiar el valor
❌ NO se puede declarar otra vez en el mismo scope
✅ Tiene block scope (más seguro)
✅ Es la forma moderna y recomendada

📌 3. const (para valores constantes)

Variables con const - valores constantes

const PI = 3.14159;
const nombre = "StudyCode Pro";
const añoActual = 2025;

// ❌ Esto daría error - no puedes cambiar const
// PI = 3.14; // Error!
// nombre = "Otro nombre"; // Error!

console.log(PI);        // 3.14159
console.log(nombre);    // "StudyCode Pro"

Características de const:

❌ NO se puede cambiar el valor
❌ NO se puede declarar otra vez
✅ Tiene block scope
✅ Ideal para valores que no cambian

🎯 Comparación práctica:

Comparación práctica entre var, let y const

// Ejemplo con los tres tipos
var apellido = "García";     // Forma antigua
let edad = 25;              // Para valores que pueden cambiar
const email = "ana@test.com"; // Para valores constantes

// Casos de uso reales:
let contador = 0;           // ✅ Bueno - contador puede cambiar
const maxIntentos = 3;      // ✅ Bueno - máximo no cambia
var usuario = "Ana";        // ⚠️ Mejor usar let

// Cambiar valores
contador = contador + 1;    // ✅ Funciona
edad = edad + 1;           // ✅ Funciona
// email = "nuevo@test.com";  // ❌ Error - const no se puede cambiar

🔬 Scope: ¿Dónde existen las variables?

Scope significa "en qué parte del código puedes usar una variable".

Block Scope (let y const):

Block scope con let y const

function ejemplo() {
    let nombre = "Global";
    
    if (true) {
        let nombre = "Dentro del bloque";
        const apellido = "López";
        
        console.log(nombre);    // "Dentro del bloque"
        console.log(apellido);  // "López"
    }
    
    console.log(nombre);        // "Global"
    // console.log(apellido);   // ❌ Error - apellido no existe aquí
}

ejemplo();

Function Scope (var):

Problemas con function scope de var

function problemaConVar() {
    var mensaje = "Inicio";
    
    if (true) {
        var mensaje = "Dentro del if";  // ¡Cambia la variable original!
    }
    
    console.log(mensaje); // "Dentro del if" - ¡No es lo que esperabas!
}

problemaConVar();

⚠️ Por qué var puede causar problemas:

Con var, las variables "escapan" de los bloques if, for, etc. Esto puede crear bugs difíciles de encontrar.

Recomendación: Usa let y const siempre. Olvídate de var.

🔄 Bucles y condicionales con variables

🔀 Condicionales (if/else):

Condicionales if/else y operador ternario

const edad = 20;
let mensaje;

if (edad >= 18) {
    mensaje = "Eres mayor de edad";
} else if (edad >= 13) {
    mensaje = "Eres adolescente";
} else {
    mensaje = "Eres menor de edad";
}

console.log(mensaje); // "Eres mayor de edad"

// Forma más corta con operador ternario
const estado = edad >= 18 ? "adulto" : "menor";
console.log(estado); // "adulto"

🔁 Bucle for clásico:

Bucle for clásico con ejemplos prácticos

// Contar del 1 al 5
for (let i = 1; i <= 5; i++) {
    console.log("Número: " + i);
}

// i no existe aquí - está limitada al scope del for
// console.log(i); // ❌ Error

// Ejemplo práctico: tabla de multiplicar
const numero = 7;
for (let i = 1; i <= 10; i++) {
    const resultado = numero * i;
    console.log(numero + " x " + i + " = " + resultado);
}

🔁 Bucle while:

Bucle while con contador de intentos

let intentos = 0;
const maxIntentos = 3;

while (intentos < maxIntentos) {
    console.log("Intento número: " + (intentos + 1));
    intentos++; // Equivale a: intentos = intentos + 1
}

console.log("Fin del bucle. Total intentos: " + intentos);

🔁 Bucle for...of (para arrays):

Bucle for...of para recorrer arrays

const frutas = ["manzana", "banana", "naranja"];

for (const fruta of frutas) {
    console.log("Me gusta la " + fruta);
}

// Con índice también
for (let i = 0; i < frutas.length; i++) {
    console.log(i + ": " + frutas[i]);
}

📱 Ejemplo práctico: Contador avanzado

Contador avanzado con bucles y condicionales

'use strict';

// Variables para el contador
let contador = 0;
let pasos = 1;
const limiteMaximo = 100;
const limiteMinimo = -100;

// Simulamos diferentes operaciones
console.log("=== CONTADOR AVANZADO ===");
console.log("Contador inicial: " + contador);

// Incrementar varias veces
for (let i = 0; i < 5; i++) {
    if (contador + pasos <= limiteMaximo) {
        contador = contador + pasos;
        console.log("Incrementado: " + contador);
    } else {
        console.log("No se puede incrementar más. Límite: " + limiteMaximo);
        break;
    }
}

// Cambiar el paso a 10
pasos = 10;
console.log("Cambiando pasos a: " + pasos);

// Incrementar con pasos más grandes
for (let i = 0; i < 3; i++) {
    if (contador + pasos <= limiteMaximo) {
        contador += pasos;  // Forma corta de: contador = contador + pasos
        console.log("Incrementado (+10): " + contador);
    } else {
        console.log("Límite alcanzado: " + limiteMaximo);
        break;
    }
}

// Decrementar hasta un límite
pasos = 15;
console.log("Decrementando con pasos de: " + pasos);

while (contador > limiteMinimo) {
    contador -= pasos;  // Forma corta de: contador = contador - pasos
    
    if (contador < limiteMinimo) {
        contador = limiteMinimo;  // No permitir que baje del límite
    }
    
    console.log("Decrementado: " + contador);
    
    // Salir si llegamos al límite
    if (contador === limiteMinimo) {
        console.log("Límite mínimo alcanzado!");
        break;
    }
}

// Resumen final
console.log("=== RESUMEN ===");
console.log("Contador final: " + contador);
console.log("Límite máximo: " + limiteMaximo);
console.log("Límite mínimo: " + limiteMinimo);

✨ Buenas prácticas para variables

✅ Hazlo SIEMPRE:

Usa const por defecto, let solo si necesitas cambiar el valor

Nombres descriptivos: edadUsuario no e

camelCase para variables: nombreCompleto

MAYÚSCULAS para constantes globales: MAX_INTENTOS

Declara variables al principio de su scope

❌ NUNCA hagas esto:

Usar var en código nuevo

Variables globales innecesarias

Nombres confusos: a, x, temp

Cambiar const después de declararla

Variables sin declarar (modo no estricto)

🎯 Ejemplos de nombres buenos vs malos:

Buenos vs malos nombres de variables

// ❌ Nombres MALOS
let a = 25;
let x = "Pedro";
let f = true;
let data = [];

// ✅ Nombres BUENOS
let edadUsuario = 25;
let nombreEmpleado = "Pedro";
let esClientePremium = true;
let listaPedidos = [];

// ✅ Constantes globales
const MAX_PRODUCTOS = 100;
const URL_API = "https://api.ejemplo.com";
const COLORES = {
    ROJO: "#ff0000",
    VERDE: "#00ff00",
    AZUL: "#0000ff"
};

🛡️ 'use strict': Tu amigo para código más seguro

'use strict' es un modo especial de JavaScript que te ayuda a evitar errores comunes.

Sin 'use strict' (modo sloppy):

Código sin 'use strict' - modo permisivo

// Sin 'use strict' - permite errores silenciosos
function sinModoEstricto() {
    // Variable sin declarar - crea variable global automáticamente
    usuario = "Ana";  // ¡Esto es un error pero no se queja!
    
    // Parámetros duplicados - permitido pero confuso
    function problema(a, a) {
        return a; // ¿Cuál de los dos 'a'?
    }
    
    // Eliminar variables - falla silenciosamente
    var edad = 25;
    delete edad;  // No hace nada pero no da error
}

sinModoEstricto();

Con 'use strict' (recomendado):

Código con 'use strict' - modo estricto

'use strict';

function conModoEstricto() {
    // Variable sin declarar - ERROR inmediato
    // usuario = "Ana";  // ❌ ReferenceError: usuario is not defined
    
    // Forma correcta
    let usuario = "Ana";  // ✅ Correcto
    
    // Parámetros duplicados - ERROR de sintaxis
    // function problema(a, a) {  // ❌ SyntaxError
    //     return a;
    // }
    
    // Forma correcta
    function sinProblema(a, b) {  // ✅ Correcto
        return a + b;
    }
    
    return usuario;
}

console.log(conModoEstricto());

🔒 Beneficios de 'use strict':

🚫 Previene variables globales accidentales
🚫 Elimina sintaxis confusa (parámetros duplicados)
🚫 Prohíbe nombres reservados (let, const, class, etc.)
⚡ Hace el código más rápido (optimizaciones del motor)
🐛 Detecta errores antes (en lugar de fallar silenciosamente)

📍 Cómo usar 'use strict':

Cómo usar 'use strict' correctamente

// Opción 1: Al inicio del archivo (recomendado)
'use strict';

let nombre = "Ana";
const edad = 25;

// Todo el archivo estará en modo estricto

// Opción 2: Solo dentro de una función
function miFuncion() {
    'use strict';
    // Solo esta función está en modo estricto
    let valor = 100;
    return valor;
}

🚨 Errores comunes y cómo evitarlos

❌ Error #1: Confundir let y const

Error común: confundir let y const

// ❌ MAL
const puntos = 0;
puntos = 100;  // Error: Assignment to constant variable

// ✅ BIEN
let puntos = 0;
puntos = 100;  // Funciona perfecto

❌ Error #2: Variables sin declarar en modo estricto

Error: variables sin declarar en modo estricto

'use strict';

// ❌ MAL
function sumar(a, b) {
    resultado = a + b;  // Error: resultado is not defined
    return resultado;
}

// ✅ BIEN
function sumar(a, b) {
    let resultado = a + b;
    return resultado;
}

❌ Error #3: Usar const con objetos/arrays incorrectamente

Error: usar const con objetos incorrectamente

// ⚠️ CONFUSO - const no impide modificar el contenido
const persona = { nombre: "Ana", edad: 25 };
persona.edad = 26;  // ✅ Esto SÍ funciona
console.log(persona); // { nombre: "Ana", edad: 26 }

// ❌ Esto sí daría error
// persona = { nombre: "Luis" };  // Error: Assignment to constant

// Para objetos inmutables usa Object.freeze()
const personaInmutable = Object.freeze({ nombre: "Ana", edad: 25 });
// personaInmutable.edad = 26;  // No funciona (modo estricto da error)

✅ Ejercicio práctico

Tu misión: Crear un sistema de puntuación para un juego usando las buenas prácticas aprendidas.

🎯 Requisitos:

Usar 'use strict'

Variables con nombres descriptivos

const para valores que no cambian

let para valores que sí cambian

Bucles y condicionales

💡 Solución del ejercicio:

Click para ver la solución (¡intenta hacerlo solo primero!)

Solución completa del ejercicio: sistema de puntuación

'use strict';

// Constantes del juego
const PUNTOS_POR_NIVEL = 100;
const BONUS_PERFECTO = 50;
const MAX_VIDAS = 3;
const PUNTOS_VIDA_EXTRA = 500;

// Estado del jugador
let puntuacionTotal = 0;
let vidasRestantes = MAX_VIDAS;
let nivelActual = 1;
let partidasJugadas = 0;

// Simular varias rondas de juego
console.log("=== JUEGO DE PUNTUACIÓN ===");
console.log("Vidas iniciales: " + vidasRestantes);
console.log("Puntuación inicial: " + puntuacionTotal);

// Jugar 10 rondas
for (let ronda = 1; ronda <= 10; ronda++) {
    console.log("\n--- Ronda " + ronda + " ---");
    
    // Simular resultado aleatorio (true = éxito, false = fallo)
    const exito = Math.random() > 0.3; // 70% de probabilidad de éxito
    
    if (exito) {
        // Calcular puntos base
        let puntosRonda = PUNTOS_POR_NIVEL * nivelActual;
        
        // Bonus si es perfecto (20% de probabilidad)
        const esPerfecto = Math.random() > 0.8;
        if (esPerfecto) {
            puntosRonda += BONUS_PERFECTO;
            console.log("¡PERFECTO! Bonus: +" + BONUS_PERFECTO);
        }
        
        puntuacionTotal += puntosRonda;
        console.log("¡Éxito! Puntos ganados: " + puntosRonda);
        
        // Subir de nivel cada 3 rondas exitosas
        if (ronda % 3 === 0) {
            nivelActual++;
            console.log("¡NIVEL UP! Nuevo nivel: " + nivelActual);
        }
        
        // Vida extra cada 500 puntos
        if (puntuacionTotal >= PUNTOS_VIDA_EXTRA && vidasRestantes < MAX_VIDAS) {
            vidasRestantes++;
            console.log("¡VIDA EXTRA! Vidas: " + vidasRestantes);
        }
        
    } else {
        // Perder vida
        vidasRestantes--;
        console.log("¡Fallo! Vidas restantes: " + vidasRestantes);
        
        // Game Over
        if (vidasRestantes <= 0) {
            console.log("💀 GAME OVER 💀");
            break;
        }
    }
    
    partidasJugadas++;
    console.log("Puntuación actual: " + puntuacionTotal);
}

// Estadísticas finales
console.log("\n=== ESTADÍSTICAS FINALES ===");
console.log("Partidas jugadas: " + partidasJugadas);
console.log("Puntuación final: " + puntuacionTotal);
console.log("Nivel alcanzado: " + nivelActual);
console.log("Vidas restantes: " + vidasRestantes);

// Calcular ranking
let ranking;
if (puntuacionTotal >= 1000) {
    ranking = "MAESTRO";
} else if (puntuacionTotal >= 500) {
    ranking = "EXPERTO";
} else if (puntuacionTotal >= 200) {
    ranking = "INTERMEDIO";
} else {
    ranking = "PRINCIPIANTE";
}

console.log("Ranking: " + ranking);

🎯 ¿Qué sigue después?

¡Felicidades! Ya dominas las variables en JavaScript. Tus próximos pasos son:

🏗️ Funciones avanzadas: Arrow functions, callbacks, closures
📦 Objetos y arrays: Métodos, destructuring, spread operator
🔄 Asincronía: Promises, async/await
🌐 DOM manipulation: Interactuar con HTML
⚡ ES6+ features: Template literals, modules, classes

                💪 Recuerda:
                Usa const por defecto, let solo si necesitas cambiar el valor
Siempre pon 'use strict' al inicio de tus archivos
Nombres de variables descriptivos y claros
Practica creando proyectos reales, no solo ejercicios

            

🚀 ¿Te gustó este tutorial?

Únete a StudyCode Pro para más tutoriales como este, roadmaps completos y acceso a nuestra comunidad de developers que te ayudará a conseguir tu primer trabajo en tech.

📬 Únete Gratis