Uma vírgula final, também conhecida como vírgula pendente ou terminal, é um símbolo de vírgula que é digitado após o último item de uma lista de elementos. Desde a introdução da linguagem JavaScript , vírgulas finais são legais em literais de matriz. Posteriormente, os literais de objeto uniram matrizes. E com a introdução do ES2017, também conhecido como ES8, as vírgulas finais tornaram-se permitidas em quase todos os lugares.
Parece uma pequena mudança, mas existem algumas consequências difíceis de notar. E embora a maioria dos novos recursos de linguagem sejam bem-vindos, este pode colocar você em problemas se não tomar cuidado.
Neste guia, veremos as vírgulas finais em detalhes. Começaremos com os tipos de dados comuns, como matrizes e objetos, onde você pode adicionar com segurança uma vírgula no final de uma lista de itens. Em seguida, passaremos para construções de linguagem, como listas de parâmetros, chamadas de função e atribuições de desestruturação. No final do artigo, discutiremos os prós e os contras de usar vírgulas à direita.
Usando vírgulas à direita em matrizes
Você pode incluir com segurança uma vírgula à direita após o última expressão em uma matriz como esta:
const arr=[“um”,”dois”,”três”,];
Tenha cuidado para não adicionar mais de uma vírgula ao final, ou você estará criando um elemento indefinido. Por exemplo, a seguinte matriz é perfeitamente válida, mas contém quatro elementos:
const arr=[“um”,”dois”,”três”,,]; console.log (arr.length);//=> 4
Os arrays não têm necessariamente índices contíguos começando em 0. Você pode criar um array que contenha várias “lacunas”-esse array é conhecido como matriz esparsa . Por exemplo, a seguinte matriz contém seis elementos, três dos quais são indefinidos:
const sparseArray=[1 ,,, 4,5 ,,];
Portanto, é importante lembrar que o valor da propriedade length nem sempre indica o número de elementos na matriz. Você pode até ter um array sem elementos e comprimento 1:
const arr=[,]; console.log (arr.length);//=> 1
Na prática, entretanto, você raramente precisa trabalhar com uma matriz esparsa. E se você fizer isso, seu código existente provavelmente irá lidar com isso da mesma forma que lidaria com uma matriz normal contendo elementos indefinidos.
Usando vírgulas finais em objetos
Semelhante a matrizes, você pode tem uma vírgula após a última propriedade de um objeto:
const person={firstName:”John”, lastName:”Davis”, age: 30,}
Vírgulas finais em literais de objeto são legais desde ECMAScript 5. Alguns guias de estilo JavaScript, como os criados por Airbnb e Google , incentiva você a criar o hábito de incluir uma vírgula no final o tempo todo de modo que é menos provável que você encontre um erro de sintaxe ao adicionar uma nova propriedade no final de um objeto em um momento posterior.
Observe que, ao contrário de matrizes, você não pode criar objetos esparsos e tentar fazer isso resulta em uma sintaxe e rror:
const person={firstName:”John”,, age: 30,}//logs://=> Uncaught SyntaxError: Unexpected token’,’
Como mencionei antes, existem vários outros constrói em JavaScript além de matrizes e objetos que podem ter uma vírgula final.
Usando vírgulas finais em listas de parâmetros e chamadas de função
Às vezes é útil colocar os parâmetros de uma função em um separado linha, especialmente se houver uma longa lista de parâmetros ou se você deseja acomodar comentários que descrevem cada parâmetro. Por exemplo:
function createRectangle (w,//(número) a largura do retângulo h//(número) a altura do retângulo) {/*… */}
Conforme a função evolui , você pode se encontrar em uma situação em que precise adicionar mais parâmetros à função. Mas para cada novo parâmetro adicionado, você deve ir para a linha anterior e adicionar uma vírgula:
function createRectangularPrism (w,//(número) a largura h,//(número) a altura d//( número) a profundidade) {/*… */}
Mesmo desenvolvedores experientes nem sempre se lembram de adicionar uma vírgula à linha anterior, o que resulta em um erro. O que é pior é que as diferenças de confirmação mostrarão uma mudança de código nessa linha simplesmente porque você adicionou mais tarde uma vírgula (mais sobre isso mais tarde).
Felizmente, ES2017 tornou legal adicionar uma vírgula final aos parâmetros de função , também:
function createRectangularPrism (w,//(número) a largura h,//(número) a altura d,//(número) a profundidade) {/*… */}
Esta é apenas uma mudança no estilo de codificação e não adiciona um parâmetro sem nome ou causa qualquer outro efeito colateral.
Além do mais, a atualização ES2017 nos deu a capacidade de ter uma vírgula no final de argumentos em chamadas de função. Alguns programadores gostam de colocar cada argumento de uma chamada de função em sua própria linha. Se você for um deles, as vírgulas finais, novamente, o salvará de possíveis erros no futuro:
createRectangle (5, 10,)
Este código chama a função createRectangle () com dois argumentos. Se, posteriormente, você decidir adicionar um terceiro argumento, não terá que editar nenhuma linha existente. A mesma regra se aplica a definições de método para classes ou objetos, pois eles também são funções:
const myObj={createRectangle (//define um método w, h,) {/*… */}}
Usando vírgulas à direita na sintaxe de atribuição de desestruturação
A sintaxe de atribuição de desestruturação permite que você extraia rapidamente valores de arrays ou objetos em variáveis distintas. Ao desestruturar, você pode adicionar uma vírgula à esquerda da tarefa. Por exemplo, o código a seguir destrói uma matriz:
const numbers=[10, 20, 30]; const [n1, n2, n3,]=números; console.log (n1);//=> 10
Da mesma forma, você pode usar a desestruturação para “desempacotar” as propriedades de um objeto:
const car={color:’red’, type:’coupe’, hp: 500}; const {cor, tipo, hp,}=carro; console.log (cor);//=> vermelho
Mas e os objetos JSON, que são semelhantes aos objetos JavaScript simples? Eles podem usar vírgulas finais?
Usando vírgulas finais em JSON
O formato de arquivo JSON foi introduzido no início dos anos 2000. Como JSON é baseado na sintaxe de objeto do JavaScript e foi inventado antes do ECMAScript 5 ser introduzido em 2009, vírgulas finais não podem ser usadas em JSON (lembre-se, vírgulas finais em literais de objeto tornaram-se legais no ES5).
Para exemplo, o código a seguir gerará um erro:
JSON.parse (‘[1, 2, 3, 4,]’);//=> Uncaught SyntaxError: Unexpected token] in JSON na posição 13
O mesmo acontece com esta linha de código:
JSON.parse (‘{“foo”: 1,}’);//=> Uncaught SyntaxError: Unexpected token} em JSON na posição 12
Existem várias ferramentas online que podem ajudá-lo com este problema. Por exemplo, você pode aproveitar este formatador JSON para localizar e remover automaticamente as vírgulas finais em seu código JSON.
Vírgulas à direita nas importações e exportações de módulo
No JavaScript moderno, é uma prática comum criar programas compostos por pedaços independentes de código chamados módulos. Assim como é legal adicionar uma vírgula final aos objetos em scripts clássicos, é legal ter uma vírgula após o último item de exportação nos módulos. Isso é útil quando você deseja incluir mais exportações posteriormente. Por exemplo:
//módulo 1 var foo=10; deixe bar=20; const baz=30; export {foo, bar, baz,};
Este código usa a palavra-chave export para tornar as variáveis foo, bar e baz públicas. Isso significa que outros módulos em arquivos separados podem usar a instrução import para acessar essas variáveis:
//módulo 2 import {foo, bar, baz,//observe a vírgula final, que é legal ao importar identificadores} de’./module1.js’
Por que você deve começar a usar vírgulas finais?
Os programadores de JavaScript costumavam evitar incluir uma vírgula final em matrizes porque as versões anteriores do Internet Explorer gerariam um erro (mesmo que fosse legal em JavaScript desde o início). Mas as coisas mudaram. Muitos estilos de codificação agora recomendam o uso de vírgulas finais o tempo todo, e há boas razões para isso.
Se você frequentemente adiciona novos itens ao final de matrizes, objetos ou listas de argumentos/parâmetros, então ter um vírgula final já colocada significa que você não terá que se lembrar de ir para a linha antes e adicionar uma vírgula se precisar fazer uma adição mais tarde.
Você também pode se descobrir frequentemente recortando e colando propriedades. Novamente, ter uma vírgula no final pode tornar a reordenação dos itens menos problemática e evitar erros de sintaxe no futuro.
Além disso, como você não precisará alterar a linha que costumava ser o último item, controle de versão sistemas produziriam diffs mais limpos. Digamos que você tenha esta função:
function myFunction (p1, p2) {/*… */} myFunction (‘arg1′,’arg2’);
Se você adicionar um novo parâmetro chamado p3, a saída do diff seria algo como:
function myFunction (p1,-p2 + p2,//Altere esta linha para adicionar uma vírgula + p3//Adicione p3) {/*… */} myFunction (‘arg1’,-‘arg2’+’arg2’,//Alterar esta linha para adicionar uma vírgula +’arg3’//Adicionar arg3);
Aqui, você tem duas mudanças na declaração da função e duas mudanças na invocação da função. Vamos ver o que aconteceria se sua função já tivesse uma vírgula final:
function myFunction (p1, p2,) {/*… */} myFunction (‘arg1′,’arg2’,);
Com uma vírgula final no lugar, você terá apenas duas alterações na saída do diff:
function myFunction (p1, p2, + p3//Adicionar p3) {/*… */} myFunction (‘arg1′,’arg2’, +’arg3’//Adicionar arg3);
A conclusão desta seção é que o uso de vírgulas no final torna mais fácil adicionar novos parâmetros às suas funções ou copiar/colar propriedades em matrizes e objetos. Também ajuda a produzir uma saída de diff mais limpa.
Mas as vírgulas finais não funcionam em todos os lugares e, se você não tiver cuidado, usá-las pode sair pela culatra.
Quando não usar as vírgulas vírgulas
Você pode supor que também pode usar vírgulas finais com a sintaxe do parâmetro rest, porque vírgulas finais são permitidas em várias outras construções JavaScript. Mas isso não é verdade:
function sum (… theArgs,) {//observe a vírgula final return theArgs.reduce ((anterior, atual)=> {return anterior + atual;}); } console.log (soma (1, 2, 3));//=> Uncaught SyntaxError: parâmetro após o parâmetro rest
Usar uma vírgula após o parâmetro rest é ilegal, mesmo se você usá-la na sintaxe de desestruturação:
const numbers=[10, 20, 30]; const [n1,… n2,]=números;//=> Uncaught SyntaxError: o elemento rest pode não ter uma vírgula final
Portanto, lembre-se de que embora o uso de uma vírgula final na sintaxe de desestruturação seja válido, você não pode usá-la após o parâmetro rest.
Além da sintaxe de desestruturação, há mais um lugar onde o uso de uma vírgula pode causar problemas: funções. Considere o seguinte exemplo:
function myFunction (,) {//…}//=> Uncaught SyntaxError: Token inesperado’,’myFunction (,);//=> SyntaxError não capturado: token inesperado’,’
A primeira linha deste código define uma função sem parâmetro e uma vírgula, e isso causa um SyntaxError. Você pode ter nenhum parâmetro sem vírgula ou uma vírgula final após os parâmetros. O mesmo é verdade quando você invoca uma função: você não pode ter uma chamada de função cujo único argumento seja uma vírgula.
Conclusão
O uso do símbolo de vírgula passou por várias revisões no Linguagem JavaScript e com cada revisão , mais construções de linguagem adicionaram suporte para vírgulas finais. Neste artigo, vimos como a vírgula final funciona em diferentes construções, incluindo matrizes, objetos, objetos JSON, listas de parâmetros, chamadas de função e importações e exportações de módulo.
Então, aprendemos onde a vírgula final a vírgula é legal de usar e onde não está. Em geral, você deve usar vírgulas finais ao copiar/colar propriedades com frequência ou adicionar novos itens ao final de uma lista. Você também pode aproveitá-los para produzir saídas de diff mais limpas. Mas, lembre-se, você não deve usá-los com a sintaxe do parâmetro rest e não pode ter uma declaração/invocação de função cujo único parâmetro seja uma vírgula.
