7.8.1 - Classes e Objetos

🧠 Aprofundando em Objetos em JavaScript

🧠 Aprofundando em Objetos em JavaScript

Agora que você já tem uma noção básica do que é um objeto, vamos explorar mais a fundo esse conceito superimportante no JavaScript. Pronto(a)? Vem comigo! 🚀

---

🎯 Por que Objetos são TÃO Importantes?

Objetos são estruturas fundamentais em JavaScript. Eles permitem que a gente organize dados e comportamentos relacionados em um só lugar.

Imagine organizar todas as informações de um jogo, como personagens, pontuação, cenário... Tudo isso pode ser feito com objetos! 🕹️✨

---

🧱 Objeto Literal

A forma mais comum de criar um objeto é usando a sintaxe literal. Veja só:

const cachorro = {
  nome: "Rex",
  raca: "Labrador",
  latir: function() {
    console.log("Au au!");
  }
};

cachorro.latir(); // Au au!

• nome e raca são propriedades (variáveis).

• latir é um método (função).

🔎 Propriedades = variáveis dentro de um objeto 🔧 Métodos = funções dentro de um objeto

---

🕹️ Quando Usar um Objeto Literal?

Use quando você precisa:

• Guardar um conjunto de dados com nomes (ex: nome, idade)

• Juntar dados + ações num mesmo lugar

• Criar uma estrutura simples e direta

---

🧾 Notação de Ponto e Notação de Colchetes

Para acessar dados de um objeto, você pode usar:

🔸 Notação de Ponto:

console.log(cachorro.nome); // Rex

🔹 Notação de Colchetes:

console.log(cachorro["raca"]); // Labrador

📌 Dica: Use colchetes quando o nome da propriedade for dinâmico ou tiver espaços/caracteres especiais.

---

📦 Namespace e Sub-Namespaces

Um namespace é como uma caixinha onde você agrupa informações relacionadas. Em JavaScript, objetos podem ser usados como namespaces.

const Jogo = {
  personagem: {
    nome: "Luna",
    nivel: 5
  },
  iniciar: function() {
    console.log("Jogo iniciado!");
  }
};

console.log(Jogo.personagem.nome); // Luna

🔹 Jogo é um namespace 🔸 Jogo.personagem é um sub-namespace!

Namespaces ajudam a organizar melhor o código e evitar conflitos de nomes.

---

🧬 Objetos dentro de Objetos

Sim, um objeto pode ter outro objeto dentro dele! Isso é ótimo para organizar dados complexos:

const aluno = {
  nome: "Carlos",
  endereco: {
    rua: "Rua das Flores",
    numero: 123
  }
};

console.log(aluno.endereco.rua); // Rua das Flores

---

🛠️ Atualizando e Adicionando Propriedades/Métodos

Você pode mudar ou adicionar coisas em objetos a qualquer momento:

const livro = {
  titulo: "Aprendendo JS"
};

livro.autor = "Ana";
livro.mostrarInfo = function() {
  console.log(`${this.titulo} por ${this.autor}`);
};

livro.mostrarInfo(); // Aprendendo JS por Ana

• livro.autor = "Ana" 👉 adiciona uma nova propriedade

• livro.mostrarInfo = function... 👉 adiciona um novo método

---

🧽 Observação: Como remover propriedades ou métodos de um objeto?

Às vezes, a gente precisa limpar o que não é mais necessário. Em JavaScript, isso é feito com a palavra-chave delete. 🗑️

---

🧹 Removendo uma propriedade

const aluno = {
  nome: "Carla",
  idade: 19,
  curso: "Desenvolvimento Web"
};

delete aluno.idade;

console.log(aluno);
// 👉 { nome: "Carla", curso: "Desenvolvimento Web" }

🔺 A propriedade idade foi completamente removida do objeto — como se nunca tivesse existido!

---

❌ Também funciona com métodos

const calculadora = {
  somar: function (a, b) {
    return a + b;
  },
  subtrair: function (a, b) {
    return a - b;
  }
};

delete calculadora.subtrair;

console.log(calculadora);
// 👉 { somar: ƒ }

---

⚠️ Cuidado!

• delete não funciona com variáveis locais (só com propriedades de objetos).

• Não remove propriedades herdadas por protótipos (você precisa deletar da origem).

• Não é ideal para remover propriedades em estruturas muito complexas ou que exigem performance.

---

💡 Dica bônus

Se você só quiser "esvaziar" o valor sem remover a propriedade:

aluno.curso = null;     // valor nulo
aluno.curso = undefined; // indefinido

Mas nesse caso, a propriedade ainda vai existir no objeto — só estará "vazia".

---

✅ Quando usar delete?

• Quando precisar remover dados sensíveis

• Quando for limpar objetos antes de enviar para APIs

• Quando não quiser mais que uma propriedade exista

Use delete com cuidado e sempre verifique o estado do seu objeto depois. É uma ferramenta poderosa, mas como toda ferramenta... ⚒️ pode quebrar coisas se usada sem atenção!

---

🧍‍♂️ O que é this?

A palavra this se refere ao objeto atual onde o código está sendo executado.

const pessoa = {
  nome: "Joana",
  dizerNome: function() {
    console.log(this.nome);
  }
};

pessoa.dizerNome(); // Joana

🧠 Pense no this como "eu mesmo(a)". 👉 Dentro do método dizerNome, this.nome é como dizer "meu nome".

---

🗂️ Objetos são como Arrays Associativos

📌 Em JavaScript, objetos funcionam como arrays associativos — estruturas que ligam chaves (nomes) a valores.

const mochila = {
  caderno: 2,
  caneta: 5,
  garrafa: 1
};

Não usamos índices numéricos como em arrays ([0], [1]...), mas sim nomes!

---

🔥 Exemplos de Objetos Nativos no JavaScript

Vários recursos que você usa em JavaScript são objetos ou criam objetos:

const texto = "banana,maçã,laranja";
const frutas = texto.split(",");

console.log(frutas); // ["banana", "maçã", "laranja"]

Aqui, split() é um método do objeto String. Outros exemplos incluem:

• Array → meuArray.length, push(), pop()

• Math → Math.random(), Math.round()

• Date → new Date()

• console → console.log()

---

🔍 Observação: Comparando objetos em JavaScript

Comparar objetos pode parecer simples… mas em JavaScript, há um detalhe importante: 🔗 Objetos são comparados por referência, não por conteúdo!

---

🤔 O que isso significa?

Quando você compara dois objetos com === ou ==, o JavaScript verifica se eles são o mesmo objeto na memória, não se têm os mesmos dados.

---

💡 Exemplo claro:

const a = { nome: "Luna" };
const b = { nome: "Luna" };

console.log(a === b); // false ❌

Mesmo tendo o mesmo conteúdo, são dois objetos diferentes guardados em lugares diferentes da memória.

---

✅ Mas se compararmos um objeto com ele mesmo…

const a = { nome: "Luna" };
const b = a;

console.log(a === b); // true ✅

Agora a e b apontam para o mesmo local na memória, então são considerados iguais.

Se você fizer obj1 === obj2, o JavaScript só vai dizer “sim” se for exatamente o mesmo objeto. Se quiser comparar o conteúdo, precisa usar uma abordagem diferente!

---

🧠 Como comparar o conteúdo de dois objetos?

Você pode transformar os objetos em strings JSON e comparar:

const obj1 = { nome: "João", idade: 20 };
const obj2 = { nome: "João", idade: 20 };

const iguais = JSON.stringify(obj1) === JSON.stringify(obj2);
console.log(iguais); // true ✅

⚠️ Atenção: Isso só funciona se as chaves estiverem na mesma ordem.

---

🛠️ Dica extra

Para comparar objetos de forma mais robusta, com verificação de valores e chaves, você pode usar bibliotecas como:

• lodash.isEqual()

• deep-equal

• fast-deep-equal

---

🧪 Pratique! Crie Seu Próprio Objeto

const celular = {
  marca: "Samsung",
  modelo: "Galaxy A10",
  ligar: function() {
    console.log("Ligando...");
  }
};

celular.ligar(); // Ligando...
console.log(celular.marca); // Samsung

Agora, tente adicionar uma nova propriedade chamada cor, e um método chamado mostrarModelo.

---

🧭 Conclusão

Objetos são como caixinhas mágicas 🧰 que guardam tudo o que seu programa precisa: dados, ações, organização! Entender e dominar objetos vai te deixar muito mais preparado(a) para criar sites, apps, jogos e muito mais! 💪🚀