Recursos modernos essenciais
Um punhado de símbolos novos que aparece em praticamente todo código profissional de hoje. Depois desta lição, nenhum deles vai te assustar.
Estudar esta lição interativa →O JavaScript que você aprendeu até aqui é a espinha dorsal da linguagem. Mas, ao abrir um código profissional de hoje, você vai esbarrar em alguns símbolos que ainda não vimos, e nada frustra mais do que travar num ... ou num ?? sem saber nem como pesquisar por eles. Esta lição existe para isso: apresentar, com calma, os atalhos modernos que viraram o dia a dia de quem programa.
O primeiro é o spread: três pontos seguidos, ..., colocados antes de um array ou objeto. Ele espalha o conteúdo, como quem esvazia uma caixa dentro de outra. Os usos clássicos: criar uma cópia ([...lista]), juntar duas coleções e copiar um objeto mudando só um campo. Lembra da dica lá do módulo de listas, de transformar gerando cópias em vez de mexer no original? O spread é a principal ferramenta desse estilo:
// Recursos modernos que você vai amar:
const config = { tema: "escuro", fonte: "grande" };
// Spread (...) copia/junta objetos e arrays:
const novoConfig = { ...config, idioma: "pt-BR" };
console.log(novoConfig);
const a = [1, 2, 3];
const b = [...a, 4, 5];
console.log(b); // [1,2,3,4,5]Os próximos dois atalhos atacam o mesmo inimigo: o famoso erro de tentar ler algo que não existe. Você já sabe que acessar usuario.endereco.rua quebra o programa se endereco for null, e dados incompletos assim são rotina quando a informação vem de fora (de uma API, de um formulário). O optional chaining, ?. (um ponto de interrogação colado num ponto), faz o acesso com rede de proteção: se o caminho não existir, em vez de quebrar, o resultado é só undefined. E o nullish coalescing, ?? (dois pontos de interrogação), define um valor padrão para esses vazios: apelido ?? "Sem apelido".
"Mas isso não é o que o || já fazia?" Quase, e a diferença é fina e importante: o || troca qualquer valor falsy (inclusive 0 e texto vazio, que podem ser valores legítimos!), enquanto o ?? só troca os vazios de verdade, null e undefined. Num carrinho, quantidade || 1 transformaria um zero legítimo em 1; quantidade ?? 1 respeita o zero. Veja o trio em ação (com um bônus: parâmetros com valor padrão em funções):
const usuario = { nome: "Léo", endereco: null };
// Optional chaining (?.): acessa sem quebrar se algo não existir.
console.log(usuario.endereco?.rua); // undefined (sem erro!)
// Nullish coalescing (??): valor padrão só quando é null/undefined.
const apelido = usuario.apelido ?? "Sem apelido";
console.log(apelido);
// Parâmetros padrão em funções:
const cumprimentar = (nome = "visitante") => `Oi, ${nome}!`;
console.log(cumprimentar());
console.log(cumprimentar("Duda"));Espalhar e copiar
...Espalha o conteúdo de um array ou objeto: cria cópias, junta coleções, altera sem mexer no original.
Acessar sem quebrar
?.Acessa uma propriedade que talvez não exista: em vez de erro, devolve undefined.
Padrão só para vazio
??Valor padrão apenas quando é null/undefined. Respeita o 0 e o texto vazio, ao contrário do ||.
Juntos, ?. e ?? deixam seu código à prova de dados incompletos, e dados incompletos são a regra, não a exceção, quando a informação vem do mundo real. Você vai vê-los brilhando já na lição do fetch, logo adiante.
// Sua vez! Deixe o código à prova de dados incompletos.
const usuario = { nome: "Alex", contato: null };
// 1) Mostre usuario.contato?.email usando ?. (não pode quebrar!)
// 2) Combine com ?? para mostrar "sem email" no lugar do undefined.
// 3) Bônus: crie uma cópia de usuario com spread, trocando o nome.
Complete com ?. e ?? e clique em Rodar.