Introdução
Bem-vindo ao laboratório sobre Objetos JavaScript. Objetos são blocos de construção fundamentais em JavaScript, usados para armazenar coleções de dados relacionados e entidades mais complexas. Eles consistem em pares chave-valor, onde as chaves são strings (ou Symbols) e os valores podem ser de qualquer tipo de dado, incluindo outros objetos ou funções.
Neste laboratório, você aprenderá a:
- Criar um objeto JavaScript usando a sintaxe de literal de objeto.
- Adicionar propriedades (pares chave-valor) a um objeto.
- Acessar e atualizar os valores das propriedades de um objeto.
- Adicionar novas propriedades a um objeto existente.
Você realizará todo o seu trabalho no arquivo script.js. Para ver a saída do seu código, você precisará abrir o console do desenvolvedor do navegador. Você pode fazer isso navegando até a aba Web 8080 e abrindo as ferramentas do desenvolvedor (geralmente clicando com o botão direito e selecionando "Inspecionar", em seguida, clicando na aba "Console").
Vamos começar!
Criar literal de objeto com chaves curly braces
Nesta etapa, você criará seu primeiro objeto JavaScript. A maneira mais simples de criar um objeto é usando a sintaxe de literal de objeto, que é um par de chaves curly {}.
Primeiro, localize o arquivo script.js no explorador de arquivos no lado esquerdo do seu WebIDE. Clique nele para abri-lo no editor.
Agora, adicione o seguinte código ao script.js para declarar uma variável constante chamada car e atribuir um objeto vazio a ela. Também usaremos console.log() para imprimir o objeto no console para verificar sua criação.
const car = {};
console.log(car);
Após adicionar o código, salve o arquivo. Para ver o resultado, clique na aba Web 8080. Abra o console do desenvolvedor (Clique com o botão direito -> Inspecionar -> Console). Você deverá ver um objeto vazio {} impresso no console.
Adicionar pares chave-valor ao objeto
Um objeto vazio não é muito útil. Objetos servem para armazenar dados, que adicionamos como propriedades. Uma propriedade é um par chave-valor. A chave é o nome da propriedade (uma string), e o valor é o dado associado a essa chave.
Nesta etapa, você adicionará propriedades ao objeto car diretamente dentro das chaves curly durante sua criação. Vamos definir algumas propriedades para o nosso carro: sua marca, modelo e ano.
Modifique o código em script.js para que fique assim:
const car = {
make: "Toyota",
model: "Camry",
year: 2021
};
console.log(car);
Aqui, make, model e year são as chaves, enquanto 'Toyota', 'Camry' e 2021 são seus valores correspondentes. Observe que os valores de string são delimitados por aspas simples.
Salve o arquivo e verifique novamente o console do desenvolvedor na aba Web 8080. Agora você verá o objeto impresso com suas propriedades.
Acessar propriedade com notação de ponto
Uma vez que você tenha um objeto com propriedades, você frequentemente precisará recuperar o valor de uma propriedade específica. A maneira mais comum de fazer isso é com a notação de ponto (.). A sintaxe é nomeDoObjeto.nomeDaPropriedade.
Nesta etapa, você acessará o model do objeto car e o imprimirá no console.
Adicione a seguinte linha ao final do seu arquivo script.js. Seu código existente deve permanecer.
const car = {
make: "Toyota",
model: "Camry",
year: 2021
};
console.log(car);
// Acessa e exibe a propriedade model
console.log(car.model);
Salve o arquivo e atualize a aba Web 8080. No console do desenvolvedor, você agora verá duas linhas de saída: o objeto car completo, seguido pela string Camry.
Atualizar atribuição de valor de propriedade
Os dados em um objeto não são fixos. Você pode facilmente alterar o valor de uma propriedade existente usando o operador de atribuição (=). Isso é feito da mesma forma que você atribuiria um valor a uma variável regular.
Nesta etapa, vamos atualizar o year do nosso car de 2021 para 2022.
Adicione as seguintes linhas ao final do seu arquivo script.js. Atualizaremos a propriedade e, em seguida, exibiremos o objeto inteiro novamente para ver a mudança.
const car = {
make: "Toyota",
model: "Camry",
year: 2021
};
// Atualiza a propriedade year
car.year = 2022;
console.log(car);
Para maior clareza, você pode remover as instruções console.log anteriores, mas isso não é obrigatório. Após salvar o arquivo, verifique o console na aba Web 8080. A saída agora mostrará o objeto car com o year atualizado para 2022.
Adicionar nova propriedade a objeto existente
Objetos em JavaScript são dinâmicos, o que significa que você pode adicionar novas propriedades a eles a qualquer momento após terem sido criados. A sintaxe é a mesma de atualizar uma propriedade: use a notação de ponto com o novo nome da propriedade e atribua um valor a ela.
Nesta etapa final, você adicionará uma nova propriedade color ao objeto car.
Adicione as seguintes linhas ao final do seu arquivo script.js. Isso adicionará a nova propriedade e, em seguida, exibirá o objeto para confirmar a adição.
const car = {
make: "Toyota",
model: "Camry",
year: 2021
};
car.year = 2022;
// Adiciona uma nova propriedade color
car.color = "blue";
console.log(car);
Salve o arquivo e verifique o console do desenvolvedor uma última vez. O objeto car será exibido agora com quatro propriedades: make, model, year e a recém-adicionada color.
Resumo
Parabéns por completar o laboratório de Objetos JavaScript! Você aprendeu com sucesso as operações essenciais para trabalhar com uma das estruturas de dados mais importantes em JavaScript.
Neste laboratório, você praticou:
- Criar um objeto usando a sintaxe literal (
{}). - Popular um objeto com pares chave-valor iniciais.
- Acessar valores de propriedade usando a notação de ponto (
objeto.propriedade). - Atualizar o valor de uma propriedade existente.
- Adicionar uma nova propriedade a um objeto dinâmico.
Compreender objetos é crucial para qualquer desenvolvedor JavaScript, pois eles são usados em todos os lugares, desde o armazenamento simples de dados até a arquitetura complexa de aplicativos. Continue praticando esses conceitos para construir uma base sólida em programação JavaScript.
