Objetos JavaScript

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.