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!nomeeracasã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 Analivro.autor = "Ana"👉 adiciona uma nova propriedadelivro.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
idadefoi 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!
deletenã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; // indefinidoMas nesse caso, a propriedade ainda vai existir no objeto — só estará "vazia".
✅ Quando usar delete?
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
deletecom 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?
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-equalfast-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); // SamsungAgora, 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! 💪🚀
Last updated