TransWikia.com

Aceder a propriedades em JavaScript: notação de ponto ou colchetes?

Stack Overflow em Português Asked by Tiago Martins Peres on November 22, 2021

Digamos que temos um objeto chamado rectangulo e uma propriedade chamada area. Podemos aceder a essa propriedade das seguintes maneiras:

  • Notação de ponto: rectangulo.area.
  • Notação de colchete: rectangulo['area'].

Compreendo a vantagem do uso de notação de colchetes para casos em que as propriedades:

  • Tenham caracteres como espaços, hífens, etc.
  • Não são conhecidas até ao tempo de execução.

Além destas razões intuitivas, existem outras para usar uma notação em prol da outra? Se sim, quais?

2 Answers

Existem duas principais (outras também, as quais não entram no escopo desta resposta) formas de se acessar propriedades em um objeto. Veja mais em "acessores de propriedade" na documentação.

A primeira delas é a notação de ponto – por exemplo object.property. Nesse caso, como o acesso está "hard-coded" no código, você não pode utilizar quando precisa de um acesso dinâmico.

O benefício desse modo é a maior legibilidade. Você pode utilizar a notação de ponto para acessar qualquer propriedade que seja um identificador válido em JavaScript. Desse modo, você poderá acessar uma propriedade utilizando a notação ponto desde que seja composto por letras do Unicode, $, _ e não se inicie por números.

Então:

const myObj = {
  1: 'One',
  2: 'Two',
  π: Math.PI, // "PI" é uma letra válida no Unicode
  name: 'Bob',
  $: 'jQuery?'
};

// myObj.1; --> Inválido porque 1 não é identificador válido
// myObj.2; --> Inválido porque 2 não é identificador válido

console.log(myObj.π); // 3.141592653589793
console.log(myObj.name); // Bob
console.log(myObj.$); // jQuery?

O outro principal método de acesso utiliza a notação de colchetes [ e ], cuja sintaxe é object[property]. Essa notação é comumente utiliza quando é necessário acessar a propriedade de modo dinâmico ou quando o nome da propriedade não se trata de um identificador válido.

Como visto acima, essa propriedade também deve ser utilizada para acessar propriedades que não sejam identificadores válidos em JavaScript.

Também são utilizadas para acessar propriedades cuja chave seja um número (number) ou símbolo (symbol).

Então:

const SYMBOL_KEY = Symbol('name');

const obj = {
  1: 'One',
  [SYMBOL_KEY]: 'Bob',
  age: 10,
  'not-a-valid-identifier': 'Value'
};

console.log(obj[1]); // One
console.log(obj[SYMBOL_KEY]); // Bob
console.log(obj['age']); // 10
console.log(obj['not-a-valid-identifier']); // Value


Na edição ECMAScript 2020, o JavaScript permite que utilize-se o acesso opcional a propriedades de objetos. Funciona tanto com a notação de colchetes quanto a notação de ponto. É útil para acessos aninhados.

Answered by Luiz Felipe on November 22, 2021

É sempre difícil provar uma negativa (nesse caso que não existe um outro benefício para usar uma notação ou outra).

Pelo que você citou parece ser todos as diferenças entre as duas notações.

Normalmente eu uso notação de ponto sempre que posso, já que é mais fácil de ler, e notação com colchete caso precise determinar a propriedade do objeto dinamicamente como my_obj[my_var].

Answered by renatomt on November 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP