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 ❤
