Pílulas de JavaScript: acessando chaves de um objeto usando variáveis externas
Este é o primeiro post de uma série na qual compartilharei alguns aprendizados da minha jornada no JavaScript no formato de mini artigos ;)
Considere um objeto shirt
com a chave color
guardando a string blue
:
const shirt = { color: 'blue',}
Se quiséssemos acessar o valor da chave color
, poderíamos escolher entre a notação de colchetes shirt['color']
e a notação de ponto shirt.color
. Os dois modos são equivalentes, certo? Guarde esse pensamento por enquanto!
Vamos agora criar uma variável e guardar uma string 'color'
dentro dela:
const myVariable = 'color';
Nós também podemos usar essa variável para acessar o valor de color
dentro do objeto shirt
. Testaremos primeiro com a notação de colchetes. Observe:
shirt[myVariable];// 'blue'
Isso é possível porque, na execução desse código, a variável myVariable
é substituída pelo seu conteúdo, que é a string 'color'
. Na prática, o que estamos executando é shirt['color']
.
Ok, fez sentido! Só por curiosidade, vamos tentar fazer esse mesmo acesso usando a notação de ponto?
shirt.myVariable;// undefined
…Quê? Undefined? O que aconteceu aqui?
Fica fácil de apontar a diferença se você souber este conceito base sobre objetos JavaScript: por baixo dos panos, todas as chaves de um objeto são strings, mesmo quando as aspas são omitidas — que é o nosso caso.
Ao rodar shirt.myVariable
, estamos pedindo ao JavaScript que procure por uma chave dentro de shirt
correspondente à string 'myVariable'
, que não existe. É como se tivéssemos escrito shirt['myVariable']
.
Porém, se voltarmos a usar a notação de colchetes com shirt[myVariable]
, o JavaScript não converte o que está dentro dos colchetes em string, procurando pela variável ao invés — que é o comportamento que esperamos.
Por hoje é só e até a próxima ❤