Neste artigo você vai aprender a como adicionar uma propriedade a um objeto como uma variável, ou seja, criar propriedades dinâmicas em objetos JavaScript

Adicionar uma propriedade a um objeto com uma variável capa

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

O que faremos neste artigo é conhecido também como propriedade dinâmica

Este recurso consistem em adicionar uma propriedade em um objeto JavaScript por meio de uma variável

Ou seja, o nome da variável será o nome da chave do objeto

Veja como você pode fazer isso em código:

const customProperty = "age"
const age = 31;

const myObject = {}

myObject[customProperty] = age

console.log(myObject.age) // 31 

Veja que definimos a propriedade age com o valor da variável customProperty, e agora age pode ser acessada normalmente no objeto

Há uma outra sintaxe mais moderna, que foi desenvolvida na versão ES6 da linguagem

Confira o código:

const customProperty = "age"
const age = 31;

const myObject = {
	[customProperty]: age
}

console.log(myObject.age) // 31 

Conseguimos embutir a propriedade na criação do objeto, isso nos poupa algumas linhas e deixa o código mais moderno

Opte pela alternativa que se encaixa no seu projeto, e crie as suas propriedades dinâmicas

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como adicionar uma propriedade a um objeto com uma variável

Ou seja, dinamicamente a propriedade ganha o nome do valor da variável

E podemos atribuir um valor a ela, por meio de um valor de uma outra variável

Isso torna nosso código mais flexível, e o recurso é conhecido como propriedade dinâmica

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários