Executando verificação de segurança...
34

đŸ§™â€â™‚ïž Todas as novas funcionalidades do Javascript desde 2016 atĂ© 2025

O Javascript evoluiu bastante com o passar do tempo e nem todo mundo sabe como funcionam os métodos mais recentes da linguagem, portanto fiz um compilado simplificado explicando a maioria dos métodos e funcionalidades lançados desde 2016 até 2025.

NĂŁo coloquei funcionalidades que sĂŁo mais complexas, como promises ou mudanças no regex, mas veja o link da fonte caso vocĂȘ queira mais detalhes

  1. array.includes: Este mĂ©todo permite verificar se um array contĂ©m um determinado elemento. É muito bom para elementos do tipo number e string, mas tome cuidado ao verificar objetos, pois ele irĂĄ verificar por referĂȘncia e nĂŁo se o objeto contĂ©m as mesmas propriedades

  2. Operador de exponenciação (**): Este operador Ă© usado para calcular a potĂȘncia de um nĂșmero, substituindo a necessidade de usar o mĂ©todo Math.pow. E se vocĂȘ estĂĄ se quanto Ă© zero elevado a zero (0 ** 0), sim, Ă© 1.

  3. Object.values e Object.entries: Object.values retorna um array com os valores das propriedades enumerĂĄveis de um objeto. Object.entries retorna um array de pares [chave, valor] das propriedades enumerĂĄveis de um objeto. Esses mĂ©todos sĂŁo Ășteis quando vocĂȘ usa em conjunto com mĂ©todos de array, como Array.map ou Array.filter.

  4. string.{padStart,padEnd}: Esses métodos permitem preencher uma string no início ou no final com um caractere especificado, até que a string atinja o comprimento desejado.

  5. VĂ­rgulas finais em listas de parĂąmetros e chamadas de função: Permite adicionar uma vĂ­rgula apĂłs o Ășltimo parĂąmetro de uma função ou argumento em uma chamada de função. Isso faz com que na hora de editar um cĂłdigo, vocĂȘ sĂł mude uma unica linha, criando menos ediçÔes no cĂłdigo e permitindo que o git blame mostre a pessoa certa.

  6. Spread Operator ...: VocĂȘ pode usar o operador ... para passar todas as propriedades de um objeto para outro. VocĂȘ tambem pode usar isso com arrays, passando todos os elementos de um array para o outro, mas tome cuidado para nĂŁo juntar um objeto com um array, pois darĂĄ erro.

  7. Object.fromEntries: Este método é o inverso de Object.entries, permitindo criar um objeto a partir de uma lista de pares [chave, valor].

  8. string.{trimStart,trimEnd}: Estes métodos permitem remover espaços em branco do início (trimStart) ou do final (trimEnd) de uma string.

  9. array.{flat,flatMap}: flat achata arrays dentro de arrays, podendo diminuir o nĂșmero das dimensĂ”es de uma matrix. Por exemplo, vocĂȘ pode transformar uma matrix de 2 dimensĂ”es em um array (uma dimensĂŁo)

  10. string.matchAll: Este mĂ©todo retorna todas as correspondĂȘncias de uma expressĂŁo regular em uma string. A vantagem desse mĂ©todo Ă© que ele retorna um iterator e vocĂȘ pode computar o regex dentro de um loop e sĂł executar o que for necessĂĄrio.

  11. BigInt: Introduz o tipo de dado BigInt, que permite representar e operar em nĂșmeros inteiros muito grandes, alĂ©m do limite dos nĂșmeros inteiros tradicionais (Number). Para representar um BitInt, basta colocar um n depois do nĂșmero. Por exemplo 123n. Mas tome cuidado ao comparar BigInts com nĂșmero "normais", pois vocĂȘ precisarĂĄ converter os nĂșmeros.

  12. Encadeamento opcional (Optional Chaining): Este operador (?.) permite acessar propriedades profundamente aninhadas em objetos sem precisar verificar manualmente se cada referĂȘncia no caminho Ă© null ou undefined.

  13. Operador de coalescĂȘncia nula (??): Este operador retorna o valor Ă  direita se o valor Ă  esquerda for null ou undefined, permitindo um fallback mais seguro.

  14. string.replaceAll: Este mĂ©todo substitui todas as ocorrĂȘncias de uma string ou expressĂŁo regular em uma string por outra string, sem precisar usar o flag g manualmente.

  15. Operadores de atribuição lógica: Combina operadores lógicos (&&, ||, ??) com atribuição, permitindo expressÔes mais curtas e legíveis para certas operaçÔes lógicas.

  16. Separador numĂ©rico _: Que numero Ă© esse 100000000? É dificil de falar o nome do numero e ver quantas casas decimais ele tem imediatamente, mas vocĂȘ pode usar um separador numerico (_) para separar dĂ­gitos do nĂșmero, tornando-os mais legĂ­veis sem afetar seu valor. Por exemplo 100_000_000 ficaria muito mais facil de entender. Lembrando que pode ser qualquer quantidade de casas, por exemplo 1_0_0_0_0_0, que Ă© estranho, mas funciona.

  17. array.at(): Este método fornece uma maneira de acessar elementos de arrays e strings usando índices positivos ou negativos, fazendo com que acessar o ultimo index do array seja muito mais facil. Basta passar .at(-1).

  18. Object.groupBy e Map.groupBy: Permite agrupar valores de um array baseado no valor retornado por uma função. Object.groupBy retorna um objeto e Map.groupBy retorna um Map.

  19. Novos mĂ©todos da classe Set: Para explicar esses novos mĂ©todos eu achei muito mais fĂĄcil vocĂȘ ver os Vens Diagrams da prĂłpria documentação: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set_composition

Carregando publicação patrocinada...
3

Fala Mago!
Muito legal o material.
Um adendo importante pra quem gera cĂłdigo que nĂŁo Ă© transpilado para versĂ”es mais antigas do Javascript Ă© usar o https://caniuse.com/ pra verificar a compatibilidade dos browsers com determinada funcionalidade pra saber se cabĂ­vel usar considerando alguma referĂȘncia de compatibilidade (o encadeamento opcional nĂŁo tĂĄ disponĂ­vel em versĂ”es do chrome mais antigas do que 2020, por exemplo).

2
-1