javascriptintermediate128 snippets

JS Moderno (ES6+): Lo Esencial

Deja de escribir código legado. Domina Arrow Functions, Async/Await y Destructuring que todo dev senior usa hoy.

Secciones9

🔤 Variables y Tipos

15 snippets

Fundamentos del lenguaje para declaración de almacenamiento y verificación de tipos de datos.

Declaración de Constante

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.

javascript

const nome = "João"

Declaración de Variable (Ámbito de Bloque)

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

javascript

let idade = 25

Declaración Antigua (Ámbito de Función)

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`.

javascript

var antigo = "evitar"

Verificación de Tipo de Dato

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

javascript

typeof "texto"

Verificación de Tipo Numérico

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

javascript

typeof 42

Verificación de Tipo Booleano

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

javascript

typeof true

Verificación de Null (Bug Histórico)

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

javascript

typeof null

Verificación de Undefined

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

javascript

typeof undefined

Verificación de Tipo Symbol

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

javascript

typeof Symbol()

Verificación de Tipo BigInt

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

javascript

typeof 42n

Conversión a Número

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

javascript

Number("123")

Conversión a String

Convierte cualquier valor al tipo primitivo string.

javascript

String(123)

Conversión a Booleano

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

javascript

Boolean(1)

Parseo de Entero (Punto Flotante)

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

javascript

parseInt("42px")

Parseo de Float (Decimal)

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

javascript

parseFloat("3.14")

📋 Arrays y Métodos

18 snippets

Operaciones esenciales para manipulación de listas de datos, incluyendo creación, mutación e iteración.

Declaración de Array Literal

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

javascript

const arr = [1, 2, 3]

Declaración vía Constructor

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

javascript

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

Declaración Estática

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

javascript

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

Array Rellenado con Valor

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

javascript

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

Añadir al Final

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

javascript

arr.push(4)

Remover del Final

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

javascript

arr.pop()

Añadir al Inicio

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

javascript

arr.unshift(0)

Eliminar del Inicio

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

javascript

arr.shift()

Segmento de Array (Copia)

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

javascript

arr.slice(1, 3)

Insertar/Remover (Mutación)

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

javascript

arr.splice(1, 2)

Iteración con Callback

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

javascript

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

Mapeo (Transformación)

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

javascript

arr.map(item => item * 2)

Filtrado

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

javascript

arr.filter(item => item > 2)

Reducción (Reduce)

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

javascript

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

Encontrar Primero

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

javascript

arr.find(item => item > 2)

Encontrar Índice

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

javascript

arr.findIndex(item => item > 2)

Algún Elemento Satisface

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

javascript

arr.some(item => item > 2)

Todos los Elementos Satisfacen

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

javascript

arr.every(item => item > 0)

🏗️ Objetos y Propiedades

18 snippets

Manipulación de estructuras de datos clave-valor, incluyendo propiedades dinámicas y métodos utilitarios.

Declaración de Objeto Literal

Crea un nuevo objeto que contiene pares clave-valor.

javascript

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

Declaración vía Constructor

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

javascript

const obj = new Object()

Objeto Sin Prototipo

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

javascript

const obj = Object.create(null)

Acceso vía Punto

Accede a la propiedad "nombre" del objeto obj.

javascript

obj.nome

Acceso vía Corchetes

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

javascript

obj["nome"]

Acceso vía Variable

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

javascript

obj.chaveDinamica

Eliminar Propiedad

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

javascript

delete obj.idade

Obtener Claves

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

javascript

Object.keys(obj)

Obtener Valores

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

javascript

Object.values(obj)

Obtener Entradas (Clave y Valor)

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

javascript

Object.entries(obj)

Fusionar Objetos

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

javascript

Object.assign({}, obj1, obj2)

Spread Operator (Objeto)

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

javascript

{ ...obj1, ...obj2 }

Congelar Objeto

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

javascript

Object.freeze(obj)

Sellar Objeto

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

javascript

Object.seal(obj)

Propiedad Computada

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

javascript

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

Método Abreviado

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

javascript

metodo() { return "oi" }

Getter

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

javascript

get prop() { return this._prop }

Setter

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

javascript

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

⚡ Funciones Modernas

9 snippets

Técnicas avanzadas de declaración de funciones, incluyendo arrow functions, currying y manipulación de parámetros.

Function Declaration

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

javascript

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

Function Expression

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.

javascript

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

Arrow Function

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

javascript

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

Retorno de Objeto con Arrow

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.

javascript

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

Rest Parameters

Permite representar una cantidad indefinida de argumentos como un array.

javascript

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

Spread Operator (Args)

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

javascript

soma(...nums)

Parámetro Predeterminado

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

javascript

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

Currying

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

javascript

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

Función de Orden Superior

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

javascript

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

⏱️ Programación Asíncrona

10 snippets

Gestión de operaciones no bloqueantes, Promises, Async/Await y Fetch API.

Promise Constructor

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

javascript

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

Tratamiento de Éxito

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

javascript

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

Tratamiento de Error

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

javascript

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

Bloque Finally

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

javascript

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

Función Asíncrona

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

javascript

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

Promise.all

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

javascript

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

Promise.race

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

javascript

Promise.race([p1, p2])

Promise.allSettled

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

javascript

Promise.allSettled([p1, p2])

Promise.any

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

javascript

Promise.any([p1, p2])

Fetch API

Interfaz Web para iniciar solicitudes HTTP asíncronas.

javascript

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

🎯 Destructuring & Spread

14 snippets

Sintaxis elegante para extraer valores de arrays y objetos, y para expandir elementos.

Array Destructuring

Extrae valores de arrays y los asigna a variables correspondientes.

javascript

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

Array Destructuring con Resto

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

javascript

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

Array Destructuring Ignorando

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

javascript

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

Valor Predeterminado

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

javascript

const [x = 0] = []

Object Destructuring

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

javascript

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

Renombrando Propiedad

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

javascript

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

Valor Predeterminado en Objeto

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

javascript

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

Rest Operator en Objeto

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

javascript

const { nome, ...resto } = obj

Destructuring Anidado

Permite extraer valores de objetos dentro de otros objetos.

javascript

const { usuario: { nome } } = data

Spread Operator Array

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

javascript

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

Spread Operator Objeto

Crea una copia de un objeto y permite sobrescribir propiedades.

javascript

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

Copia Superficial (Shallow Copy)

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

javascript

const copia = { ...original }

Fusión de Objetos

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

javascript

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

Destructuring en Parámetros

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

javascript

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

🚀 ES6+ Features

11 snippets

Características de ECMAScript 2015+, incluyendo templates, módulos y clases.

Template Literals

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

javascript

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

Template Multilínea

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

javascript

const multiline = `Linha 1
Linha 2`

Named Export

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

javascript

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

Default Export

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

javascript

export default function() {}

Named Import

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

javascript

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

Default Import

Importa el valor predeterminado exportado de un módulo.

javascript

import utils from './utils.js'

Namespace Import

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

javascript

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

Definición de Clase

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

javascript

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

Herencia de Clase

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

javascript

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

Symbol Único

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

javascript

const id = Symbol('id')

Iterator (For...of)

Permite iterar sobre datos que implementan el protocolo iterador.

javascript

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

🌐 Manipulación DOM

20 snippets

Interacción con la estructura de documentos HTML y CSS.

Seleccionar por ID

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

javascript

document.getElementById('meu-id')

Seleccionar por Selector CSS

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

javascript

document.querySelector('.classe')

Seleccionar Todos

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

javascript

document.querySelectorAll('div')

Seleccionar por Clase

Devuelve una HTMLCollection de elementos con la clase proporcionada.

javascript

document.getElementsByClassName('classe')

Seleccionar por Etiqueta

Devuelve una HTMLCollection de elementos con la etiqueta proporcionada.

javascript

document.getElementsByTagName('p')

Definir Texto Seguro

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

javascript

element.textContent = "Texto"

Definir HTML

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

javascript

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

Definir Valor de Input

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

javascript

element.value = "valor"

Obtener Atributo

Devuelve el valor de un atributo HTML especificado.

javascript

element.getAttribute('data-id')

Definir Atributo

Define el valor de un atributo HTML especificado.

javascript

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

Definir Estilo Inline

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

javascript

element.style.color = 'red'

Añadir Clase

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

javascript

element.classList.add('ativa')

Eliminar Clase

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

javascript

element.classList.remove('ativa')

Alternar Clase

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

javascript

element.classList.toggle('ativa')

Verificar Clase

Devuelve true si el elemento posee la clase especificada.

javascript

element.classList.contains('ativa')

Crear Elemento

Crea un nuevo elemento HTML con la etiqueta especificada.

javascript

const div = document.createElement('div')

Añadir al DOM

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

javascript

document.body.appendChild(div)

Eliminar Elemento

Elimina el elemento del DOM.

javascript

element.remove()

Añadir Evento

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

javascript

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

Remover Evento

Remueve un listener de evento registrado anteriormente.

javascript

element.removeEventListener('click', handler)

🐛 Debugging y Herramientas

13 snippets

Técnicas y métodos de consola para diagnóstico y análisis de rendimiento.

Log Básico

Registra un mensaje en la consola de depuración.

javascript

console.log('mensagem')

Log de Error

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

javascript

console.error('erro')

Log de Advertencia

Registra una advertencia en la consola con un icono amarillo.

javascript

console.warn('aviso')

Log de Información

Registra un mensaje informativo en la consola con icono azul.

javascript

console.info('info')

Tabla de Datos

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

javascript

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

Agrupar Logs

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

javascript

console.group('grupo')

Cerrar Grupo

Cierra el grupo de logs iniciado anteriormente.

javascript

console.groupEnd()

Iniciar Temporizador

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

javascript

console.time('timer')

Finalizar Temporizador

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

javascript

console.timeEnd('timer')

Punto de Interrupción

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

javascript

function debugar() { debugger }

Timestamp Preciso

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

javascript

performance.now()

Marca de Rendimiento

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

javascript

performance.mark('start')

Medir Rendimiento

Crea una medición entre dos marcas de tiempo.

javascript

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

Cheatsheets relacionados

Ver todos los cheatsheets

css235 snippets

Preview

p { color: blue; }

advanced

CSS3: La Guía Visual

No más adivinanzas con display o position. Domina Flexbox, Grid y layouts responsivos visualmente en segundos.

html154 snippets

Preview

<!DOCTYPE html>

advanced

HTML5: Etiquetas Semánticas y SEO

Google odia los <div>. Usa la estructura semántica correcta para posicionar tu sitio en lo más alto sin gastar en anuncios.

Ver todos los cheatsheets