JS JavaScript Moderno • Nivel Principiante-Avanzado

Domina JavaScript: De Cero a Experto

Aprende JavaScript moderno con ejercicios prácticos interactivos. Sin descargar nada, todo se completa aquí mismo. ¡Empieza a programar hoy!

Tu Progreso en el Curso 0% Completado

Lo que Aprenderás

Desde variables y funciones hasta programación asíncrona y manipulación del DOM. Todo con ejercicios prácticos que puedes completar directamente aquí.

Módulo 1: Variables y Tipos de Datos

Aprende a declarar variables con let, const y var. Entiende los diferentes tipos de datos en JavaScript.

Conceptos Clave:

let: Variable que puede cambiar
const: Constante que no puede reasignarse
Tipos: string, number, boolean, null, undefined

Ejemplo de Variables


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

Ejercicio Práctico 1.1

Declara una constante llamada PI con el valor 3.1416:

Módulo 2: Funciones Modernas

Domina las funciones tradicionales y las arrow functions. Aprende sobre parámetros, retornos y scope.

Tipos de Funciones:

Función tradicional: function nombre() {}
Arrow function: () => {}
Parámetros por defecto: function(a = 1) {}

Arrow Functions


// Función tradicional
function saludar(nombre) {
  return "Hola " + nombre;
}

// Arrow function
const despedir = (nombre) => {
  return "Adiós " + nombre;
};

// Arrow function simplificada
const sumar = (a, b) => a + b;

Ejercicio Práctico 2.1

Crea una arrow function llamada cuadrado que reciba un número y retorne su cuadrado:

Módulo 3: Arrays y Métodos

Trabaja con arrays y domina los métodos más útiles: map, filter, reduce, forEach y más.

Métodos Esenciales:

map(): Transforma cada elemento
filter(): Filtra elementos
reduce(): Reduce a un valor
forEach(): Itera sin retornar

Métodos de Array


const numeros = [1, 2, 3, 4, 5];

// map: duplicar números
const duplicados = numeros.map(n => n * 2);
// Resultado: [2, 4, 6, 8, 10]

// filter: solo pares
const pares = numeros.filter(n => n % 2 === 0);
// Resultado: [2, 4]

// reduce: sumar todos
const suma = numeros.reduce((acc, n) => acc + n, 0);
// Resultado: 15

Ejercicio Práctico 3.1

Dado el array [10, 20, 30], usa map para multiplicar cada elemento por 2:

Módulo 4: Objetos y Destructuring

Aprende a crear objetos, acceder a propiedades y usar destructuring para extraer datos fácilmente.

Conceptos Avanzados:

Objetos literales: { clave: valor }
Destructuring: const { nombre } = persona
Spread operator: { ...obj }

Objetos y Destructuring


const persona = {
  nombre: "Carlos",
  edad: 30,
  ciudad: "Madrid"
};

// Destructuring
const { nombre, edad } = persona;
console.log(nombre); // "Carlos"

// Spread operator
const copia = { ...persona, pais: "España" };

Ejercicio Práctico 4.1

Extrae la propiedad nombre del objeto usuario usando destructuring:

Módulo 5: Async/Await y Promesas

Domina la programación asíncrona con promesas y async/await. Aprende a manejar operaciones que toman tiempo.

Programación Asíncrona:

Promesas: .then() y .catch()
Async/await: Código asíncrono sincrónico
Fetch API: Peticiones HTTP

Async/Await


// Con promesas
fetch('https://api.ejemplo.com/datos')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Con async/await
async function obtenerDatos() {
  try {
    const response = await fetch('https://api.ejemplo.com/datos');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Ejercicio Práctico 5.1

Completa la función async para esperar la respuesta del fetch:

WebForge

Buscar este blog

JavaScript Moderno