nomar.dev

11011000001

6 de Junho de 2020

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.

Array dos Simpsons


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);