JavaScript
Sintaxis, metodos y APIs del navegador para dar comportamiento a tus paginas, con ejemplos que se ejecutan de verdad.
Sentencias y palabras clave
let
Declara una variable cuyo valor puede reasignarse mas adelante, con alcance de bloque: sol…
const
Declara una variable cuyo valor no puede reasignarse. Si el valor es un objeto o array, su…
var
Forma antigua de declarar variables, con alcance de funcion en vez de bloque. Hoy se prefi…
function
Define un bloque de codigo reutilizable que puede recibir parametros y devolver un valor c…
=>
Sintaxis compacta para escribir funciones, sin su propio this. Muy usada como callback en …
if / else
Ejecuta un bloque de codigo solo si una condicion es verdadera, con un bloque alternativo …
switch
Compara un valor contra varios casos posibles y ejecuta el bloque que coincide, en vez de …
for
Repite un bloque de codigo mientras se cumpla una condicion, controlando explicitamente un…
for...of
Recorre los valores de un elemento iterable, como un array o un string, sin necesidad de m…
for...in
Recorre las claves enumerables de un objeto. Para arrays se prefiere for...of, ya que for.…
while
Repite un bloque de codigo mientras una condicion sea verdadera, sin una estructura fija d…
try / catch
Ejecuta un bloque de codigo y captura cualquier error que ocurra dentro, sin que la ejecuc…
class
Define una plantilla para crear objetos con propiedades y metodos compartidos, usando el c…
Operadores
...
Expande los elementos de un array o de un objeto en otro array, objeto o lista de argument…
{ } / [ ]
Extrae valores de un array o propiedades de un objeto y los asigna directamente a variable…
?.
Accede a una propiedad anidada sin que el programa falle si alguno de los pasos intermedio…
??
Devuelve el valor de la derecha solo si el de la izquierda es null o undefined, a diferenc…
===
Compara valor y tipo sin conversion automatica, a diferencia de == que primero intenta con…
? :
Version compacta de if/else en una sola expresion: condicion ? valorSiVerdadero : valorSiF…
`${ }`
Cadenas de texto delimitadas por comillas invertidas que permiten insertar variables y exp…
typeof
Devuelve una cadena de texto con el tipo de dato de un valor: "string", "number", "boolean…
Metodos de Array
.map()
Crea un nuevo array aplicando una funcion a cada elemento del array original, sin modifica…
.filter()
Crea un nuevo array solo con los elementos que cumplen una condicion, sin modificar el arr…
.reduce()
Reduce todos los elementos de un array a un unico valor, acumulando el resultado en cada p…
.forEach()
Ejecuta una funcion por cada elemento del array. A diferencia de map, no devuelve un array…
.find()
Devuelve el primer elemento del array que cumple una condicion, o undefined si ninguno la …
.includes()
Devuelve true o false segun si el array contiene un valor especifico.
.push() / .pop()
push anade un elemento al final del array y devuelve la nueva longitud. pop quita y devuel…
.shift() / .unshift()
shift quita y devuelve el primer elemento del array. unshift anade uno o mas elementos al …
.slice()
Devuelve una copia parcial del array entre dos indices, sin modificar el original.
.sort()
Ordena los elementos del array en el propio array. Sin una funcion de comparacion, ordena …
.join()
Une todos los elementos de un array en una sola cadena de texto, separados por el caracter…
Metodos de String
.split()
Divide una cadena de texto en un array de subcadenas, usando el separador indicado.
.slice()
Devuelve una parte de la cadena entre dos indices, sin modificar el texto original.
.trim()
Elimina los espacios en blanco al inicio y al final de una cadena de texto, sin afectar lo…
.replace()
Devuelve una nueva cadena con la primera coincidencia reemplazada. Para reemplazar todas l…
.includes()
Devuelve true o false segun si la cadena contiene el texto indicado.
.toUpperCase() / .toLowerCase()
Devuelven una copia de la cadena en mayusculas o en minusculas, sin modificar el texto ori…
.startsWith() / .endsWith()
Devuelven true o false segun si la cadena empieza o termina con el texto indicado.
.repeat()
Devuelve una nueva cadena con el texto original repetido las veces indicadas.
.padStart() / .padEnd()
Rellenan una cadena hasta alcanzar una longitud especifica, agregando caracteres al inicio…
Metodos de Object
Object.keys()
Devuelve un array con los nombres de las propiedades propias de un objeto.
Object.values()
Devuelve un array con los valores de las propiedades propias de un objeto.
Object.entries()
Devuelve un array de pares [clave, valor] a partir de un objeto, util para recorrerlo con …
Object.assign()
Copia las propiedades de uno o mas objetos hacia un objeto destino, util para combinar obj…
Object.freeze()
Impide que se anadan, eliminen o modifiquen propiedades de un objeto. Los intentos de camb…
Utilidades globales
JSON.stringify()
Convierte un valor de JavaScript (objeto, array) en una cadena de texto en formato JSON, u…
JSON.parse()
Convierte una cadena de texto en formato JSON de vuelta a un valor de JavaScript (objeto, …
Math.random()
Devuelve un numero decimal aleatorio entre 0 (incluido) y 1 (no incluido). Se combina con …
Math.min() / Math.max()
Devuelven el menor o el mayor valor entre los argumentos recibidos.
Math.floor() / Math.round()
Math.floor redondea siempre hacia abajo. Math.round redondea al entero mas cercano, segun …
console.log()
Escribe un mensaje en la consola del navegador, la herramienta principal para inspeccionar…
setTimeout()
Ejecuta una funcion una sola vez despues de un tiempo determinado, sin bloquear el resto d…
DOM y eventos
document.querySelector()
Devuelve el primer elemento del documento que coincide con un selector CSS, o null si no e…
document.querySelectorAll()
Devuelve todos los elementos del documento que coinciden con un selector CSS, como una lis…
addEventListener()
Registra una funcion que se ejecuta cuando ocurre un evento especifico sobre un elemento, …
classList
Permite agregar, quitar o alternar clases CSS de un elemento sin manipular directamente el…
innerHTML / textContent
Ambos leen o cambian el contenido de un elemento. textContent trata todo como texto plano;…
document.createElement()
Crea un nuevo elemento HTML en memoria, que luego se puede configurar y agregar al documen…
dataset
Permite leer los atributos data-* de un elemento como propiedades de un objeto, sin necesi…
Asincronia
Ninguna etiqueta coincide con la busqueda.