Introducción a JavaScript en 2026: Guía desde Cero

¿Qué es JavaScript y por qué aprenderlo en 2026?

⏱️ Lectura: 16 min

JavaScript es el lenguaje de programación más usado del mundo. Nació en 1995 como un pequeño lenguaje para dar interactividad a las páginas web, y hoy es una herramienta que abarca prácticamente todo: aplicaciones web, servidores, aplicaciones móviles, inteligencia artificial, videojuegos y hasta robots.🔄 Actualizado el 16 de abril de 2026

📑 En este artículo

¿Qué es JavaScript y por qué aprenderlo en 2026?
Requisitos previos
Tu primer programa: Hello World
Variables: var vs let vs const
Tipos de datos
1. Tipos primitivos
2. Tipos compuestos
Funciones
Condicionales y bucles
Manipulación del DOM
Ejemplo práctico: mini app de contador interactivo
Próximos pasos: qué aprender después
Preguntas frecuentes (FAQ)
Referencias

Si estás empezando en la programación, JavaScript es una de las mejores opciones para dar tus primeros pasos. ¿Por qué?

No necesitas instalar nada para empezar: tu navegador ya tiene un motor de JavaScript integrado.
Resultados inmediatos: puedes ver lo que hace tu código en tiempo real en el navegador.
Comunidad enorme: millones de desarrolladores, miles de tutoriales, bibliotecas y frameworks.
Mercado laboral sólido: JavaScript sigue siendo el lenguaje más demandado en ofertas de trabajo de desarrollo web en 2026.
Versatilidad: con JavaScript puedes construir desde una página web simple hasta una aplicación completa con backend, base de datos y despliegue en la nube.

En esta guía vas a aprender los fundamentos de JavaScript con sintaxis moderna (ES6+), ejemplos que puedes copiar y ejecutar, y al final construirás tu primera mini aplicación interactiva.

Requisitos previos

Para seguir este tutorial solo necesitas dos cosas:

Un navegador web moderno: Chrome, Firefox, Edge o Safari. Cualquiera funciona. En esta guía usaremos la consola de desarrollador, que puedes abrir con F12 o Ctrl + Shift + J (en Mac: Cmd + Option + J).
Un editor de código: recomendamos Visual Studio Code (VS Code). Es gratuito, ligero y tiene excelente soporte para JavaScript. Si no quieres instalar nada aún, puedes usar el Bloc de Notas, pero un editor con resaltado de sintaxis te hará la vida mucho más fácil.

Opcional: si quieres ejecutar JavaScript fuera del navegador, puedes instalar Node.js. Lo veremos más adelante en esta guía.

Tu primer programa: Hello World

La tradición en programación es que tu primer programa muestre el mensaje “Hello World” (Hola Mundo). Vamos a hacerlo de tres formas distintas para que entiendas los diferentes entornos donde JavaScript puede ejecutarse.

Forma 1: La consola del navegador

Esta es la forma más rápida de ejecutar JavaScript. No necesitas crear ningún archivo.

Abre tu navegador (Chrome, Firefox, etc.).
Presiona F12 para abrir las herramientas de desarrollador.
Haz clic en la pestaña Console.
Escribe lo siguiente y presiona Enter:

console.log("¡Hola Mundo!");

Verás el mensaje ¡Hola Mundo! impreso en la consola. ¡Acabas de ejecutar tu primer código JavaScript!

console.log() es una función que imprime mensajes en la consola del navegador. La vas a usar constantemente para depurar tu código y ver valores de variables.

Forma 2: Archivo .js enlazado a HTML

Esta es la forma estándar de usar JavaScript en una página web. Crea dos archivos en la misma carpeta:

Archivo index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer programa</title>
</head>
<body>
    <h1 id="saludo"></h1>
    <script src="app.js"></script>
</body>
</html>

Archivo app.js:

const saludo = document.getElementById("saludo");
saludo.textContent = "¡Hola Mundo desde JavaScript!";
console.log("El script se ejecutó correctamente");

Abre el archivo index.html en tu navegador (doble clic o arrastrarlo al navegador). Verás el mensaje en la página y en la consola.

Tip: La etiqueta <script> se coloca justo antes de cerrar </body>. Esto asegura que el HTML ya se cargó antes de que JavaScript intente manipularlo.

Forma 3: Node.js (JavaScript fuera del navegador)

Node.js te permite ejecutar JavaScript directamente en tu computadora, sin necesidad de un navegador. Es lo que usan los servidores web modernos.

Instala Node.js desde nodejs.org (descarga la versión LTS).
Crea un archivo llamado hola.js con este contenido:

console.log("¡Hola Mundo desde Node.js!");

Abre una terminal (CMD, PowerShell o la terminal de VS Code) y ejecuta:

node hola.js

Verás el mensaje impreso en la terminal. Con Node.js puedes construir servidores, APIs, herramientas de línea de comandos y mucho más.

Variables: var vs let vs const

Las variables son contenedores donde almacenas datos para usarlos después. En JavaScript hay tres formas de declarar variables: var, let y const.

const: para valores que no cambian

const PI = 3.14159;
const nombre = "JavaScript";
const añoCreacion = 1995;

// Esto daría error:
// PI = 3.14; // TypeError: Assignment to constant variable

Usa const siempre que el valor no vaya a cambiar. Es la opción por defecto que deberías usar.

let: para valores que sí cambian

let contador = 0;
contador = 1;  // Esto sí funciona
contador = 2;  // También funciona

let edad = 25;
edad = edad + 1; // Ahora edad vale 26

Usa let cuando necesites reasignar el valor de una variable, como un contador o un acumulador.

¿Y var? Ya no lo uses

// ❌ Forma antigua (evitar)
var mensaje = "Hola";

// ✅ Forma moderna
const mensaje = "Hola";

var era la única forma de declarar variables antes de 2015 (ES6). Tiene comportamientos confusos: su alcance es la función completa (no el bloque), se puede redeclarar sin error y se “eleva” (hoisting) de formas inesperadas. En código moderno, siempre usa const o let.

Regla práctica: empieza con const. Si el editor o el programa te dice que necesitas reasignar el valor, cámbialo a let. Nunca uses var.

Tipos de datos

JavaScript tiene varios tipos de datos fundamentales. Conocerlos te ayudará a entender cómo funciona el lenguaje.

Tipos primitivos

// String (cadena de texto)
const nombre = "María";
const saludo = `Hola, ${nombre}`; // Template literal (interpolación)

// Number (número entero o decimal)
const edad = 28;
const precio = 99.99;

// Boolean (verdadero o falso)
const esMayorDeEdad = true;
const tieneDescuento = false;

// Null (valor vacío intencional)
const respuesta = null;

// Undefined (valor no asignado)
let direccion; // undefined por defecto

Tipos compuestos

// Array (lista ordenada de valores)
const lenguajes = ["JavaScript", "Python", "Rust", "Go"];
console.log(lenguajes[0]); // "JavaScript" (el índice empieza en 0)
console.log(lenguajes.length); // 4

// Object (colección de pares clave-valor)
const usuario = {
    nombre: "Carlos",
    edad: 30,
    lenguajeFavorito: "JavaScript",
    esDesarrollador: true
};
console.log(usuario.nombre); // "Carlos"
console.log(usuario["edad"]); // 30

Tip: Usa typeof para saber el tipo de un valor: typeof 42 devuelve "number", typeof "hola" devuelve "string".

Funciones

Las funciones son bloques de código reutilizables. Defines la lógica una vez y la ejecutas cuantas veces quieras.

Función clásica (declaración)

function saludar(nombre) {
    return `¡Hola, ${nombre}! Bienvenido.`;
}

console.log(saludar("Ana")); // ¡Hola, Ana! Bienvenido.
console.log(saludar("Pedro")); // ¡Hola, Pedro! Bienvenido.

Arrow function (función flecha, ES6+)

const sumar = (a, b) => {
    return a + b;
};

// Si solo tiene una expresión, puedes simplificar:
const multiplicar = (a, b) => a * b;

// Con un solo parámetro, los paréntesis son opcionales:
const doble = n => n * 2;

console.log(sumar(5, 3));       // 8
console.log(multiplicar(4, 7)); // 28
console.log(doble(10));         // 20

Las arrow functions son más concisas y son el estándar en código moderno. Usa funciones clásicas cuando necesites hoisting (poder llamar la función antes de declararla en el código) o cuando trabajes con métodos de objetos que necesiten su propio this.

Funciones con valores por defecto

const crearUsuario = (nombre, rol = "lector") => {
    return { nombre, rol };
};

console.log(crearUsuario("Laura"));           // { nombre: "Laura", rol: "lector" }
console.log(crearUsuario("Laura", "admin"));  // { nombre: "Laura", rol: "admin" }

Condicionales y bucles

Las estructuras de control te permiten tomar decisiones y repetir acciones en tu código.

if / else if / else

const nota = 85;

if (nota >= 90) {
    console.log("Excelente");
} else if (nota >= 70) {
    console.log("Aprobado");
} else {
    console.log("Reprobado");
}
// Resultado: "Aprobado"

Operador ternario (versión corta del if/else)

const edad = 20;
const mensaje = edad >= 18 ? "Mayor de edad" : "Menor de edad";
console.log(mensaje); // "Mayor de edad"

Bucle for clásico

for (let i = 1; i <= 5; i++) {
    console.log(`Iteración número ${i}`);
}

for…of (recorrer arrays)

const frutas = ["Manzana", "Banana", "Naranja", "Mango"];

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

for...of es la forma moderna y limpia de recorrer arrays. Evita errores comunes del for clásico como salirse del índice.

while

let intentos = 0;

while (intentos < 3) {
    console.log(`Intento ${intentos + 1}`);
    intentos++;
}

Métodos de array (la forma funcional)

JavaScript moderno ofrece métodos poderosos para trabajar con arrays sin escribir bucles manuales:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// map: transforma cada elemento
const dobles = numeros.map(n => n * 2);
console.log(dobles); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

// filter: filtra elementos que cumplan una condición
const pares = numeros.filter(n => n % 2 === 0);
console.log(pares); // [2, 4, 6, 8, 10]

// find: encuentra el primer elemento que cumpla la condición
const primerMayorA5 = numeros.find(n => n > 5);
console.log(primerMayorA5); // 6

// reduce: acumula todos los valores en uno solo
const suma = numeros.reduce((total, n) => total + n, 0);
console.log(suma); // 55

Manipulación del DOM

El DOM (Document Object Model) es la representación que el navegador crea de tu HTML. JavaScript puede leer, modificar, crear y eliminar elementos del DOM, lo que te permite hacer páginas interactivas.

Seleccionar elementos

// Seleccionar por ID
const titulo = document.getElementById("titulo");

// Seleccionar con CSS selector (recomendado)
const boton = document.querySelector(".btn-principal");
const items = document.querySelectorAll(".lista-item");

querySelector usa la misma sintaxis que los selectores CSS, lo que lo hace muy flexible. querySelectorAll devuelve todos los elementos que coincidan.

Modificar elementos

const titulo = document.querySelector("#titulo");

// Cambiar texto
titulo.textContent = "Nuevo título";

// Cambiar HTML interno
titulo.innerHTML = "Título con <em>énfasis</em>";

// Cambiar estilos
titulo.style.color = "#2563eb";
titulo.style.fontSize = "2rem";

// Agregar o quitar clases CSS
titulo.classList.add("activo");
titulo.classList.remove("oculto");
titulo.classList.toggle("destacado");

Escuchar eventos

const boton = document.querySelector("#miBoton");

boton.addEventListener("click", () => {
    console.log("¡El botón fue clickeado!");
});

// Con más detalle
boton.addEventListener("click", (evento) => {
    console.log("Tipo de evento:", evento.type);
    console.log("Elemento clickeado:", evento.target);
});

Crear elementos dinámicamente

const lista = document.querySelector("#miLista");

const nuevoItem = document.createElement("li");
nuevoItem.textContent = "Elemento nuevo";
lista.appendChild(nuevoItem);

Ejemplo práctico: mini app de contador interactivo

Vamos a juntar todo lo que aprendimos para construir una aplicación funcional. Este contador tiene botones para incrementar, decrementar y reiniciar, con cambio de color según el valor.

Crea un archivo contador.html, copia este código y ábrelo en tu navegador:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contador Interactivo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: system-ui, -apple-system, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #0f172a;
            color: #e2e8f0;
        }
        .contador {
            text-align: center;
            padding: 3rem;
            border-radius: 1rem;
            background-color: #1e293b;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        }
        h1 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #94a3b8;
        }
        #valor {
            font-size: 6rem;
            font-weight: bold;
            margin: 1rem 0;
            transition: color 0.3s ease;
        }
        .botones {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
        }
        button {
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
            font-weight: 600;
            transition: transform 0.1s ease, opacity 0.2s ease;
        }
        button:hover {
            opacity: 0.9;
        }
        button:active {
            transform: scale(0.95);
        }
        .btn-decrementar {
            background-color: #ef4444;
            color: white;
        }
        .btn-reiniciar {
            background-color: #64748b;
            color: white;
        }
        .btn-incrementar {
            background-color: #22c55e;
            color: white;
        }
    </style>
</head>
<body>
    <div class="contador">
        <h1>Contador Interactivo</h1>
        <div id="valor">0</div>
        <div class="botones">
            <button class="btn-decrementar" id="decrementar">− Restar</button>
            <button class="btn-reiniciar" id="reiniciar">Reiniciar</button>
            <button class="btn-incrementar" id="incrementar">+ Sumar</button>
        </div>
    </div>

    <script>
        // Seleccionamos los elementos del DOM
        const valorDisplay = document.querySelector("#valor");
        const btnIncrementar = document.querySelector("#incrementar");
        const btnDecrementar = document.querySelector("#decrementar");
        const btnReiniciar = document.querySelector("#reiniciar");

        // Estado: nuestro contador
        let contador = 0;

        // Función para actualizar la pantalla
        const actualizarDisplay = () => {
            valorDisplay.textContent = contador;

            // Cambiar color según el valor
            if (contador > 0) {
                valorDisplay.style.color = "#22c55e"; // verde
            } else if (contador < 0) {
                valorDisplay.style.color = "#ef4444"; // rojo
            } else {
                valorDisplay.style.color = "#e2e8f0"; // neutro
            }
        };

        // Escuchar eventos de clic
        btnIncrementar.addEventListener("click", () => {
            contador++;
            actualizarDisplay();
        });

        btnDecrementar.addEventListener("click", () => {
            contador--;
            actualizarDisplay();
        });

        btnReiniciar.addEventListener("click", () => {
            contador = 0;
            actualizarDisplay();
        });
    </script>
</body>
</html>

Este ejemplo usa todo lo que aprendimos: const y let, arrow functions, template literals, querySelector, addEventListener, condicionales y manipulación del DOM. Puedes copiarlo, pegarlo en un archivo y abrirlo en tu navegador para verlo en acción.

Tip: Intenta agregar un botón que sume de 10 en 10, o un límite máximo y mínimo. Modificar ejemplos es la mejor forma de aprender.

Próximos pasos: qué aprender después

Si llegaste hasta aquí, ya tienes una base sólida de JavaScript. Estos son los temas que deberías explorar a continuación, en orden sugerido:

Async/Await y Promesas: JavaScript es asíncrono por naturaleza. Aprende a manejar operaciones que toman tiempo (como cargar datos de un servidor) sin bloquear tu aplicación.
Fetch API: permite hacer peticiones HTTP para obtener datos de APIs externas. Es la puerta de entrada al desarrollo web moderno.
Módulos (import/export): organiza tu código en archivos separados y reutilizables. Esencial para cualquier proyecto real.
Manejo de errores (try/catch): aprende a capturar y manejar errores para que tu aplicación no se rompa cuando algo falla.
LocalStorage: guarda datos en el navegador del usuario para que persistan entre sesiones.
Frameworks y bibliotecas: una vez que domines JavaScript puro (vanilla), explora React, Vue o Svelte para construir aplicaciones más complejas.
Node.js: lleva JavaScript al servidor. Aprende a construir APIs REST, conectar bases de datos y manejar autenticación.
TypeScript: un superset de JavaScript que agrega tipos estáticos. Cada vez más adoptado en proyectos profesionales.

Preguntas frecuentes (FAQ)

¿JavaScript y Java son lo mismo?

No. A pesar del nombre similar, son lenguajes completamente diferentes. JavaScript fue nombrado así por razones de marketing en los años 90, cuando Java era muy popular. Java se usa principalmente en aplicaciones empresariales y Android, mientras que JavaScript domina la web. No comparten sintaxis, ecosistema ni propósito.

¿Necesito saber HTML y CSS antes de aprender JavaScript?

Es recomendable tener al menos una base de HTML y CSS, ya que JavaScript interactúa directamente con ellos en el navegador. No necesitas ser experto, pero sí entender la estructura básica de una página web (etiquetas, atributos, selectores CSS). Puedes aprender los tres en paralelo.

¿Cuánto tiempo toma aprender JavaScript?

Los fundamentos (lo que cubre este tutorial) puedes aprenderlos en unas pocas semanas practicando de forma constante. Sentirte cómodo construyendo proyectos reales toma entre 3 y 6 meses. Como todo lenguaje, siempre hay cosas nuevas que aprender, pero la curva inicial es accesible si practicas con proyectos.

¿Puedo aprender JavaScript sin saber inglés?

Puedes aprender los conceptos en español (como con este tutorial), pero el inglés te abrirá muchas más puertas. La documentación oficial, los mensajes de error, Stack Overflow y la mayoría de recursos están en inglés. Te recomendamos aprender vocabulario técnico básico en inglés mientras avanzas.

¿Qué editor de código debo usar?

Visual Studio Code (VS Code) es la opción más popular y recomendada. Es gratuito, tiene extensiones para JavaScript (como ESLint y Prettier), terminal integrada y excelente autocompletado. Otras opciones válidas son Sublime Text, WebStorm (de pago) o editores en línea como CodePen y StackBlitz para practicar rápido.

Referencias

MDN Web Docs — Guía de JavaScript: la referencia más completa y confiable. Disponible en español.
JavaScript.info — The Modern JavaScript Tutorial: tutorial moderno y detallado, excelente para profundizar (en inglés).
Node.js — Sitio oficial: documentación y descargas para ejecutar JavaScript del lado del servidor.
React — Documentación en español: para cuando estés listo para tu primer framework.

JavaScript sigue siendo el lenguaje esencial de la web en 2026, y aprenderlo te abre las puertas a frontend, backend, aplicaciones móviles e incluso inteligencia artificial. Lo más importante es practicar: toma cada ejemplo de esta guía, modifícalo, rómpelo y arréglalo. Así es como se aprende de verdad.

Si te gustó esta guía, únete a nuestro canal @programacion en Telegram donde publicamos artículos de tecnología, tutoriales y las noticias tech más relevantes todos los días.