Acessando propriedades no JavaScript

O mundo não pode parar. E o mundo parou.

Ailton Krenak - O amanhã não está à venda

Existem duas formas de acessar uma propriedade no JavaScript: por meio de um ponto ou com colchetes. No código abaixo é demonstrado como isso é feito acessando a propriedade de um object.

let homer = {
    nome: 'Homer'
}

homer.nome // Homer
homer['nome'] // Homer

A notação com ponto possui uma regra, ela só pode ser usada se o nome da propriedade seguir as mesmas regras que são utilizadas quando declaramos uma variável. Ou seja, o nome da propriedade precisa começar com uma letra, underline (_), ou cifrão ($); e os demais caracteres pode ser também números. Quando o nome da propriedade não seguir essas regras, é preciso utilizar a notação com colchetes.

Vamos adicionar a propriedade "nome completo" ao nosso object. Note que o nome da nossa nova propriedade possui um espaço. Isso impossibilita o uso da notação com ponto.

let homer = {
    nome: 'Homer',
    'nome completo': 'Homer Simpson'
}

homer['nome completo'] // Homer Simpson

homer.nome completo // Não funciona
homer."nome completo" // Não funciona

Também não é possível usar a notação com ponto se o nome da propriedade for um número. Por exemplo, não é possível acessar a propriedade com nome "1" dessa forma: homer.1. Nesse caso, temos que usar a notação de colchetes: homer[1]. Isso explica o motivo da gente acessar os valores de um array referenciando o índice entre colchetes. Os índices de um array são propriedades de um object.

No JavaScript, encontramos propriedades em quase todos os tipos de valores. Por exemplo, uma string possui a propriedade length (armazena o tamanho da string) e o object Math possui a propriedade PI (armazena o valor aproximado de PI). Entretanto existem duas exceções que são o null e o undefined. Se você tentar acessar qualquer propriedade destes, será gerado um erro.

null.nome // TypeError: Cannot read property 'nome' of null
undefined['nome'] // TypeError: Cannot read property 'nome' of undefined

Esse é um erro muito comum. As vezes tentamos acessar uma propriedade de um objeto que não existe ou que ainda não possui um valor ou não possui a estrutura que a gente espera. Por exemplo, supondo que a variável "marge" foi declarada e nenhum valor foi atribuído a ela, ao tentar acessar a propriedade "nome" um erro do mesmo tipo será gerado. Uma forma de não gerar um erro e interromper a execução do programa é verificar se a variável possui algum valor antes de acessar a propriedade. Isso pode ser feito com o operador && (E lógico).

let marge;

marge.nome // TypeError: Cannot read property 'nome' of undefined
marge && marge.nome // retorna undefined, mas não gera um erro e o programa continua

Foi proposto um outro operador para ser usado nessa situação que é o ?. (optional chaining). Este operador verifica se o valor não é null ou undefined antes de prosseguir para o próximo nível do object.

let marge;

marge?.nome // undefined (sem gerar um erro)
marge?.['nome'] // undefined (sem gerar um erro)

Apesar de estar implementado na maioria dos navegadores modernos, o seu funcionamento pode não ser estável. Assim, é preciso ter atenção no seu uso.

Bibliotecas para acessar propriedades

O uso do operador && faz com que seja necessário verificar cada nível até chegar na propriedade desejada:

let marge;

marge && marge.filhos && marge.filhos.bart && marge.filhos.bart.idade

Podemos evitar isso utilizando a função get do Lodash ou prop (para um nível) e path do Ramda.

import * as Lodash from 'lodash';
import * as Ramda from 'ramda';

let marge;

Lodash.get(marge, 'filhos.bart.idade')

Ramda.prop('filhos', marge);
Ramda.path(['filhos', 'bart', 'idade], marge);