JavaScript: desvende objetos de uma vez por todas!

Bora desbloquear essa conquista juntos?

O que é um objeto em JavaScript?

// Este é o nosso dev, o Diego!
let devProfile = {
  nome: "Diego Fernandes",
  apelido: "Diegão",
  level: 28,
  techs: ["JavaScript", "React"],
  ativo: true
};

Valor vs. referência

// Passagem por VALOR (Primitivos)
let meuLevel = 50;
let levelDoAmigo = meuLevel; // Copiou o valor 50

levelDoAmigo = 55; // Alterou a cópia

console.log(meuLevel); // Saída: 50 (O original não mudou!)
console.log(levelDoAmigo); // Saída: 55

// Passagem por REFERÊNCIA (Objetos)
let meuDev = { nome: "Rodrigo", level: 80 };
let devCompanheiro = meuDev; // Copiou a REFERÊNCIA (a "chave da casa")

devCompanheiro.level = 99; // Alterou o objeto original através da referência

console.log(meuDev.level); // Saída: 99 (O original MUDOU!)
console.log(devCompanheiro.level); // Saída: 99

Criando e moldando seus objetos

const pessoa = {
  nome: "Isabela",
  idade: 34
};

console.log(devProfile.nome); // Saída: Diego Fernandes
console.log(devProfile.level); // Saída: 28

// Acesso dinâmico
let propriedadeParaAcessar = "apelido";
console.log(devProfile[propriedadeParaAcessar]); // Saída: "Diegão"

// Se tentássemos devProfile.propriedadeParaAcessar, o JS procuraria
// por uma chave chamada "propriedadeParaAcessar", e não o valor da variável.
// O resultado seria `undefined`.

// Propriedade com nome "inválido"
let relatorio = {
  "data de criação": "2024-07-26",
  "id-do-usuario": "abc-123"
};

console.log(relatorio["data de criação"]); // Saída: 2024-07-26

// Vamos usar nosso devProfile
console.log(devProfile);
// { nome: 'Diego Fernandes', apelido: 'Diegão',... }

// 1. Adicionando uma nova propriedade
devProfile.cidade = "São Paulo";
console.log(devProfile.cidade); // Saída: "São Paulo"

// 2. Alterando uma propriedade existente
devProfile.level = 36;
console.log(devProfile.level); // Saída: 36

// 3. Removendo uma propriedade
delete devProfile.ativo;
console.log(devProfile.ativo); // Saída: undefined

function Dev(nome, level, techs) {
  this.nome = nome;
  this.level = level;
  this.techs = techs;
}

// Agora, vamos usar nosso molde para criar novos devs!
let devMayk = new Dev("Mayk Brito", 30, "JavaScript");
let devLais = new Dev("Laís Frigerio", 28, "JavaScript");

console.log(devMayk.nome); // Saída: Mayk Brito
console.log(devLais.techs); // Saída: JavaScript

Propriedades

let devProfileAvancado = {
  nome: "Fatima",
  level: 40,
  contato: { // <-- Objeto aninhado
    email: "fatima@gmail.com",
    github: "fatima_example",
    linkedin: "/fatiminha"
  },
  techStack: { // <-- Outro objeto aninhado
	  frontend: ["HTML", "CSS", "React"],
	  backend: ["Node.js", "Elixir"],
	  mobile: ["React Native"]
	}
};

// Para acessar as propriedades aninhadas, simplesmente encadeamos a notação de ponto:
console.log(devProfileAvancado.contato.github); // Saída: "fatima_example"
console.log(devProfileAvancado.techStack.backend); // Saída: ["Node.js", "Elixir"]

let relatórioVendas = {
  "total de vendas": 151278.50,
  "cliente-id": "xyz-987-abc",
  "região": "Nordeste",
  "itens comprados": ["item-1", "item-2"]
};

// Acessar com notação de ponto aqui daria erro de sintaxe!
// Usamos colchetes com o nome da chave como uma string.
console.log(relatórioVendas["total de vendas"]); // Saída: 151278.50
console.log(relatórioVendas["cliente-id"]); // Saída: "xyz-987-abc"

Métodos

Quem sou eu nesse objeto?

let devFernanda = {
  nome: "Fernanda",
  level: 25,
  xp: 450,
  xpParaProximoNivel: 500,

  ganharXp: function(pontos) {
    this.xp += pontos;
    console.log(`${this.nome} ganhou ${pontos} de XP! XP atual: ${this.xp}`);
    this.verificarSeSubiuDeNivel();
  },

  verificarSeSubiuDeNivel: function() {
    if (this.xp >= this.xpParaProximoNivel) {
      this.level++;
      this.xp = this.xp - this.xpParaProximoNivel;
      this.xpParaProximoNivel *= 1.5; // Aumenta a dificuldade para o próximo nível
      console.log(`BOOM! 🚀 ${this.nome} subiu para o nível ${this.level}!`);
    }
  }
};

devFernanda.ganharXp(100);
// Saída: "Fernanda ganhou 100 de XP! XP atual: 550"
// Saída: "BOOM! 🚀 Fernanda subiu para o nível 26!"

console.log(devFernanda.level); // Saída: 26
console.log(devFernanda.xp); // Saída: 50

Ferramentas de inspeção do Object

• Object.keys(obj): Retorna um array com todas as chaves (nomes das propriedades) do objeto.

• Object.values(obj): Retorna um array com todos os valores das propriedades.

• Object.entries(obj): O mais poderoso! Retorna um array de arrays, onde cada subarray é um par [chave, valor].

const devProfile = {
  nome: "Diego Fernandes",
  apelido: "Diegão",
  level: 28,
  techs: ["JavaScript", "React"]
};

// Pegando só as chaves
const chaves = Object.keys(devProfile);
console.log(chaves); // Saída: ["nome", "apelido", "level", "techs"]

// Pegando só os valores
const valores = Object.values(devProfile);
console.log(valores); // Saída: ["Diego Fernandes", "Diegão", 28, ["JavaScript", "React"]]

// Pegando os pares [chave, valor]
const entradas = Object.entries(devProfile);
console.log(entradas);
// Saída: [
//  ["nome", "Diego Fernandes"],
//  ["apelido", "Diegão"],
//  ["level", 28],
//  ["techs", ["JavaScript", "React"]]
// ]

// Usando Object.entries para listar tudo de forma bonita
Object.entries(devProfile).forEach(([chave, valor]) => {
  console.log(`${chave}: ${valor}`);
});

Sua jornada apenas começou!

• Objetos são pacotes inteligentes que organizam dados (propriedades) e ações (métodos).

• A diferença entre valor e referência é crucial e agora você sabe como evitar bugs comuns.

• Você pode criar objetos com literais {} para casos únicos e usar funções construtoras como moldes para criar múltiplos objetos.

• O this não é um bicho de sete cabeças, mas sim a chave de contexto que dá poder aos seus métodos.

• Existem ferramentas modernas como Object.keys, values e entries para inspecionar seus objetos como um profissional.