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.propertyA 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: masculinoOutra 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: maleVocê 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: malePropriedades 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 ParkerExcluir 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: indefinidoNota: 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: PedroManipulaçã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: HarryVocê 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.
