Free Press

Acesso de propriedades em um objeto

Existem duas maneiras de acessar propriedades em um objeto:

• Notação de pontos
• Notação de fendas

Notação de pontos é usada com mais freqüência. Abaixo vamos mergulhar em cada uma e descobrir algumas das diferenças.

Notação de pontos

Vejamos primeiro a notação de pontos. Considere este exemplo abaixo:

let obj = {
cat: 'meow',
dog: 'woof'
};let sound = obj.cat;console.log(sound);
// meow

Quero chamar sua atenção para a quinta linha onde estamos usando a notação de pontos: let sound = obj.cat;. Este é um exemplo de notação de pontos. Você pode acessar propriedades em um objeto especificando o nome do objeto, seguido por um ponto (período) seguido pelo nome da propriedade. Esta é a sintaxe: objectName.propertyName;.

Ao trabalhar com notação de ponto, a propriedade identifica só pode ser alfanumérica (e _ e $). As propriedades não podem começar com um número.

Notação de pontos é muito mais fácil de ler do que a notação de parênteses e por isso é usada mais frequentemente. No entanto, há uma segunda maneira de acessar propriedades em um objeto que você deve estar ciente. É chamada de notação de parênteses.

Notação de parênteses

Aqui está um exemplo de notação de parênteses:

let obj = {
cat: 'meow',
dog: 'woof'
};let sound = obj;console.log(sound);
// meow

Again, chame sua atenção para a quinta linha: let sound = obj;. Você pode acessar propriedades em um objeto especificando o nome do objeto seguido do nome da propriedade entre colchetes. Aqui está a sintaxe: objectName.

Provavelmente já viu notação de parênteses quando trabalha com Arrays. No exemplo abaixo vamos acessar o segundo elemento no nosso arr usando a sintaxe: arrayName

let arr = ;let letter = arr;console.log(letter);
// b

But notação de colchete também é útil quando se trabalha com Objetos.

Ao trabalhar com notação de colchete, os identificadores de propriedade só precisam ser uma String. Eles podem incluir quaisquer caracteres, incluindo espaços. Variáveis também podem ser usadas desde que a variável resolva para uma String.

Isso significa que há menos limitações quando se trabalha com notação de colchete. Agora podemos ter espaços em nossas strings, e podemos até iniciar strings com números.

Talvez mais importante, agora podemos usar variáveis para acessar propriedades em um objeto. É importante a variável que você está usando referências uma String.

Dê uma olhada nesse exemplo de variável. Pode ser um pouco confuso no início, então tenha paciência comigo:

let obj = {
cat: 'meow',
dog: 'woof'
};let dog = 'cat';
let sound = obj;console.log(sound);
// meow

O exemplo acima é similar a um exemplo anterior que já vimos. A principal diferença é que agora estamos usando notação de colchete para passar em uma variável. Tenha cuidado, pode parecer que estamos procurando a propriedade dog no nosso obj, mas isso não é totalmente correto. dog é uma variável com um valor de 'cat'. Como estamos usando parênteses, o valor da string é passado para dentro e procuramos pela propriedade 'cat' – obj. Assim, meow é logado no console.

Below, vamos tentar fazer a mesma coisa, mas com notação de pontos:

let obj = {
cat: 'meow',
dog: 'woof'
};let dog = 'cat';
let sound = obj.dog;console.log(sound);
// woof

Deixar o taco você deve notar que estamos voltando woof. Isto é muito diferente do outro exemplo e é porque não podemos usar variáveis com notação de pontos. A tentativa de procurar obj.dog irá na verdade apenas procurar pelo valor da string de 'dog' dentro do nosso objecto em vez de usar o valor das variáveis. Assim, obj.dog retorna woof.

Recap

Existem algumas diferenças importantes entre notação de ponto e colchete:

Notação de ponto:

• As identificações de propriedade só podem ser alfanuméricas (e _ e $)
• As identificações de propriedade não podem começar com um número.
• Identificadores de propriedade não podem conter variáveis.
• OK – obj.prop_1, obj.prop$
• Não OK – obj.1prop, obj.prop name

Notação de Frasco:

• Identificadores de propriedade têm de ser uma String ou uma variável que referencie uma String.
• Não há problema em usar variáveis, espaços e Strings que começam com números
• OK – obj, obj

Obrigado pela leitura! Se você está pronto para finalmente aprender Desenvolvimento Web, confira The Ultimate Guide to Learning Full Stack Web Development em 6 meses, por $30. Se você está apenas procurando melhorar suas habilidades de JavaScript, confira: Um Guia para Iniciantes em JavaScript Avançado

Publico 4 artigos sobre desenvolvimento web a cada semana. Por favor, considere inserir seu e-mail aqui se você gostaria de ser adicionado à minha lista de e-mails uma vez por semana, ou me siga no Twitter.