Aprenda a construir e utilizar objetos no JavaScript, uma estrutura fundamental para gerenciar conjuntos de dados de forma eficiente.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Nesta aula, você irá aprender como funcionam os objetos no JavaScript, sua importância e como utilizá-los para otimizar seus códigos.
Dessa forma, não será necessário criar diversas variáveis para armazenar as informações desejadas, pois poderá definir todas elas dentro dos objetos.
Além disso, mostrarei como trazer as informações dos seus objetos no javascript de forma dinâmica, sem precisar ficar escrevendo cada valor manualmente.
Vamos colocar em prática! Você pode usar o editor com qual está mais familiarizado ou pode aprender como instalar e configurar o mesmo editor que estarei utilizando ao longo desta aula, o Visual Studio Code.
Para começar nosso código, vamos criar o nosso arquivo e definir algumas variáveis no início dele.
const idade = 27;
const nome = 'Alfredo';
const endereco = 'Rua que sobe e desce';
const numeroIdentificador = 2135432;Antes de declarar nossas variáveis, utilizamos o termo const, que vem de constante, indicando que não iremos manipular o conteúdo dessas variáveis posteriormente no nosso código.
No total, criamos quatro variáveis. No entanto, se todas elas estão relacionadas aos dados de uma mesma pessoa, faz mais sentido agrupá-las em uma coisa só, ao invés de mantê-las separadas. É aí que entram os objetos no JavaScript.
Vamos entender como funciona a estrutura dos objetos no JavaScript. Vamos definir nosso objeto utilizando as mesmas informações que usamos para criar as nossas variáveis.
const dadosAlfredo = {
nome: 'Alfredo',
idade: 27,
endereco: 'Rua que sobe e desce',
numeroIdentificador: 2135432,
}Repare que, assim como nas variáveis, também definimos o termo const antes de criar nosso objeto. No entanto, ao invés de atribuir apenas uma única informação, passamos um conjunto de pares de informações delimitadas por chaves ({ }).
Esses pares de informações são a estrutura dos nossos objetos no JavaScript. É através deles que conseguimos relacionar uma chave, que representa um campo, a um valor. A chave e o valor são separados por dois pontos (:) e, ao final de cada par, utilizamos uma vírgula (,) para separá-los.
É por isso que o uso dos objetos no JavaScript é tão importante. Eles nos permitem encapsular todo um conjunto de dados relacionados a uma mesma entidade em uma única estrutura.
Agora vou te ensinar como utilizar texto entre crases no JavaScript e qual a sua utilidade.
Primeiro, vamos executar a instrução console.log(), que escreve na tela o que passamos entre os parênteses, utilizando uma frase comum entre aspas simples.
console.log('Escrever na tela esse texto aqui')
Funcionou perfeitamente. Mas e se quisermos exibir na tela todos os dados do senhor Alfredo, os que definimos dentro do nosso objeto? Para fazer isso, podemos utilizar o texto entre crases (`) em vez de aspas.
Ao colocar nosso texto entre crases, o JavaScript nos permite utilizar a seguinte estrutura: “cifrão” seguido “abre e fecha chaves” (${}). Com isso, podemos inserir códigos e valores dinâmicos dentro do nosso texto.
console.log(
`Esses são os dados do cidadão: nome -> ${dadosAlfredo.nome}, idade -> ${dadosAlfredo.idade}, endereço -> ${dadosAlfredo.endereco}`
);Note que passamos os dados dentro das chaves da seguinte forma: “dadosAlfredo”, que é o nome do nosso objeto, seguido de ponto (.), e então do “nome do campo” que queremos acessar. Ao executarmos nosso código teremos:
Isso nos permite acessar e exibir as informações que estão dentro dos nossos objetos de forma mais prática. Pois, se em algum momento alterarmos qualquer uma dessas informações dentro do nosso objeto, elas também serão atualizadas automaticamente no texto.
Por exemplo, vamos substituir o nome dentro do nosso objeto por “Julio” e a idade por “28”. Se executarmos o mesmo código acima, teremos como resultado:
Nessa aula, eu te apresentei o que são os objetos no JavaScript, para que eles servem e como podemos utilizá-los na prática para construir e gerenciar um conjunto de dados em um só lugar.
É fundamental compreender bem os objetos no JavaScript, pois eles se tornarão uma estrutura muito utilizada em seus estudos, aprendizados e trabalhos. Portanto, pratique, estude e se familiarize com eles.
Além disso, nessa aula, você também aprendeu como fazer uso das crases para trazer e exibir informações dos seus objetos de forma dinâmica. Esse conhecimento também irá te auxiliar muito e tornar seus códigos mais otimizados e eficientes.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador