Diferença entre acessar propriedade de objeto com notação de ponto ou colchetes

Neste artigo você vai aprender a diferença entre acessar propriedade de objeto com notação de ponto ou colchetes em JavaScript, qual a melhor abordagem?

Fala programador(a), beleza? Bora aprender mais sobre objetos e JavaScript!

A grande verdade é que não há diferença em acessar as propriedades de um objeto de uma maneira ou de outra

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Porém temos um recurso a mais com a forma de colchetes

Pois podemos utilizar uma variável para acessar uma propriedade dinâmicamente, isso é bem interessante

Veja um exemplo prático das duas formas e também utilizando essa outra estratégia:

const person = {
  name: "Matheus",
  age: 31,
  job: "Programmer"
}

console.log(person.name) // Matheus
console.log(person['name']) // Matheus

const objectKey = "name"

console.log(person[objectKey]) // Matheus

Neste caso temos um objeto e estamos imprimindo a chave name em todos os casos possíveis de acesso de chave

Note que o último é sobre o recurso extra da notação de colchetes que eu falei no começo do artigo

Podemos criar uma variável e colocar o nome da chave em string e acessar por meio dessa variável a propriedade, legal não é?

Isso deixa o nosso código mais dinâmico, podendo acessar basicamente qualquer coisa num objeto, sem precisar previamente saber o nome da chave

Porém para efeitos de acesso da propriedade, todos os recursos levam ao mesmo lugar, ou seja, não há diferença

Conclusão

No artigo de hoje você aprendeu a diferença de acessar propriedade de objeto com notação de ponto ou colchetes em JS

Utilizamos um recurso extra também, que permite acessar a propriedade de um objeto por meio de uma variável

Esta deve conter o nome da propriedade em string

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!