Tutorial JavaScript para principiantes: qué es, para qué sirve y cómo empezar a aprenderlo

Si empiezas a interesarte por desarrollo web, tarde o temprano aparecen tres nombres constantemente:

HTML, CSS y JavaScript.

HTML estructura el contenido.

CSS controla buena parte de su presentación.

Y JavaScript permite añadir comportamiento y lógica.

Gracias a JavaScript podemos hacer que una página reaccione cuando pulsamos un botón, validar formularios, cargar información sin recargar toda la página, crear menús interactivos, desarrollar aplicaciones completas e incluso comunicarnos con servicios externos mediante APIs.

Pero cuando empiezas puede resultar confuso porque JavaScript aparece prácticamente en todas partes.

En este post voy a intentar explicar qué es JavaScript desde cero, para qué se utiliza y qué aprendería primero si empezara hoy.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación ampliamente utilizado en desarrollo web.

Originalmente está muy ligado al navegador, donde permite ejecutar código directamente en la página que está visitando el usuario.

Imaginemos una web sencilla.

HTML puede contener:

<button id="boton">Haz clic</button>

















JavaScript puede hacer que ocurra algo cuando pulsamos ese botón:
document.getElementById("boton").addEventListener("click", function () {
    alert("Hola desde JavaScript");
});

















El navegador detecta el clic y ejecuta la función.
Ahí ya tenemos interacción.
HTML, CSS y JavaScript: ¿qué hace cada uno?
Una forma sencilla de entenderlo sería imaginar una casa.
HTML sería la estructura: paredes, habitaciones, puertas y ventanas.
CSS determinaría su apariencia: colores, tamaños, espacios y distribución visual.
JavaScript añadiría comportamiento: encender luces, abrir automáticamente una puerta o reaccionar a determinadas acciones.
La comparación no es perfecta, pero sirve para separar los tres conceptos.
Una web puede funcionar sin JavaScript.
Pero muchas de las páginas y aplicaciones que utilizamos actualmente dependen bastante de él.
¿Para qué sirve JavaScript?
JavaScript puede utilizarse para algo tan pequeño como ocultar un elemento al pulsar un botón o para construir aplicaciones web extremadamente complejas.
Por ejemplo, podemos utilizarlo para gestionar formularios, actualizar partes de una página, crear filtros, trabajar con mapas, mostrar notificaciones, generar interfaces interactivas, comunicarnos con servidores, consumir APIs, desarrollar videojuegos sencillos o construir aplicaciones completas.
Una de sus principales ventajas es precisamente que forma parte del ecosistema natural del navegador.
Tu primer código JavaScript
Un ejemplo clásico sería:
console.log("Hola mundo");

















Si abrimos las herramientas de desarrollo del navegador y ejecutamos ese código en la consola aparecerá:
Hola mundo
















Parece insignificante, pero la consola es una de las mejores herramientas para empezar.
Podemos probar expresiones, inspeccionar variables y entender qué está ocurriendo sin necesidad de preparar un proyecto complejo.
Variables
Las variables permiten almacenar información.
Por ejemplo:
let nombre = "Laura";
let edad = 30;

console.log(nombre);

















En JavaScript moderno encontraremos principalmente let y const.
Por ejemplo:
const dominio = "dsforo.com";
let visitas = 100;

















Normalmente utilizaría const cuando la referencia no necesita reasignarse y let cuando sí necesitamos cambiar el valor posteriormente.
También existe var, que aparece mucho en código antiguo, pero si empezara hoy me centraría primero en let y const.
Tipos de datos
JavaScript puede trabajar con diferentes tipos de valores.
Por ejemplo:
const nombre = "Ana";
const edad = 29;
const activo = true;
const dato = null;

















Aquí tenemos texto, número, booleano y un valor nulo.
Comprender los tipos resulta importante porque nuestras operaciones dependen del tipo de información con la que estamos trabajando.
Una peculiaridad importante de JavaScript
JavaScript realiza ciertas conversiones automáticas que pueden sorprender bastante cuando empiezas.
Por ejemplo:
console.log("5" + 2);

















Puede producir:
52
















porque estamos mezclando texto y número.
En cambio:
console.log(5 + 2);

















produce:
7
















Este tipo de comportamiento es una de las razones por las que merece la pena entender bien los tipos.
== frente a ===
Este es otro clásico.
JavaScript permite comparar utilizando:
==

















y:
===

















La comparación estricta === tiene en cuenta también el tipo.
Por ejemplo:
5 === "5"

















es falso.
Uno es un número y el otro es una cadena de texto.
Cuando empiezo un proyecto nuevo suelo preferir comparaciones estrictas salvo que exista una razón concreta para hacer lo contrario.
Condicionales
Los programas necesitan tomar decisiones.
Podemos utilizar if:
const edad = 20;

if (edad >= 18) {
    console.log("Es mayor de edad");
}

















También podemos añadir else:
if (edad >= 18) {
    console.log("Puede entrar");
} else {
    console.log("No puede entrar");
}

















A partir de este concepto podemos empezar a construir comportamientos mucho más complejos.
Funciones
Una función agrupa instrucciones que podemos ejecutar cuando las necesitamos.
Por ejemplo:
function saludar(nombre) {
    return "Hola, " + nombre;
}

console.log(saludar("Carlos"));

















El resultado sería:
Hola, Carlos
















Esto nos permite reutilizar lógica sin escribir continuamente las mismas instrucciones.
Arrow functions
También encontraremos constantemente funciones escritas así:
const saludar = (nombre) => {
    return "Hola, " + nombre;
};

















O incluso:
const saludar = nombre => "Hola, " + nombre;

















Son las conocidas como arrow functions.
No intentaría aprender todas las formas posibles de escribir funciones el primer día.
Primero entendería perfectamente qué es una función, qué recibe y qué devuelve.
Arrays
Los arrays permiten almacenar colecciones.
Por ejemplo:
const lenguajes = [
    "JavaScript",
    "PHP",
    "Python"
];

















Podemos acceder al primer elemento:
console.log(lenguajes[0]);

















Resultado:
JavaScript
















Una cosa importante para principiantes es recordar que los índices empiezan normalmente en cero.
Recorrer un array
Podemos recorrer los elementos de diferentes formas.
Un ejemplo sencillo:
const dominios = ["web1.com", "web2.com", "web3.com"];

dominios.forEach(function (dominio) {
    console.log(dominio);
});

















Esto ejecutará una operación para cada elemento.
En aplicaciones reales trabajamos constantemente con colecciones de usuarios, productos, mensajes, resultados o cualquier otro tipo de dato.
Objetos
Los objetos nos permiten representar información utilizando propiedades.
Por ejemplo:
const usuario = {
    nombre: "Laura",
    edad: 28,
    activo: true
};

















Podemos consultar:
console.log(usuario.nombre);

















y obtendremos:
Laura
















Arrays y objetos son fundamentales en JavaScript.
Especialmente cuando empezamos a trabajar con APIs y JSON.
¿Qué es el DOM?
Aquí JavaScript empieza a conectarse directamente con una página web.
DOM significa Document Object Model.
El navegador representa el documento HTML mediante una estructura que JavaScript puede consultar y modificar.
Supongamos que tenemos:
<h1 id="titulo">Hola</h1>

















Podemos hacer:
const titulo = document.getElementById("titulo");

titulo.textContent = "Bienvenido";

















El texto de la página cambiará.
No hemos modificado manualmente el archivo HTML.
JavaScript ha actualizado el documento que el navegador está mostrando.
Seleccionar elementos
Existen diferentes métodos.
Por ejemplo:
document.getElementById("titulo");

















o:
document.querySelector(".boton");

















querySelector resulta especialmente cómodo porque permite trabajar con selectores similares a los utilizados en CSS.
Por ejemplo:
document.querySelector("#menu");
document.querySelector(".producto");
document.querySelector("h1");

















Cuando empiezas a manipular el DOM, JavaScript empieza a resultar mucho más tangible.
Eventos
Una página web está llena de eventos.
Por ejemplo:
clic
envío de formulario
tecla pulsada
movimiento del ratón
cambio de un campo
JavaScript puede escuchar esos eventos.
Por ejemplo:
const boton = document.querySelector("#boton");

boton.addEventListener("click", () => {
    console.log("El usuario ha pulsado");
});

















Este concepto es fundamental en interfaces interactivas.
Formularios
Imaginemos un formulario de registro.
Podemos utilizar JavaScript para comprobar determinadas condiciones antes de enviarlo.
Por ejemplo:
const formulario = document.querySelector("#registro");

formulario.addEventListener("submit", event => {
    event.preventDefault();

    console.log("Formulario recibido");
});

















preventDefault() impide en este caso el comportamiento normal mientras ejecutamos nuestra propia lógica.
Pero hay una advertencia muy importante.
La validación de JavaScript no sustituye la validación del servidor
Podemos comprobar en el navegador que un campo parece correcto.
Perfecto.
Eso mejora la experiencia del usuario.
Pero un atacante no tiene obligación de utilizar nuestro formulario.
Puede enviar directamente una petición manipulada al servidor.
Por tanto, cualquier dato importante debe validarse también donde realmente se procesa.
Nunca confiaría exclusivamente en JavaScript del navegador para proteger una aplicación.
JavaScript se ejecuta en el dispositivo del usuario
Esto tiene otra consecuencia importante.
El usuario puede ver buena parte del código JavaScript enviado al navegador.
Puede inspeccionarlo.
Puede modificar su ejecución localmente.
Puede abrir herramientas de desarrollo.
Por eso nunca deberíamos pensar:

Voy a esconder esta contraseña dentro de JavaScript para que nadie la encuentre.

No.
Si enviamos un secreto al navegador, debemos asumir que el usuario puede llegar a verlo.
No pongas API keys privadas en JavaScript público
Este error ocurre muchísimo.
Tenemos una API key.
Creamos:
const API_KEY = "mi-clave-super-secreta";

















y publicamos el archivo.
Ahora la clave está accesible para quien descargue ese JavaScript.
Si una credencial necesita permanecer privada, normalmente debería gestionarse desde un entorno seguro del servidor o mediante la arquitectura de autenticación correspondiente.
Este punto conecta directamente con el artículo que ya tenemos publicado sobre qué es una API y para qué sirve, donde explicamos endpoints, claves, JSON, peticiones y respuestas con más detalle.
¿Qué es fetch?
fetch permite realizar peticiones HTTP desde JavaScript.
Por ejemplo:
fetch("https://api.ejemplo.com/productos")
    .then(respuesta => respuesta.json())
    .then(datos => {
        console.log(datos);
    })
    .catch(error => {
        console.error(error);
    });

















Conceptualmente estamos haciendo:
pedir información → recibir respuesta → convertirla → utilizar los datos
Esta capacidad es una de las razones por las que las aplicaciones web actuales pueden actualizar partes de la interfaz sin recargar completamente la página.
async y await
Cuando empezamos a trabajar con operaciones asíncronas aparecen estas palabras constantemente.
Podríamos escribir un ejemplo parecido así:
async function cargarProductos() {
    const respuesta = await fetch(
        "https://api.ejemplo.com/productos"
    );

    const productos = await respuesta.json();

    console.log(productos);
}

















Para mucha gente esta sintaxis termina siendo más fácil de leer.
Pero antes de memorizarla intentaría comprender qué significa que una operación sea asíncrona.
¿Qué significa asíncrono?
Imaginemos que pedimos información a un servidor.
La respuesta puede tardar.
No queremos bloquear completamente nuestra aplicación mientras esperamos.
JavaScript tiene mecanismos que permiten continuar gestionando otras tareas y procesar el resultado cuando esté disponible.
Este modelo aparece constantemente al trabajar con red, temporizadores y operaciones que no producen una respuesta instantánea.
Promesas
Las promesas representan operaciones cuyo resultado puede estar disponible ahora o posteriormente.
Podemos encontrarnos estados como operación pendiente, completada o rechazada.
No intentaría aprender promesas memorizando definiciones.
Haría ejercicios con fetch, temporizadores y errores.
Cuando ves el flujo funcionando empieza a resultar mucho más fácil comprenderlas.
JavaScript en frontend
Cuando hablamos de frontend nos referimos a la parte de la aplicación que interactúa directamente con el usuario.
JavaScript puede gestionar elementos como navegación, formularios, componentes, dashboards, filtros, editores y muchas otras partes de una interfaz.
Aquí es donde mucha gente empieza con JavaScript.
Pero actualmente el lenguaje puede utilizarse fuera del navegador.
JavaScript en backend
Gracias a entornos como Node.js podemos ejecutar JavaScript en el servidor.
Eso significa que podemos utilizar JavaScript para construir también:
APIs
backends
automatizaciones
herramientas de línea de comandos
procesos de servidor
Por tanto, aprender JavaScript no nos limita exclusivamente al frontend.
¿Qué es Node.js?
Node.js es un entorno que permite ejecutar JavaScript fuera del navegador.
Esto abrió la puerta a utilizar el mismo lenguaje en muchas tareas del lado servidor.
Un desarrollador puede trabajar, por ejemplo, con JavaScript en la interfaz y también en el backend.
Pero JavaScript y Node.js no son exactamente sinónimos.
JavaScript es el lenguaje.
Node.js es un entorno de ejecución.
¿Qué es npm?
Cuando entramos en el ecosistema JavaScript aparecerá rápidamente:
npm
















npm permite gestionar paquetes y dependencias dentro de proyectos JavaScript.
Podemos instalar librerías creadas por terceros y utilizarlas dentro de nuestra aplicación.
Esto resulta extremadamente práctico.
Pero también significa que nuestro proyecto puede terminar dependiendo de mucho código externo.
No instales paquetes sin saber qué estás añadiendo
Una costumbre frecuente cuando empezamos es buscar:

¿Cómo hago X en JavaScript?

y después instalar inmediatamente cinco librerías.
Antes preguntaría:
¿Realmente necesito una dependencia para esto?
También revisaría mantenimiento, documentación, procedencia y necesidad real.
Cada dependencia que añadimos es otra pieza que tendremos que actualizar y mantener.
JavaScript moderno puede hacer muchísimo sin librerías
Los navegadores actuales ofrecen APIs muy potentes.
Para aprender, me parece especialmente útil escribir primero bastante JavaScript vanilla, es decir, JavaScript sin depender inmediatamente de un framework grande.
Así comprendemos mejor lo que ocurre por debajo.
Después podemos apreciar mucho más qué problemas resuelve cada herramienta.
¿Qué es un framework JavaScript?
Cuando investigamos frontend aparecen rápidamente nombres de frameworks y librerías.
La tentación es empezar directamente con uno porque:

Es lo que piden las ofertas.

Puede tener sentido en determinados casos.
Pero si todavía no entendemos variables, funciones, arrays, objetos, DOM, eventos y asincronía, probablemente estaremos aprendiendo simultáneamente JavaScript y las reglas particulares del framework.
Eso complica bastante las cosas.
Aprendería JavaScript antes del framework
No significa que tengamos que convertirnos en expertos absolutos.
Pero sí tendría una base razonable.
Querría ser capaz de crear sin framework una página pequeña que tenga un formulario, modifique elementos del DOM, haga una petición y gestione errores.
Después entraría en frameworks con muchísimo más contexto.
JavaScript y WordPress
Si administras WordPress también encontrarás JavaScript constantemente.
Themes y plugins pueden cargar scripts para implementar funcionalidades.
Por ejemplo, sliders, popups, menús, analítica, formularios, chat, seguimiento y componentes del editor.
Cada script que añadimos también tiene un coste potencial.
Demasiado JavaScript puede afectar al rendimiento
El navegador tiene que descargar, analizar y ejecutar el código.
Una página que carga una cantidad enorme de JavaScript puede generar problemas especialmente en dispositivos menos potentes.
Por eso no mediría únicamente:
¿cuánto pesa el archivo?
También importa cuánto trabajo debe realizar el navegador.
Un script pequeño pero computacionalmente costoso puede generar problemas.
“Lo cargo todo porque está minificado” no es una solución
Minificar puede reducir tamaño.
Pero el navegador sigue necesitando procesar el código que utiliza.
Por eso conviene evitar enviar funcionalidad innecesaria a todas las páginas.
Especialmente cuando tenemos un WordPress donde cada plugin añade sus propios scripts.
Errores JavaScript
Cuando algo deja de funcionar, abriría primero las herramientas del navegador.
La consola puede mostrar errores como:
Uncaught ReferenceError
















o:
TypeError
















El mensaje suele incluir un archivo y una línea.
Es información extremadamente útil.
Antes de modificar diez plugins al azar, miraría qué error aparece realmente.
undefined
Esta palabra aparece muchísimo.
undefined significa, de forma simplificada, que determinado valor no está definido.
Por ejemplo:
const usuario = {
    nombre: "Ana"
};

console.log(usuario.edad);

















Como no existe edad, obtendremos:
undefined
















Cuando intentamos trabajar posteriormente con ese valor como si existiera pueden aparecer errores.
null y undefined no son exactamente lo mismo
Ambos pueden representar ausencia de valor en diferentes situaciones, pero no son idénticos.
undefined aparece normalmente cuando algo no ha recibido un valor definido.
null puede utilizarse explícitamente para representar ausencia intencionada.
Comprender estas diferencias ayuda mucho al depurar.
Scope
El scope determina dónde resulta accesible una variable.
Por ejemplo:
function ejemplo() {
    const mensaje = "Hola";

    console.log(mensaje);
}

















mensaje pertenece al ámbito correspondiente.
Si intentamos utilizar variables fuera del lugar donde existen podemos encontrarnos errores.
Los conceptos de scope empiezan a ser especialmente importantes cuando el código crece.
Cuidado con variables globales
Crear todo como variable global puede parecer cómodo al principio.
Pero diferentes partes del programa pueden terminar modificando la misma información.
Esto hace el código más difícil de mantener y depurar.
Intentaría mantener los datos dentro del ámbito más limitado que tenga sentido.
Objetos y referencias
Aquí aparece algo que puede sorprender.
Imaginemos:
const usuario1 = {
    nombre: "Ana"
};

const usuario2 = usuario1;

usuario2.nombre = "Laura";

console.log(usuario1.nombre);

















El resultado será:
Laura
















No hemos creado necesariamente una copia independiente del objeto.
Ambas variables pueden estar haciendo referencia al mismo objeto.
Entender referencias evita muchísimos errores.
Desestructuración
En JavaScript moderno encontraremos sintaxis como:
const usuario = {
    nombre: "Ana",
    edad: 30
};

const { nombre, edad } = usuario;

















Ahora podemos utilizar directamente:
console.log(nombre);

















Este tipo de sintaxis aparece muchísimo en proyectos actuales.
Al principio puede parecer extraña, pero rápidamente se vuelve bastante natural.
Spread operator
También veremos:
...

















Por ejemplo:
const usuario = {
    nombre: "Ana",
    edad: 30
};

const actualizado = {
    ...usuario,
    edad: 31
};

















Estamos creando un nuevo objeto basándonos en propiedades del anterior y modificando edad.
Este patrón es habitual en aplicaciones modernas.
JavaScript y JSON
JSON se parece visualmente bastante a objetos JavaScript, aunque no son exactamente lo mismo.
Podemos convertir un objeto a JSON:
const usuario = {
    nombre: "Ana",
    activo: true
};

const json = JSON.stringify(usuario);

















Y podemos interpretar JSON:
const usuario = JSON.parse(json);

















Cuando trabajamos con APIs estas conversiones aparecen constantemente.
Local Storage
El navegador ofrece mecanismos para almacenar cierta información localmente.
Uno de ellos es localStorage.
Por ejemplo:
localStorage.setItem("tema", "oscuro");

















Y posteriormente:
const tema = localStorage.getItem("tema");

















Puede resultar útil para preferencias sencillas.
Pero no utilizaría almacenamiento del navegador como lugar mágico donde guardar información sensible.
JavaScript y cookies
JavaScript puede interactuar con determinadas cookies dependiendo de cómo estén configuradas.
Pero el manejo seguro de autenticación y sesiones tiene bastantes implicaciones.
Atributos como HttpOnly, Secure y SameSite pueden desempeñar papeles importantes dependiendo del caso.
Si estamos desarrollando un sistema de login real, estudiaría esta parte específicamente en lugar de improvisar.
XSS
Una vulnerabilidad muy relacionada con aplicaciones web es Cross-Site Scripting.
Puede producirse cuando datos no confiables terminan ejecutándose como código dentro de una página.
Por ejemplo, insertar contenido del usuario de forma insegura en HTML puede crear problemas graves.
No asumiría nunca que porque algo viene de nuestro propio formulario es seguro.
innerHTML merece cuidado
JavaScript permite hacer:
elemento.innerHTML = contenido;

















Es muy cómodo.
Pero si contenido procede de una fuente no confiable podemos terminar interpretando HTML que no queríamos ejecutar.
Dependiendo del caso puede resultar preferible utilizar métodos como:
elemento.textContent = contenido;

















La elección depende de lo que realmente necesitemos hacer.
Seguridad no significa dejar de usar JavaScript
Significa comprender dónde está la frontera de confianza.
Datos del usuario, respuestas externas y parámetros deben tratarse con cuidado.
Y además debemos recordar que el código del navegador no puede sustituir las comprobaciones del backend.
Una aplicación segura necesita pensar en todas las capas.
Herramientas de desarrollo del navegador
Si quieres aprender JavaScript, utilizaría DevTools desde prácticamente el primer día.
Podemos abrir la consola, inspeccionar HTML, revisar peticiones de red, comprobar archivos cargados, medir rendimiento y depurar código.
Aprender estas herramientas proporciona muchísimo valor incluso aunque posteriormente no te dediques profesionalmente a programar.
console.log es útil, pero no es todo
Al principio depuramos así:
console.log(variable);

















y está perfectamente bien.
Pero los navegadores también permiten colocar breakpoints y ejecutar el código paso a paso.
Podemos observar el valor de las variables mientras se ejecuta.
Aprender a utilizar el debugger puede ahorrar horas.
JavaScript y SEO
Aquí aparece una cuestión especialmente interesante para webmasters.
Los buscadores modernos pueden procesar JavaScript en muchos contextos, pero una arquitectura excesivamente dependiente del renderizado del cliente puede introducir complejidad adicional.
Si nuestro proyecto depende del tráfico orgánico, pensaría cuidadosamente cómo se entrega el contenido principal y cómo pueden acceder a él usuarios y rastreadores.
No elegiría una arquitectura únicamente porque sea técnicamente moderna.
JavaScript puede modificar enlaces y contenido
Una aplicación puede generar elementos después de que cargue la página.
Esto puede ser perfectamente válido.
Pero si contenidos o enlaces importantes dependen de flujos muy complejos de JavaScript, debemos probar realmente cómo se comportan.
Para proyectos SEO, conviene comprobar el resultado en herramientas de inspección y no asumir que todo se procesa exactamente como nosotros vemos en nuestro navegador.
Rendimiento y SEO están relacionados
Una cantidad excesiva de JavaScript puede influir en la experiencia del usuario.
Puede aumentar trabajo del hilo principal, retrasar interacciones o provocar problemas en dispositivos modestos.
Por eso optimizar JavaScript no es únicamente una obsesión de desarrolladores.
También puede mejorar la experiencia general de nuestra web.
Si trabajas habitualmente con proyectos online, puedes encontrar más debates técnicos dentro de la sección de JavaScript de DSForo y en el resto del foro para webmasters.
TypeScript
Cuando avances probablemente escucharás también TypeScript.
TypeScript amplía JavaScript añadiendo, entre otras cosas, un sistema de tipos estático.
En proyectos grandes puede ayudar a detectar determinados errores antes de ejecutar el programa y mejorar herramientas de desarrollo.
Pero si alguien nunca ha programado, no empezaría intentando dominar JavaScript y TypeScript simultáneamente.
Primero entendería JavaScript.
¿JavaScript o TypeScript?
No los plantearía como dos lenguajes entre los que debemos elegir para siempre.
TypeScript termina convirtiéndose a JavaScript para ejecutarse en los entornos correspondientes.
Podemos aprender JavaScript y después incorporar TypeScript cuando entendamos qué problemas intenta resolver.
¿JavaScript o PHP?
Tampoco existe una guerra obligatoria.
PHP suele utilizarse especialmente en backend y tiene una presencia enorme en WordPress.
JavaScript es fundamental en el navegador y además puede utilizarse en backend mediante Node.js.
Una web puede utilizar perfectamente:
PHP en servidor + JavaScript en navegador.
De hecho, es una combinación muy habitual.
¿JavaScript o Python?
Depende de qué queremos construir.
Si nuestro objetivo principal es desarrollo frontend, JavaScript es prácticamente inevitable.
Python destaca en otros ecosistemas y también puede utilizarse para desarrollo web.
No escogería lenguaje preguntando únicamente cuál “es mejor”.
Preguntaría:
¿qué quiero crear?
No intentes aprender todos los frameworks
Cuando empiezas aparecen nombres continuamente y surge cierta ansiedad por estar aprendiendo “lo equivocado”.
Mi enfoque sería bastante más sencillo.
Primero aprendería JavaScript suficientemente bien como para comprender código sin depender de copiar tutoriales.
Después elegiría un framework si mi proyecto o trabajo realmente lo necesita.
Un buen primer proyecto
Crearía una pequeña lista de tareas.
Permitiría escribir una tarea, añadirla, marcarla como completada y eliminarla.
Ese proyecto aparentemente sencillo obliga a trabajar con eventos, arrays, objetos, DOM y almacenamiento.
Después podemos mejorarlo guardando los datos en el navegador.
Más adelante podemos conectarlo a una API.
Así un mismo proyecto crece con nuestros conocimientos.
Otro proyecto interesante: buscador de información mediante API
Cuando ya sepamos lo básico podemos consumir una API pública que permita ese uso.
El usuario introduce algo.
Nuestro JavaScript envía una petición.
Recibimos JSON.
Procesamos los datos.
Los mostramos en pantalla.
Con un proyecto así practicamos DOM, formularios, fetch, asincronía, errores y objetos.
Aprende construyendo
Leer documentación es necesario.
Ver tutoriales puede ayudar.
Pero programar se aprende principalmente escribiendo programas.
Si pasamos tres meses viendo vídeos sin construir nada, tendremos una sensación de familiaridad.
Eso no significa que sepamos resolver problemas.
Intentaría mantener una proporción considerable de práctica.
No copies siempre la solución completa
Cuando nos atascamos existe la tentación de pedir:

Dame el código entero.

Y funciona.
Pero podemos perder el aprendizaje.
A veces resulta más útil preguntar:

¿Por qué mi función devuelve undefined?

o:

Explícame qué estoy haciendo mal sin resolverme todo el ejercicio.

Las herramientas de IA pueden funcionar como tutor si las utilizamos de esa manera.
Aprender a leer documentación es una habilidad
No existe desarrollador que recuerde todas las funciones de JavaScript.
Tampoco hace falta.
Lo importante es comprender los conceptos y saber consultar documentación fiable.
Cuando aparece un método que no conocemos podemos investigar:
qué recibe
qué devuelve
qué errores puede producir
en qué entornos funciona
Esta habilidad vale más que memorizar cientos de métodos.
Una ruta razonable para aprender JavaScript
Si empezara desde cero, seguiría este orden general: primero variables, tipos, operadores y condicionales; después funciones, arrays y objetos; luego DOM y eventos; continuaría con formularios, módulos y gestión de errores; después aprendería asincronía, promesas, async/await y fetch; y finalmente construiría varios proyectos completos antes de entrar seriamente en frameworks.
No intentaría memorizarlo todo antes de avanzar.
Volveremos a los mismos conceptos muchas veces.
¿Cuánto se tarda en aprender JavaScript?
No hay una respuesta universal.
Podemos aprender sintaxis básica bastante rápido.
Eso no significa dominar desarrollo web.
La parte difícil no suele ser recordar cómo escribir un if.
Lo complicado es aprender a dividir problemas, diseñar soluciones, detectar errores y mantener código que crece.
Eso requiere práctica.
Saber JavaScript no significa conocer todo su ecosistema
Podemos dominar bastante bien el lenguaje y no conocer una herramienta concreta.
Es normal.
El ecosistema cambia constantemente.
Por eso invertiría mucho tiempo en fundamentos.
Las herramientas cambian.
Los conceptos duran bastante más.
¿JavaScript sigue mereciendo la pena aprenderlo?
Para alguien interesado en desarrollo web, sí.
Es difícil trabajar seriamente con frontend sin terminar encontrándolo.
Además, su ecosistema permite extender esos conocimientos hacia backend, herramientas y automatización.
Pero no lo aprendería solamente porque:

dicen que tiene trabajo.

Intentaría construir cosas reales con él cuanto antes.
Si disfruto resolviendo esos problemas, seguir avanzando tendrá mucho más sentido.
Conclusión
JavaScript es una de las piezas fundamentales del desarrollo web moderno.
Permite convertir documentos relativamente estáticos en interfaces capaces de reaccionar, consultar información, modificar contenido y comunicarse con otros sistemas.
Si estás empezando, no me preocuparía todavía por utilizar el framework más popular.
Aprendería primero muy bien:
variables, funciones, arrays, objetos, DOM, eventos, asincronía y APIs.
Después construiría pequeños proyectos hasta dejar de depender continuamente de tutoriales paso a paso.
Y solamente entonces empezaría a añadir más herramientas.
El objetivo no debería ser poder decir:

Sé JavaScript.

El objetivo debería ser mirar un problema y pensar:

Creo que sé cómo empezar a resolverlo.

¿Estáis aprendiendo JavaScript o ya lo utilizáis habitualmente? ¿Qué fue lo que más os costó al principio: el DOM, las promesas, async/await, los objetos o simplemente entender cómo organizar el código?