Secciones
Tipos de Datos
| Tipo | Ejemplo | typeof |
|---|---|---|
| Number | const n = 42; | "number" |
| String | const s = "hola"; | "string" |
| Boolean | const b = true; | "boolean" |
| Array | const a = [1,2,3]; | "object" |
| Object | const o = {x:1}; | "object" |
| undefined | una variable declarada pero sin valor asignado | "undefined" |
| null | const x = null; | "object" |
Variables: let, const, var
| Palabra clave | Se puede reasignar | Cuándo usarla |
|---|---|---|
| const | No | Opción por defecto — para todo lo que no vaya a cambiar |
| let | Sí | Cuando el valor de la variable definitivamente va a cambiar |
| var | Sí | Opción obsoleta, no se usa en código nuevo |
Operadores de Comparación
| Operador | Significado |
|---|---|
=== | Igualdad estricta (compara valor y tipo) |
!== | Desigualdad estricta |
== | Igualdad no estricta (con conversión de tipos, mejor evitarlo) |
> >= < <= | Mayor que, mayor o igual, menor que, menor o igual |
&& | Y lógico (ambas condiciones verdaderas) |
|| | O lógico (al menos una condición verdadera) |
! | NO lógico (invierte el valor) |
Métodos de Arrays
| Método | Qué hace | Ejemplo |
|---|---|---|
| push() | Añade un elemento al final | arr.push(5) |
| pop() | Elimina y devuelve el último elemento | arr.pop() |
| shift() | Elimina y devuelve el primer elemento | arr.shift() |
| unshift() | Añade un elemento al principio | arr.unshift(0) |
| map() | Crea un nuevo array aplicando una función a cada elemento | arr.map(x => x * 2) |
| filter() | Crea un nuevo array solo con los elementos que coinciden | arr.filter(x => x > 5) |
| forEach() | Recorre cada elemento, no devuelve nada | arr.forEach(x => console.log(x)) |
| find() | Devuelve el primer elemento que coincide | arr.find(x => x > 5) |
| includes() | Verifica si un valor existe en el array | arr.includes(5) |
| slice() | Devuelve parte de un array sin cambiar el original | arr.slice(1, 3) |
| splice() | Elimina/añade elementos, cambiando el original | arr.splice(1, 2) |
| join() | Une un array en un string con un separador | arr.join(", ") |
| reduce() | Reduce un array a un solo valor (como una suma) | arr.reduce((s,x)=>s+x, 0) |
Métodos de Strings
| Método / propiedad | Qué hace | Ejemplo |
|---|---|---|
| length | Longitud del string | "hola".length → 4 |
| toUpperCase() | Convierte a mayúsculas | "hi".toUpperCase() → "HI" |
| toLowerCase() | Convierte a minúsculas | "HI".toLowerCase() → "hi" |
| slice() | Devuelve parte de un string | "hola".slice(0,2) → "ho" |
| split() | Divide un string en un array según un separador | "a,b".split(",") → ["a","b"] |
| includes() | Verifica si un string contiene un substring | "hola".includes("ol") → true |
| trim() | Elimina espacios en blanco en los extremos | " hi ".trim() → "hi" |
| replace() | Reemplaza parte de un string | "hi".replace("h","H") → "Hi" |
Condicionales y Bucles
| Estructura | Sintaxis |
|---|---|
| if / else | if (x > 5) { ... } else { ... } |
| if / else if / else | if (x>90){...} else if (x>70){...} else {...} |
| switch | switch (x) { case 1: ...; break; default: ...; } |
| for | for (let i = 0; i < 10; i++) { ... } |
| while | while (condición) { ... } |
Funciones
| Tipo | Sintaxis |
|---|---|
| Función normal | function suma(a, b) { return a + b; } |
| Expresión de función | const suma = function(a, b) { return a + b; }; |
| Función flecha | const suma = (a, b) => a + b; |
| Llamar a la función | suma(2, 3); // 5 |
Bases del DOM
| Método / propiedad | Qué hace |
|---|---|
| document.querySelector() | Encuentra el primer elemento que coincide con un selector CSS |
| document.querySelectorAll() | Encuentra todos los elementos que coinciden con un selector CSS |
| element.innerHTML | Lee o establece el contenido HTML de un elemento |
| element.textContent | Lee o establece el texto dentro de un elemento |
| element.addEventListener() | Asigna un manejador de eventos (clic, entrada, etc.) |
| element.classList.add() / remove() / toggle() | Gestiona las clases CSS de un elemento |
| element.value | El valor de un campo de entrada (input, select) |
| element.style | Control directo de los estilos CSS de un elemento |
Qué sigue
¿Quieres ir más a fondo?
Todos estos temas se explican en detalle en el curso gratis de JavaScript, con ejercicios prácticos después de cada lección.