Adicionar propriedade de forma dinâmica a objeto em JavaScript

Neste artigo você vai aprender a como adicionar propriedade de forma dinâmica a objeto, ou seja, adicionar propriedade após o objeto criado

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

Em JavaScript, como em diversas outras linguagens, podemos inicializar um objeto com propriedades

Veja um exemplo:

const obj = {
  nome: "Matheus",
  idade: 30
}

console.log(obj.nome); // Matheus

No objeto acima adicionamos duas propriedades: nome e idade

Mas como podemos adicionar propriedades dinamicamente a objetos já criados?

Há diversas formas, veja as mais utilizadas:

const obj = {
	nome: "Matheus",
  idade: 30
}

console.log(obj.nome); // Matheus

const profissao = "Profissao";
const profissao_desc = "Programador";
const x = "trabalhando";

obj.novaProp = ["A", "B"];
obj[profissao] = profissao_desc;
obj[`esta_${x}`] = true;

console.log(obj);

Adicionamos aqui três novas propriedades

• Notação de ponto: a mais comum, onde o nome do objeto é seguido de um ponto e do nome da propriedade;
• Dinâmica com variável: onde uma variável dá o nome da propridade, precisamos colocar entre colchetes;
• Dinâmica com interpolação: unimos uma string com variável, formando assim uma nova propriedade

O resultado final do objeto é este:

{
  esta_trabalhando: true,
  idade: 30,
  nome: "Matheus",
  novaProp: ["A", "B"],
  Profissao: "Programador"
}

Conclusão

Neste artigo você aprendeu a adicionar propriedade de forma dinâmica a objeto com a linguagem JavaScript

Utilizamos diversas maneiras interessantes para criar as novas propriedades

Notações de ponto e cholchetes, além de uma união entre string e variável

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!