EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Objetos em JavaScript

Objetos são a estrutura de dados mais essencial em JavaScript. Pense neles como cartões de informações — a frente diz "Nome: Alice" e o verso diz "Idade: 20". Cada informação tem uma chave e um valor, formando um par chave-valor.

📖 Resumo

Criando Objetos Literais

Use chaves {} para escrever um objeto diretamente — esta é a abordagem mais comum:

HTML 
<script>
const student = {
  name: "Alice",
  age: 20,
  major: "Ciência da Computação"
};
console.log(student);
</script>

Pares chave-valor são separados por dois-pontos, e os pares são separados por vírgulas. Uma vírgula trailing após o último par é permitida (e conveniente para adições futuras).

Acessando Propriedades

Duas maneiras de acessar propriedades de objetos:

Método Sintaxe Quando Usar
Notação de ponto obj.nome Quando o nome da propriedade é um identificador válido
Notação de colchetes obj["nome"] Quando o nome contém caracteres especiais ou está armazenado em uma variável

A maior vantagem da notação de colchetes: você pode usar uma variável como chave.

HTML 
<script>
const key = "name";
console.log(student[key]); // Mesmo que student["name"]
</script>

Modificando e Adicionando Propriedades

Após criar um objeto, você pode modificar propriedades existentes ou adicionar novas a qualquer momento — mesmo que o objeto tenha sido declarado com const (const bloqueia a referência, não o conteúdo).

HTML 
<script>
student.age = 21;          // Modificar
student.grade = "Júnior";  // Adicionar nova propriedade
console.log(student);
</script>

Deletando Propriedades

Use o operador delete para remover uma propriedade completamente:

HTML 
<script>
delete student.grade;
console.log(student);
</script>

Após a deleção, acessar aquela propriedade retorna undefined.

Métodos

Uma função dentro de um objeto é chamada de método. Quando uma função se torna o valor de uma propriedade, o objeto pode "fazer coisas":

HTML 
<script>
const dog = {
  name: "Rex",
  bark() {
    return "Au! Eu sou " + this.name;
  }
};
console.log(dog.bark());
</script>

A Palavra-chave this

this se refere ao "objeto atual" — quem chama o método, this é aquele objeto. Este é um dos conceitos mais complicados do JavaScript: se um método for extraído e chamado separadamente, this não apontará mais para o objeto original.

HTML 
<script>
const bark = dog.bark;
console.log(bark()); // this não aponta mais para dog — pode ser window ou undefined
</script>

Construtores

Quando você precisa criar múltiplos objetos com a mesma estrutura, use uma função construtora:

HTML 
<script>
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    return "Olá, eu sou " + this.name;
  };
}

const p1 = new Person("Bob", 25);
const p2 = new Person("Charlie", 30);
console.log(p1.sayHi());
console.log(p2.sayHi());
</script>

new faz três coisas: cria um objeto vazio → define this para apontar para ele → retorna o objeto.

Object.keys / values / entries

Esses três métodos estáticos retornam arrays das chaves, valores e pares chave-valor de um objeto:

Método Retorna
Object.keys(obj) ["name", "age"]
Object.values(obj) ["Alice", 20]
Object.entries(obj) [["name","Alice"], ["age",20]]

Muito útil para iterar sobre objetos: Object.keys(obj).forEach(key => ...).

Exemplo: Criando um Objeto de Aluno e Exibindo Informações

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Fundamentos de Objetos</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .card { border: 2px solid #4a90d9; border-radius: 8px; padding: 16px; max-width: 360px; background: #f0f7ff; }
    .card h3 { margin: 0 0 8px; color: #4a90d9; }
    .card p { margin: 4px 0; }
  </style>
</head>
<body>
  <h2>Cartão de Informações do Aluno</h2>
  <div id="output"></div>
  <script>
    const student = {
      name: "Alice",
      age: 20,
      major: "Ciência da Computação",
      gpa: 3.7,
      introduce() {
        return `Meu nome é ${this.name}, tenho ${this.age} anos, curso ${this.major} com CRA de ${this.gpa}.`;
      }
    };

    const output = document.getElementById("output");
    output.innerHTML = `
      <div class="card">
        <h3>${student.name}</h3>
        <p>Idade: ${student.age}</p>
        <p>Curso: ${student.major}</p>
        <p>CRA: ${student.gpa}</p>
        <p><em>${student.introduce()}</em></p>
      </div>
    `;
  </script>
</body>
</html>
▶ Experimente

Exemplo: Notação de Ponto vs Notação de Colchetes

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Métodos de Acesso a Propriedades</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .result { background: #f5f5f5; padding: 12px; border-radius: 6px; margin: 8px 0; }
    code { background: #e0e0e0; padding: 2px 6px; border-radius: 3px; }
  </style>
</head>
<body>
  <h2>Comparação de Acesso a Propriedades</h2>
  <div id="output"></div>
  <script>
    const user = {
      name: "Bob",
      age: 28,
      "home-city": "São Paulo"
    };

    const key = "name";
    const results = [];

    results.push(`user.name → ${user.name}`);
    results.push(`user["name"] → ${user["name"]}`);
    results.push(`user[key]（key="name"） → ${user[key]}`);
    results.push(`user["home-city"] → ${user["home-city"]}`);

    document.getElementById("output").innerHTML = results
      .map(r => `<div class="result"><code>${r}</code></div>`)
      .join("");
  </script>
</body>
</html>
▶ Experimente

Exemplo: Adicionando, Modificando e Deletando Propriedades Dinamicamente

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Trabalhando com Propriedades</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    table { border-collapse: collapse; margin: 12px 0; }
    td, th { border: 1px solid #ccc; padding: 8px 14px; text-align: left; }
    th { background: #4a90d9; color: #fff; }
    .action { color: #888; font-style: italic; margin: 8px 0; }
  </style>
</head>
<body>
  <h2>Operações com Propriedades de Objetos</h2>
  <div id="output"></div>
  <script>
    const product = { name: "Notebook", price: 4999 };
    const log = [];

    function showState(label) {
      log.push({ label, snapshot: JSON.stringify(product) });
    }

    showState("Estado inicial");
    product.price = 4499;
    showState("Preço alterado para 4499");
    product.brand = "Lenovo";
    showState("Propriedade brand adicionada");
    delete product.brand;
    showState("Propriedade brand deletada");

    const output = document.getElementById("output");
    output.innerHTML = "<table><tr><th>Ação</th><th>Estado do Objeto</th></tr>" +
      log.map(r => `<tr><td>${r.label}</td><td>${r.snapshot}</td></tr>`).join("") +
      "</table>";
  </script>
</body>
</html>
▶ Experimente

Exemplo: Construtores e Object.keys/values/entries

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Construtores e Métodos de Objeto</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .section { margin: 16px 0; padding: 12px; background: #f9f9f9; border-radius: 6px; }
    .section h3 { margin-top: 0; color: #4a90d9; }
    ul { padding-left: 20px; }
    li { margin: 4px 0; }
  </style>
</head>
<body>
  <h2>Construtores e Métodos Estáticos de Objeto</h2>
  <div id="output"></div>
  <script>
    function Phone(brand, model, price) {
      this.brand = brand;
      this.model = model;
      this.price = price;
      this.showInfo = function() {
        return `${this.brand} ${this.model} — R$${this.price}`;
      };
    }

    const p1 = new Phone("Samsung", "Galaxy S24", 4999);
    const p2 = new Phone("Apple", "iPhone 15", 5999);

    const keys = Object.keys(p1);
    const values = Object.values(p1);
    const entries = Object.entries(p1);

    document.getElementById("output").innerHTML = `
      <div class="section">
        <h3>Objetos Criados com Construtor</h3>
        <p>${p1.showInfo()}</p>
        <p>${p2.showInfo()}</p>
      </div>
      <div class="section">
        <h3>Object.keys(p1)</h3>
        <ul>${keys.map(k => `<li>${k}</li>`).join("")}</ul>
      </div>
      <div class="section">
        <h3>Object.values(p1)</h3>
        <ul>${values.map(v => `<li>${v}</li>`).join("")}</ul>
      </div>
      <div class="section">
        <h3>Object.entries(p1)</h3>
        <ul>${entries.map(([k, v]) => `<li><code>${k}</code>: <code>${v}</code></li>`).join("")}</ul>
      </div>
    `;
  </script>
</body>
</html>
▶ Experimente

❓ Perguntas Frequentes

P：Posso modificar propriedades de um objeto declarado com const? R：Sim. const bloqueia a referência da variável (significando que ela sempre aponta para o mesmo objeto), não o conteúdo do objeto. Você pode adicionar, modificar e deletar propriedades livremente — mas não pode reatribuir com obj = {}.

P：Quando devo usar notação de colchetes em vez de notação de ponto? R：Quando o nome da propriedade contém espaços ou hífens (como "home-city"), ou quando o nome está armazenado em uma variável para acesso dinâmico, você deve usar colchetes. Para tudo mais, a notação de ponto é mais limpa e preferida.

P：O que acontece se eu esquecer new com um construtor? R：this apontará para o objeto global (ou undefined no modo estrito), fazendo com que as propriedades vão para o lugar errado ou lancem um erro. Esta é uma armadilha clássica — a sintaxe class do ES6 lida com isso automaticamente.

📝 Atividades

  1. Crie um objeto livro com propriedades titulo, autor e ano, além de um método getSummary() que retorna uma string como "titulo por autor, publicado em ano".
  2. Escreva um construtor Carro(marca, modelo, ano), use-o para criar 3 carros, depois use Object.keys para listar todos os nomes de propriedades de um carro.
  3. Adicione dinamicamente um método dirigir() a qualquer um dos carros acima (retorna "marca modelo está dirigindo"), depois chame-o. Observe como this se refere ao objeto atual dentro do método.
100%