Modern JS (ES6+): The Essentials

const nome = "João"

let idade = 25

var antigo = "evitar"

typeof "texto"

typeof 42

typeof true

typeof null

typeof undefined

typeof Symbol()

typeof 42n

Number("123")

String(123)

Boolean(1)

parseInt("42px")

parseFloat("3.14")

const arr = [1, 2, 3]

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

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

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

arr.push(4)

arr.pop()

arr.unshift(0)

arr.shift()

arr.slice(1, 3)

arr.splice(1, 2)

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

arr.map(item => item * 2)

arr.filter(item => item > 2)

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

arr.find(item => item > 2)

arr.findIndex(item => item > 2)

arr.some(item => item > 2)

arr.every(item => item > 0)

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

const obj = new Object()

const obj = Object.create(null)

obj.nome

obj["nome"]

obj.chaveDinamica

delete obj.idade

Object.keys(obj)

Object.values(obj)

Object.entries(obj)

Object.assign({}, obj1, obj2)

{ ...obj1, ...obj2 }

Object.freeze(obj)

Object.seal(obj)

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

metodo() { return "oi" }

get prop() { return this._prop }

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

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

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

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

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

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

soma(...nums)

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

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

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

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

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

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

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

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

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

Promise.race([p1, p2])

Promise.allSettled([p1, p2])

Promise.any([p1, p2])

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

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

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

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

const [x = 0] = []

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

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

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

const { nome, ...resto } = obj

const { usuario: { nome } } = data

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

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

const copia = { ...original }

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

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

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

const multiline = `Linha 1
Linha 2`

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

export default function() {}

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

import utils from './utils.js'

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

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

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

const id = Symbol('id')

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

document.getElementById('meu-id')

document.querySelector('.classe')

document.querySelectorAll('div')

document.getElementsByClassName('classe')

document.getElementsByTagName('p')

element.textContent = "Texto"

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

element.value = "valor"

element.getAttribute('data-id')

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

element.style.color = 'red'

element.classList.add('ativa')

element.classList.remove('ativa')

element.classList.toggle('ativa')

element.classList.contains('ativa')

const div = document.createElement('div')

document.body.appendChild(div)

element.remove()

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

element.removeEventListener('click', handler)

console.log('mensagem')

console.error('erro')

console.warn('aviso')

console.info('info')

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

console.group('grupo')

console.groupEnd()

console.time('timer')

console.timeEnd('timer')

function debugar() { debugger }

performance.now()

performance.mark('start')

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