5
respostas

Notação de colchetes

"Então, qual é a particularidade da notação de colchetes? É a capacidade de transmitir uma propriedade como um dado variável. Esses dados podem ser provenientes de uma variável, ou, no contexto da nossa função, de um parâmetro.

De acordo com a fala da instrutura Juliana (muito boa instrutora por sinal), o que significa dizer que o dado pode ser provenientes de uma variável? Não ficou muito claro pra mim, desculpa!

Outra pergunta:

Em ambos os casos, tanto o dado sendo passado entre colchetes no retorno da função (objEstudante[infoEstudante];) quanto sendo passado através de strings (['nome']) a gente sabe o nome do parâmetro em questão. Logo, faz mais sentido usar a notação ponto, que é menos 'complexa', na minha opinião.

Seria possível algum instrutor me mostrar um trecho de código cujo essa propriedade seja dinâmica ou desconhecida? Talvez faça mais sentido pra mim.

5 respostas

Olá Rosemberg, bom dia.

Quanto à sua pergunta:

  • O que significa dizer que o dado pode ser provenientes de uma variável? Não ficou muito claro pra mim, desculpa!

Primeiramente, não peça desculpas, é para isso que o fórum existe, a única pergunta ruim é aquela que não foi feita. Vou demonstrar o que significa o dado proveniente de uma variável:

const objeto = {
    cor: 'vermelho',
    amigo: true,
};

const x = 'cor';

console.log(objeto[x]);

Desse modo, a notação de ponto não adiantaria, pois o dado de qual chave vamos buscar veio de uma variável.

Em ambos os casos, tanto o dado sendo passado entre colchetes no retorno da função (objEstudante[infoEstudante];) quanto sendo passado através de strings (['nome']) a gente sabe o nome do parâmetro em questão. Logo, faz mais sentido usar a notação ponto, que é menos 'complexa', na minha opinião.

Entendo seu ponto perfeitamente. De fato, se você sempre vai usar a mesma, é melhor utilizar a notação de ponto. Mas imagine o seguinte cenário.

const objeto = {
    cor: 'vermelho',
    amigo: true,
};

const atributoQueUsuarioPediu = prompt('Caro usuário, digite o que você quer saber desse objeto.');

alert( 'O valor do atributo ', atributoQueUsuarioPediu, ' é ', objeto[atributoQueUsuarioPediu]);

Claro, isso é algo muito simplório, mas, no futuro, quando você estiver aprendendo funções e métodos, vai começar a aperecer novos momentos em que sua função não sabe de antemão qual atributo ela deve pegar do objeto, então passar dentro de chaves, nesses momentos, acaba sendo ideal.

Se tiver qualquer outra dúvida, ou se não ficou claro, pode falar.

Boa tarde, Edmilson!

Obrigado pela pró-atividade em me responder!

Mesmo tendo 'clareado' um pouco ainda tenho dúvidas!

Veja:

const objeto = {
    cor: 'vermelho',
    amigo: true,
};

const atributoQueUsuarioPediu = prompt('Caro usuário, digite o que você quer saber desse objeto.');

alert( 'O valor do atributo ', atributoQueUsuarioPediu, ' é ', objeto[atributoQueUsuarioPediu]);

Se o usuário não conhece o objeto ele não conhece suas propriedades, certo? Poderia me mostrar como seria o retorno pra esse trecho de código que você usou como exemplo, levando em consideração a resposta de um usuário?

Talvez minhas perguntas estejam vagas demais e eu não esteja conseguindo expressar com clareza minhas dúvidas.

Olá, Rosemberg, bom dia.

Excelente observação com relação ao conhecimento do usuário. Bom, quanto à como seria o retorno.

Primeiramente o usuário receberia um alerta no navegador perguntando o atributo. Caso o usuário digite cor, iria aparecer outro alerta, escrito vermelho, caso amigo, iria aparecer um alerta escrito true, caso outra coisa, haveria um erro, que apareceria no console do navegador dele, indicando que objeto não tem o atributo 'bolinhasBrancas', por exemplo.

Mas, a questão é, de fato o usuário não tem como saber, mas esse foi apenas um exemplo simplório para uma situação real.

Imagine agora que no navegador da pessoa, a página web contém um dashboard, com alguns gráficos sobre a quantidade de bolinhos de chuva que ele comeu hoje. Nesse dashboard, ele tem 3 botões: Hoje, última semana, e último mês. O usuário ao clicar no botão último mês, o javascript pode, por exemplo, no seguinte objeto (Nosso usuário hipotético adora bolinhos de chuva):

const dashboardBolinhosDeChuva = {
    hoje: [2, 04, 8, 2, 0, 0],
    ultimaSemana: [10, 0, 12, 15, 32, 3, 0],
    ultimoMes: [54, 0, 64, 14]
};

Os botões podem ter, por exemplo uma tag em cada um. Um tem a tag hoje, outro a tag ultimaSemana e outro a tag ultimoMes.

Então o código javascript poderia, por exemplo fazer:

const tag = document.getElementById('botao-serie').tipo;
const serieDeBolinhos = dashboardBolinhosDeChuva[tag];

// Algum código javascript para criar o dashboard aqui a partir da array de valores.

Assim ficou um pouco mais claro?

Meu javascript está enferrujado, então não tenho certeza da sintaxe, mas deu para pegar a ideia?

Boa noite, Edmilson!

Sim, ficou mais claro com o exemplo dos 'bolinhos de chuva'. Obrigado!

Bom dia, Rosemberg!

Que bom!

Se puder marcar a resposta que te ajudou como solução, agradeço!