Javascript: guia sobre objetos

Neste artigo, você aprenderá a como criar e usar objetos em JavaScript de maneira simples e com muitos exemplos práticos.

O que é um Objeto?

JavaScript é uma linguagem baseada em objetos e, em JavaScript, quase tudo é um objeto ou age como um objeto. Portanto, para trabalhar eficientemente com JavaScript, precisamos entender como os objetos funcionam e como criar e usar nossos próprios objetos.

Um objeto JavaScript é simplesmente uma coleção de valores nomeados. Esses valores nomeados geralmente são chamados de propriedades do objeto. Se você se lembra do capítulo sobre arrays em JavaScript, um array é uma coleção de valores, onde cada valor tem um índice (uma chave numérica) que começa em zero e é incrementada em um para cada valor. Um objeto é semelhante a um array, mas a diferença é que você define as próprias chaves, como nome, idade, gênero, etc. Nas próximas seções, aprenderemos mais sobre objetos em detalhes.

Criando objetos

Um objeto pode ser criado usando chaves {} com uma lista opcional de propriedades. Uma propriedade é um par “chave: valor”, onde a chave (ou nome da propriedade) é sempre uma string e o valor (ou valor da propriedade) pode ser qualquer tipo de dados, como strings, números, booleanos ou tipos de dados complexos, como matrizes, funções e outros objetos. Além disso, as propriedades com funções como valores são geralmente chamadas de métodos para distingui-las de outras propriedades. Um objeto JavaScript típico pode ser assim:

var pessoa = {
nome: "Pedro",
idade: 28,
gênero: "Masculino",
exibirNome: function() {
alert(this.nome);
}
};

O exemplo acima cria um objeto chamado pessoa que possui três propriedades: nome, idade e gênero e um método chamado exibirNome(). O método exibirNome() exibe o valor de this.nome, que é resolvido como pessoa.nome. Essa é a maneira mais fácil e preferencial de criar um novo objeto em JavaScript, conhecida como sintaxe de literal de objeto.

Os nomes das propriedades geralmente não precisam ser cercados por aspas, a menos que sejam palavras reservadas ou contenham espaços ou caracteres especiais, ou se começarem com um número, como mostrado no exemplo a seguir:

var pessoa = {
"primeiro nome": "Pedro",
"idade atual": 28,
gênero: "Masculino"
};

Nota: A partir do ECMAScript 5, as palavras reservadas podem ser usadas como nomes de propriedade do objeto sem aspas. No entanto, é melhor evitar fazer isso para garantir maior compatibilidade.

Acessando as propriedades do objeto

Para acessar as propriedades de um objeto em JavaScript, você pode usar o operador ponto (.) ou colchetes ([]) para acessar uma propriedade específica.

A sintaxe para acessar uma propriedade usando o operador ponto é:

object.property

A sintaxe para acessar uma propriedade usando colchetes é:

object['property']

Por exemplo, considere o seguinte objeto:

const person = {
  name: 'John',
  age: 30
};

Para acessar a propriedade “name” do objeto “person”, você pode usar o operador ponto ou colchetes:

console.log(person.name); // Output: "John"
console.log(person['name']); // Output: "John"

Você também pode usar colchetes para acessar uma propriedade cujo nome é uma variável. Por exemplo:

console.log(person.name); // Output: "John"
console.log(person['name']); // Output: "John"

Percorrendo as propriedades do objeto

Existem algumas maneiras de percorrer as propriedades de um objeto em JavaScript.

A maneira mais comum é usar um loop for...in. Este loop itera sobre as chaves do objeto e permite que você acesse os valores dessas chaves.

Por exemplo, considere o seguinte objeto:

const person = {
  name: 'John',
  age: 30,
  gender: 'masculino'
};

Para percorrer as propriedades do objeto “person” usando um loop for...in, você pode fazer o seguinte:

for (const property in person) {
  console.log(`${property}: ${person[property]}`);
}

// Output:
// name: John
// age: 30
// gender: masculino

Outra maneira de percorrer as propriedades de um objeto é usar o método Object.keys(), que retorna um array com as chaves do objeto. Você pode então usar um loop for...of ou um loop forEach para percorrer as chaves e acessar os valores correspondentes.

Por exemplo:

const properties = Object.keys(person);

for (const property of properties) {
  console.log(`${property}: ${person[property]}`);
}

// Output:
// name: John
// age: 30
// gender: male

properties.forEach(property => {
  console.log(`${property}: ${person[property]}`);
});

// Output:
// name: John
// age: 30
// gender: male

Você também pode usar o método Object.entries(), que retorna um array de arrays, onde cada subarray contém uma chave e um valor. Então você pode usar um loop for...of para percorrer os pares chave-valor.

Por exemplo:

for (const [property, value] of Object.entries(person)) {
  console.log(`${property}: ${value}`);
}

// Output:
// name: John
// age: 30
// gender: male

Propriedades do objeto de configuração

Da mesma forma, você pode definir novas propriedades ou atualizar propriedades existentes usando notação de ponto (.) ou colchetes ([]), conforme mostrado no exemplo a seguir:

var pessoa = {
nome: "Pedro",
idade: 28,
gênero: "Masculino"
};

// Definindo uma nova propriedade
pessoa.país = "Estados Unidos";
document.write(pessoa.país); // Saída: Estados Unidos

pessoa["email"] = "[email protected]";
document.write(pessoa.email); // Saída: [email protected]

// Atualizando propriedade existente
pessoa.idade = 30;
document.write(pessoa.idade); // Saída: 30

pessoa["nome"] = "Peter Parker";
document.write(pessoa.nome); // Saída: Peter Parker

Excluir propriedade do objeto

O operador delete pode ser usado para remover completamente uma propriedade de um objeto. Excluir é a única maneira de realmente excluir uma propriedade de um objeto. Definir uma propriedade como indefinida ou nula altera apenas o valor da propriedade. Ele não remove a propriedade do objeto.

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

// Excluindo propriedade
delete person.age;
alert(person.age); // Saídas: indefinido

Nota: o operador de exclusão exclui apenas propriedades de objeto ou elementos de matriz. Não tem efeito em variáveis ​​ou funções declaradas. No entanto, você deve evitar usar o operador delete para excluir elementos do array, porque ele não altera o comprimento do array, apenas deixa um buraco no array.

Chamando os métodos do objeto

Você pode acessar o método de um objeto da mesma forma que acessaria as propriedades – usando a notação de ponto ou usando a notação de colchete. Aqui está um exemplo:

var pessoa = {
nome: "Pedro",
idade: 28,
gênero: "Masculino",
exibirNome: function() {
alert(this.nome);
}
};

pessoa.exibirNome(); // Saída: Pedro
pessoa["exibirNome"](); // Saída: Pedro

Manipulação por valor vs. referência

Objetos JavaScript são tipos de referência, o que significa que, quando você faz cópias deles, na verdade está apenas copiando as referências a esse objeto. Valores primitivos, como strings e números, são atribuídos ou copiados como um valor inteiro. Para entender melhor tudo isso, vamos conferir o exemplo a seguir:

var mensagem = "Olá, mundo!";

var cumprimento = mensagem; // Atribuir variável de mensagem a uma nova variável
cumprimento = "Oi, pessoal!";

document.write(mensagem); // Saída: Olá, mundo!
document.write(cumprimento); // Saída: Oi, pessoal!

No exemplo acima, fizemos uma cópia da variável mensageme alteramos o valor dessa cópia (ou seja, a variável cumprimento). As duas variáveis ​​permanecem distintas e separadas. Mas, se fizermos a mesma coisa com um objeto, obteremos um resultado diferente, como você vê no exemplo a seguir:

var pessoa = {
nome: "Pedro",
idade: 28,
gênero: "Masculino"
};

var usuário = pessoa; // Atribuir variável de pessoa a uma nova variável
usuário.nome = "Harry";

document.write(pessoa.nome); // Saída: Harry
document.write(usuário.nome); // Saída: Harry

Você pode ver claramente que qualquer alteração feita na variável de usuário também altera a variável de pessoa; isso acontece porque ambas as variáveis ​​se referem ao mesmo objeto. Portanto, simplesmente copiar um objeto não o clona, ​​ele copia uma referência a esse objeto.