Recursos JavaScript ES6+ Que Todo Desenvolvedor Deveria Dominar

// const para valores que nunca mudam (a maioria das variáveis)
const URL_API = "https://api.exemplo.com";
const usuarios = []; // O array é const, mas seu conteúdo pode mudar
usuarios.push("Alice"); // ✅ Ok

// let para valores que mudam
let contador = 0;
contador++;

// ❌ Nunca use var — ela tem escopo de função, não de bloco.

// Função tradicional
function somar(a, b) { return a + b; }

// Arrow function
const somar = (a, b) => a + b;

// Parâmetro único — parênteses opcionais
const dobrar = n => n * 2;

// Múltiplas linhas — precisa de chaves e retorno explícito
const processarUsuario = (usuario) => {
  const nome = usuario.nome.trim();
  return { ...usuario, nome };
};

// Ótimo para callbacks
const pares = numeros.filter(n => n % 2 === 0);
const nomes = usuarios.map(u => u.nome);

// Desestruturação de objetos
const { nome, email, nivel = "leitor" } = usuario;

// Renomeando variáveis
const { nome: nomeUsuario, email: emailUsuario } = usuario;

// Desestruturação aninhada
const { endereco: { cidade, pais } } = usuario;

// Desestruturação de arrays
const [primeiro, segundo, ...resto] = [1, 2, 3, 4, 5];
// primeiro = 1, segundo = 2, resto = [3, 4, 5]

// Trocando variáveis
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

// Parâmetros de função
function saudar({ nome, idade }) {
  return `Olá ${nome}, você tem ${idade} anos`;
}

// Spread — expande arrays/objetos
const mesclado = [...arr1, ...arr2];
const copia = { ...objetoOriginal, nome: "Novo Nome" };

// Rest — coleta argumentos restantes
function somar(...numeros) {
  return numeros.reduce((a, b) => a + b, 0);
}
somar(1, 2, 3, 4); // 10

const nome = "Alice";
const saudacao = `Olá, ${nome}!`;

// Strings de múltiplas linhas
const html = `
  <div class="card">
    <h2>${titulo}</h2>
    <p>${descricao}</p>
  </div>
`;

// Tagged templates
function destacar(strings, ...valores) {
  return strings.reduce((resultado, str, i) =>
    `${resultado}${str}<mark>${valores[i] || ''}</mark>`, '');
}

// Optional chaining — acessa propriedades aninhadas com segurança
const cidade = usuario?.endereco?.cidade;          // undefined se qualquer um for null/undefined
const primeiro = usuarios?.[0]?.nome;            // Acesso a array
const resultado = usuario?.getProfile?.();       // Chamada de método

// Nullish coalescing — valor padrão para null/undefined APENAS
const porta = config.porta ?? 3000;          // Usa 3000 apenas se porta for null/undefined
const nome = usuario.nome ?? "Anônimo";

// Comparar com || (que também pega 0, "", false)
const contagem = data.contagem || 10;   // ⚠️ Se contagem for 0, isso retorna 10!
const contagem = data.contagem ?? 10;   // ✅ Só retorna 10 se contagem for null/undefined

const nome = "Alice";
const idade = 30;

// Shorthand de propriedade
const usuario = { nome, idade }; // o mesmo que { nome: nome, idade: idade }

// Shorthand de método
const api = {
  async obterUsuario(id) { /* ... */ },
  async criarUsuario(dados) { /* ... */ },
};

// Nomes de propriedades computadas
const campo = "email";
const obj = { [campo]: "[email protected]" };
// { email: "[email protected]" }

// Exportações nomeadas
export const URL_API = "https://api.exemplo.com";
export function buscarUsuario(id) { /* ... */ }

// Exportação padrão
export default class ServicoUsuario { /* ... */ }

// Importações nomeadas
import { URL_API, buscarUsuario } from './api.js';

// Importação padrão
import ServicoUsuario from './ServicoUsuario.js';

// Renomeando na importação
import { buscarUsuario as obterUsuario } from './api.js';

// Importação dinâmica (lazy loading)
const { Grafico } = await import('./grafico.js');