Notação de pontos vs notação de suporte

Samantha Ming Segue 17 de junho · 4 min ler CodeTidbit de SamanthaMing.com

Ambas as notações podem acessar as propriedades do objeto. Mas a questão é muitas vezes qual devo usar ?. Não se preocupe mais, basta seguir o guia de estilo do Airbnb. Sempre use Dot. E quando você quiser acessar a propriedade do objeto com uma variável, use o Bracket ?

 // Dot notation vs Bracket notation const variable = 'cookie'; lanche const = { 
cookie: '?'
};
// ? Dot: propriedade de acesso
snack.cookie;
// ? Bracket: propriedade de acesso com variável
lanche [variável];

Acessando as propriedades do objeto

Existem duas maneiras de acessar as propriedades do objeto. Ponto e suporte.

 const obj = { 
nome: 'valor'
};
// Notação de ponto
obj.name; // 'value'
// Notação de suporte
obj ['nome']; // 'valor'

Dot Notation para a vitória

Lembro-me de quando aprendi isso pela primeira vez. Entender as duas maneiras diferentes era simples. Nada muito complicado. Mas minha preocupação nunca foi sobre as diferentes notações. Meu maior dilema foi, o que devo usar ?? ?

Se você fosse como eu! Aqui está o colapso. Ambos fazem o mesmo. Então aqui está a regra simples. Por padrão, basta usar a notação de ponto.

? Dot Notation ?

  • É muito mais fácil de ler
  • É mais rápido digitar.

Dot Notation's Limitation

Com qualquer regra, sempre há exceções ?. Então, vamos dar uma olhada em algumas das limitações.

uma. Problema ao trabalhar com identificadores
b. Problema trabalhando com variáveis

uma. Trabalhando com Identificadores

Um dos maiores limites do uso das notações de Dot é que ele só funciona com identificadores válidos. Primeiro, deixe-me definir o que é um identificador

Um identificador é uma seqüência de caracteres no código que identifica uma variável, função ou propriedade.

MDN web docs

O identificador tem as seguintes regras:

  • maiúsculas e Minúsculas
  • pode conter letras Unicode
  • $ , - , são permitidos
  • Os dígitos (0–9) estão bem, MAS podem não começar com um dígito

Então, vamos provar alguns desses exemplos e ver o que acontece quando usamos a notação Dot.

 const obj = { 
123: 'dígito',
123name: 'start with digit',
name123: 'não inicia com dígito',
$ name: '$ sign',
nome-123: 'hífen',
NAME: 'maiúsculas'
nome: 'minúscula'
};

Nota:

Você pode notar alguns nomes de propriedade que eu tive que incluir citações. Exemplo: 123name . Eu tive que fazer isso caso contrário, o objeto seria considerado inválido e seria um erro de sintaxe.

Notação de ponto

 obj.123; // ? SyntaxError 
obj.123name; // ? SyntaxError
obj.name123; // ? 'não inicia com dígito'
obj. $ name; // $ '$ sign'
obj.name-123; // ? SyntaxError
obj.'name-123 '; // ? SyntaxError
obj.NAME; // 'maiúsculo'
obj.name; // lower 'minúscula'

Veja como tentei ser inteligente e use aspas no exemplo obj.'name-123' . Bem, não, porque ainda não vai funcionar.

Notação de suporte

Mas nada disso é um problema para a Notação de Bracket.

 obj ['123']; // digit 'dígito' 
obj ['123name']; // start 'começar com dígito'
obj ['name123']; // ? 'não inicia com dígito'
obj ['$ name']; // $ '$ sign'
obj ['nome-123']; // ? 'não inicia com o digito' obj ['NAME']; // 'maiúsculo'
obj ['nome']; // lower 'minúscula'

Veredito

Se você acha que tem um identificador JavaScript inválido como sua chave de propriedade, use a notação de colchetes ?

b. Acessando Propriedade com Variáveis

Outra limitação da notação de ponto é trabalhar com variáveis. Você definitivamente deve usar a Notação de Bracket. Nota! Quando você faz referência a uma variável na Notação de Bracket, você precisa pular a citação. É como você sabe que está lidando com uma variável em vez de acessar a chave de propriedade.

 const variável = 'nome'; const obj = { 
nome: 'valor'
};
// Notação de suporte
obj [variável]; // value 'valor'
// notação de pontos
obj.variable; // Indefinido

Propriedade indefinida

Uma coisa muito importante que quero salientar. Você notará que, se eu tentar usar a notação Dot na variável, ela retornará undefined . Isso ocorre porque quando você tenta acessar uma propriedade que não existe, ela retornará undefined .

 const emptyObj = {}; obj.name; // Indefinido 
obj ['nome']; // Indefinido

Então aqui está a parte de atenção. Vamos retornar ao nosso exemplo de objeto variável anteriormente. Se você usou a notação Dot, presumirá que está tentando acessar a propriedade com um identificador JavaScript válido. Porque está retornando algo, você pode pensar que tudo está funcionando bem. Sob o capô, sim é. Mas se a sua intenção é usar a variável, isso pode acabar com você. Isso definitivamente pode ser uma fonte de uma dor de cabeça de depuração. Então cuidado com isso !!

 const variável = 'nome'; const obj = { 
nome: 'valor',
variável: '?'
};
// Notação de suporte
obj [variável]; // value 'valor'
// notação de pontos
obj.variable; // '?'

Veredito

Nunca use a notação de ponto ao usar uma variável

Conclusão

Conhecendo as limitações da Dot Notation, vamos atualizar nossa regra.

Use a notação de ponto. Mas se você está lidando com identificadores inválidos ou variáveis, use a notação Bracket.