JS Moderno (ES6+): Lo Esencial

Declara una constante inmutable con valor "João". No puede ser reasignada después de la declaración y debe ser inicializada en el mismo momento.

const nome = "João"

Declara una variable con ámbito de bloque (scope). Puede ser reasignada y su valor puede ser cambiado durante la ejecución del programa.

let idade = 25

Declara una variable con ámbito de función. Debido a comportamientos inesperados de hoisting, generalmente se recomienda evitar su uso en favor de `let` o `const`.

var antigo = "evitar"

Devuelve una cadena indicando el tipo de dato del operando. Para strings, devuelve "string".

typeof "texto"

Devuelve la cadena "number", indicando que el operando es un número entero o de punto flotante.

typeof 42

Devuelve la string "boolean", indicando un valor verdadero (truthy) o falso (falsy).

typeof true

Devuelve la string "object". Este es un bug histórico en la especificación del lenguaje JavaScript que persiste por compatibilidad.

typeof null

Devuelve la string "undefined", indicando que una variable fue declarada pero no recibió valor.

typeof undefined

Devuelve la string "symbol". Crea un identificador único e inmutable, frecuentemente usado para propiedades de objeto.

typeof Symbol()

Devuelve la string "bigint". Permite representar números enteros de precisión arbitraria.

typeof 42n

Convierte una string que contiene un número al tipo primitivo number (Float). Si falla, devuelve NaN.

Number("123")

Convierte cualquier valor al tipo primitivo string.

String(123)

Convierte un valor al tipo primitivo booleano. Valores truthy (como 1) se convierten en true.

Boolean(1)

Lee la cadena y devuelve el primer entero encontrado hasta el primer carácter no numérico.

parseInt("42px")

Lee la cadena y devuelve el primer número decimal encontrado hasta el final de la cadena.

parseFloat("3.14")

Crea una nueva instancia de array con los elementos proporcionados como argumentos.

const arr = [1, 2, 3]

Crea un nuevo array usando la función constructora. Funciona de forma similar al literal.

const arr = new Array(1, 2, 3)

Crea un nuevo array con elementos pasados como argumentos, incluso si hay solo un argumento numérico.

const arr = Array.of(1, 2, 3)

Crea un array con tamaño 5 y rellena todas las posiciones con el valor 0.

const arr = Array(5).fill(0)

Añade uno o más elementos al final del array y devuelve el nuevo tamaño del array.

arr.push(4)

Elimina el último elemento de un array y devuelve ese elemento.

arr.pop()

Añade uno o más elementos al inicio del array y devuelve el nuevo tamaño.

arr.unshift(0)

Elimina el primer elemento de un array y devuelve ese elemento.

arr.shift()

Devuelve una copia de una parte de un array a un nuevo array, sin modificar el original. El índice final es exclusivo.

arr.slice(1, 3)

Alterar el contenido de un array añadiendo nuevos elementos, eliminando elementos existentes, o ambos, sin crear un nuevo array.

arr.splice(1, 2)

Ejecuta una función proporcionada una vez para cada elemento del array.

arr.forEach(item => console.log(item))

Crea un nuevo array rellenado con los resultados de la llamada a una función proporcionada en cada elemento.

arr.map(item => item * 2)

Crea un nuevo array con todos los elementos que pasan la prueba implementada por la función proporcionada.

arr.filter(item => item > 2)

Ejecuta una función de reducción en cada elemento del array, resultando en un único valor de retorno.

arr.reduce((acc, item) => acc + item, 0)

Devuelve el valor del primer elemento en el array que satisface la función de prueba proporcionada.

arr.find(item => item > 2)

Devuelve el índice del primer elemento en el array que satisface la función de prueba proporcionada.

arr.findIndex(item => item > 2)

Devuelve true si al menos un elemento en el array satisface la condición de la función de prueba pasada.

arr.some(item => item > 2)

Devuelve true si todos los elementos en el array satisfacen la condición de la función de prueba pasada.

arr.every(item => item > 0)

Crea un nuevo objeto que contiene pares clave-valor.

const obj = { nome: "João", idade: 25 }

Crea un nuevo objeto usando la función constructora global Object.

const obj = new Object()

Crea un nuevo objeto con null como prototipo (no heredará propiedades de Object.prototype).

const obj = Object.create(null)

Accede a la propiedad "nombre" del objeto obj.

obj.nome

Accede a la propiedad "nombre" del objeto obj usando una cadena como clave.

obj["nome"]

Accede a una propiedad donde el nombre de la clave se almacena en una variable.

obj.chaveDinamica

Elimina una propiedad de un objeto y devuelve true si la propiedad existía y fue eliminada.

delete obj.idade

Devuelve un array que contiene las propiedades enumerables propias de un objeto, en el mismo orden en que un bucle for...in las recorre.

Object.keys(obj)

Devuelve un array que contiene todos los valores de las propiedades propias enumerables de un objeto.

Object.values(obj)

Devuelve un array de pares [clave, valor] para cada propiedad enumerable propia de un objeto.

Object.entries(obj)

Copia todas las propiedades enumerables de uno o más objetos de origen a un objeto de destino.

Object.assign({}, obj1, obj2)

Permite que un objeto sea expandido en un conjunto de argumentos.

{ ...obj1, ...obj2 }

Impide que se añadan nuevas propiedades, se eliminen las existentes o que las propiedades existentes puedan ser alteradas.

Object.freeze(obj)

Impide la adición de nuevas propiedades y la eliminación de propiedades existentes, pero permite la modificación de valores de propiedades existentes.

Object.seal(obj)

Permite definir el nombre de la propiedad dinámicamente usando una expresión.

const obj = { [chave]: "valor" }

Permite omitir la palabra clave "function" y la palabra clave "function" en el retorno al definir un método dentro de un objeto.

metodo() { return "oi" }

Define un método que devuelve automáticamente una propiedad cuando se accede a ella.

get prop() { return this._prop }

Define un método que recibe un valor cuando la propiedad es definida, permitiendo manipulación de datos antes de la asignación.

set prop(val) { this._prop = val }

Declara una función nombrada que puede ser llamada por su nombre. Es "hoisted" (elevada) en el ámbito global.

function soma(a, b) { return a + b }

Define una función y la asigna a una variable. No es "hoisted" y solo está disponible después de la línea de declaración.

const soma = function(a, b) { return a + b }

Define una función anónima con sintaxis más corta. No posee su propio `this`, `arguments`, `super` o `new.target`.

const soma = (a, b) => a + b

Usa paréntesis alrededor de la flecha para devolver un objeto literal, ya que las llaves {} se interpretan como el cuerpo de la función.

const soma = (a, b) => ({ resultado: a + b })

Permite representar una cantidad indefinida de argumentos como un array.

function soma(...numeros) { return numeros.reduce((a, b) => a + b, 0) }

Expande un array en una lista de argumentos individuales para ser pasado a una función.

soma(...nums)

Define un valor predeterminado para un parámetro de función que se usará si el argumento no se proporciona.

function saudar(nome = "Visitante") { return `Olá, ${nome}!` }

Transforma una función que acepta múltiples argumentos en una serie de funciones que aceptan un único argumento.

const multiplicar = fator => num => num * fator

Función que recibe otra función como argumento o devuelve una función.

const aplicar = (fn, valor) => fn(valor)

Crea una Promise que será resuelta o rechazada en algún momento en el futuro.

const promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Sucesso!"), 1000) })

Registra una función de callback para ser ejecutada cuando la Promise sea resuelta con un valor.

promise.then(result => console.log(result))

Registra una función de callback para ser ejecutada cuando la Promise sea rechazada con un motivo.

promise.catch(error => console.error(error))

Registra una función de callback a ejecutar cuando la Promise se complete (ya sea resuelta o rechazada).

promise.finally(() => console.log("Finalizado"))

Declara una función que puede contener expresiones await que pausan la ejecución hasta que la Promise sea resuelta.

async function buscarDados() { try { const response = await fetch("/api/dados") ... } }

Devuelve una Promise que se resuelve cuando todas las promises en el iterable se resuelven.

Promise.all([p1, p2, p3])

Devuelve una Promise que se resuelve o rechaza tan pronto como una de las promises en el iterable se resuelva o rechace.

Promise.race([p1, p2])

Devuelve una Promise que se resuelve cuando todas las promises proporcionadas se completan (ya sean resueltas o rechazadas).

Promise.allSettled([p1, p2])

Devuelve una Promise que se resuelve tan pronto como una de las promises en el iterable se resuelva.

Promise.any([p1, p2])

Interfaz Web para iniciar solicitudes HTTP asíncronas.

fetch('/api/users').then(res => res.json())

Extrae valores de arrays y los asigna a variables correspondientes.

const [a, b, c] = [1, 2, 3]

Captura el primer valor en una variable y el resto en un nuevo array.

const [primeiro, ...resto] = [1, 2, 3, 4]

Ignora valores deseados en la posición inicial de la desestructuración.

const [, , terceiro] = [1, 2, 3]

Define un valor predeterminado para una variable si el valor correspondiente en el array es undefined.

const [x = 0] = []

Extrae propiedades de objetos y asigna a variables con nombres iguales o diferentes.

const { nome, idade } = { nome: "João", idade: 25 }

Permite que la variable de destino tenga un nombre diferente de la propiedad del objeto.

const { nome: userName, idade: age } = obj

Define un valor predeterminado para una propiedad si el objeto no tiene la propiedad o el valor es undefined.

const { nome = "Anônimo" } = {}

Captura todas las propiedades restantes del objeto en una nueva variable.

const { nome, ...resto } = obj

Permite extraer valores de objetos dentro de otros objetos.

const { usuario: { nome } } = data

Permite crear una copia de un array o añadir nuevos elementos.

const arr2 = [...arr1, 3, 4]

Crea una copia de un objeto y permite sobrescribir propiedades.

const obj2 = { ...obj1, c: 3 }

Crea una nueva instancia de objeto con propiedades idénticas.

const copia = { ...original }

Crea un nuevo objeto con propiedades de ambos, donde las propiedades de obj2 sobrescriben las de obj1.

const merged = { ...obj1, ...obj2 }

Permite extraer propiedades directamente de los argumentos de la función.

function processar({ nome, idade }) { ... }

Permite cadenas de texto multilínea e interpolación de expresiones usando la tilde grave (`) en lugar de comillas.

const mensagem = `Olá, ${nome}!`

Permite crear cadenas de texto que abarcan múltiples líneas sin necesidad de caracteres de escape de nueva línea.

const multiline = `Linha 1Linha 2`

Exporta una función específica para ser importada por nombre en otro módulo.

const soma = (a, b) => a + b

Exporta una función predeterminada para un módulo, que puede ser importada con cualquier nombre.

export default function() {}

Importa una función específica exportada por nombre de un módulo.

import { soma } from './utils.js'

Importa el valor predeterminado exportado de un módulo.

import utils from './utils.js'

Importa todo el contenido de un módulo como un único objeto con propiedades.

import * as utils from './utils.js'

Define una clase para crear objetos con propiedades y métodos.

class Pessoa { constructor(nome) { this.nome = nome } }

Permite crear una nueva clase que hereda propiedades y métodos de una clase padre.

class Funcionario extends Pessoa { constructor(nome, cargo) { super(nome); ... } }

Crea un valor primitivo simbólico y único, que generalmente sirve como clave de propiedad.

const id = Symbol('id')

Permite iterar sobre datos que implementan el protocolo iterador.

for (const val of obj) console.log(val)

Devuelve el elemento que corresponde al ID proporcionado en la página.

document.getElementById('meu-id')

Devuelve el primer elemento dentro del documento que coincide con el selector CSS especificado.

document.querySelector('.classe')

Devuelve una NodeList estática con todos los elementos que coinciden con el selector CSS.

document.querySelectorAll('div')

Devuelve una HTMLCollection de elementos con la clase proporcionada.

document.getElementsByClassName('classe')

Devuelve una HTMLCollection de elementos con la etiqueta proporcionada.

document.getElementsByTagName('p')

Define el texto contenido en el nodo. Escapa caracteres HTML para evitar inyección de script.

element.textContent = "Texto"

Define el HTML interno del elemento. No escapa caracteres, permitiendo HTML válido.

element.innerHTML = "<strong>HTML</strong>"

Define el valor de un elemento de formulario (input, select, textarea).

element.value = "valor"

Devuelve el valor de un atributo HTML especificado.

element.getAttribute('data-id')

Define el valor de un atributo HTML especificado.

element.setAttribute('data-id', '123')

Define el estilo CSS directamente en el elemento como propiedad de estilo.

element.style.color = 'red'

Añade una o más clases CSS al elemento especificado.

element.classList.add('ativa')

Elimina una o más clases CSS del elemento especificado.

element.classList.remove('ativa')

Añade la clase si no existe, o la elimina si existe.

element.classList.toggle('ativa')

Devuelve true si el elemento posee la clase especificada.

element.classList.contains('ativa')

Crea un nuevo elemento HTML con la etiqueta especificada.

const div = document.createElement('div')

Añade un nodo como el último hijo del elemento padre.

document.body.appendChild(div)

Elimina el elemento del DOM.

element.remove()

Registra una función de callback para ser ejecutada cada vez que ocurra el evento.

element.addEventListener('click', (e) => { ... })

Remueve un listener de evento registrado anteriormente.

element.removeEventListener('click', handler)

Registra un mensaje en la consola de depuración.

console.log('mensagem')

Registra un mensaje de error en la consola con un icono rojo.

console.error('erro')

Registra una advertencia en la consola con un icono amarillo.

console.warn('aviso')

Registra un mensaje informativo en la consola con icono azul.

console.info('info')

Muestra una tabla tabular de datos en la consola para una visualización fácil.

console.table([{a:1}, {a:2}])

Inicia un grupo de logs en la consola para organización visual.

console.group('grupo')

Cierra el grupo de logs iniciado anteriormente.

console.groupEnd()

Inicia un temporizador en la consola. El tiempo transcurrido se calcula desde la llamada hasta `timeEnd`.

console.time('timer')

Detiene el temporizador e imprime el tiempo transcurrido en la consola.

console.timeEnd('timer')

Pausa la ejecución del script y abre las herramientas de desarrollador del navegador.

function debugar() { debugger }

Devuelve un valor de timestamp de alta precisión (en milisegundos) desde la época.

performance.now()

Crea una marca de tiempo de alto nivel en la línea de tiempo de rendimiento.

performance.mark('start')

Crea una medición entre dos marcas de tiempo.

performance.measure('diff', 'start', 'end')