6.1 Criando objetos
Objetos são um dos principais tipos de dados no JavaScript e são amplamente usados para armazenar e gerenciar dados. Um objeto é uma coleção de propriedades, onde cada propriedade consiste em uma chave (nome) e um valor. Nesta aula, vamos explorar a criação de objetos, assim como o acesso às suas propriedades e métodos.
1. Literal de objeto
A forma mais comum de criar um objeto em JavaScript é usando o literal de objeto.
Neste exemplo, criamos um objeto person com quatro propriedades: name, age, isStudent e greet.
let person = {
name: 'John',
age: 30,
isStudent: false,
greet: function() {
return 'Hello!';
}
};
2. Construtor Object
Objetos também podem ser criados usando o construtor Object().
Este método é equivalente à criação de um objeto usando o literal de objeto, mas é mais verboso:
let person = new Object();
person.name = 'John';
person.age = 30;
person.isStudent = false;
person.greet = function() {
return 'Hello!';
};
3. Função Construtora
A função construtora permite criar múltiplas instâncias de objetos com mesmas propriedades e métodos.
Neste exemplo, a função construtora Person() é usada para criar os objetos john e jane com mesmas propriedades e métodos:
function Person(name, age, isStudent) {
this.name = name;
this.age = age;
this.isStudent = isStudent;
this.greet = function() {
return 'Hello!';
};
}
let john = new Person('John', 30, false);
let jane = new Person('Jane', 25, true);
4. Método Object.create()
O método Object.create() cria um novo objeto e já lhe atribui um protótipo: outro objeto onde o novo vai procurar as propriedades e métodos que não tem por conta própria.
Neste exemplo, o objeto john é criado com base no protótipo personPrototype:
let personPrototype = {
greet: function() {
return 'Hello!';
}
};
let john = Object.create(personPrototype);
john.name = 'John';
john.age = 30;
john.isStudent = false;
console.log(john.name); // Exibe: John
console.log(john.greet()); // Exibe: Hello!
Repare na última linha. O objeto john não tem um método greet próprio: só escrevemos nele name, age e isStudent. Ainda assim, john.greet() funciona: ao acessar uma propriedade, o JavaScript procura primeiro no próprio objeto e, se não encontrar, sobe até o protótipo. Esse caminho de busca se chama cadeia de protótipos.
A diferença entre uma propriedade própria e uma herdada é fácil de ver:
console.log(john.hasOwnProperty('name')); // Exibe: true
console.log(john.hasOwnProperty('greet')); // Exibe: false
console.log('greet' in john); // Exibe: true
hasOwnProperty() responde à pergunta «o próprio objeto tem esta propriedade?», enquanto o operador in responde «dá para chegar a esta propriedade, nem que seja pela cadeia de protótipos?». Daí as respostas diferentes para greet.
Um ponto importante: as propriedades do protótipo não são copiadas para o novo objeto. personPrototype continua sendo um objeto separado, e john apenas o referencia. Por isso um mesmo protótipo pode ser compartilhado por centenas de objetos, com greet guardado na memória uma única vez. Compare com a função construtora do exemplo 3: lá, cada objeto criado ganhava sua própria cópia de greet.
O segundo argumento: propriedades com configurações
Object.create() aceita um segundo argumento, opcional: um objeto que descreve as propriedades a serem criadas de imediato. Elas não são definidas por um simples valor, mas por um descritor — um conjunto de configurações:
value— o valor da propriedade em siwritable— se o valor pode ser alterado (por padrãofalse)enumerable— se a propriedade aparece emfor...ineObject.keys()(por padrãofalse)configurable— se a propriedade pode ser excluída ou ter suas configurações alteradas (por padrãofalse)get/set— um getter e um setter no lugar de um valor comum. O getter dispara na leitura; o setter, na escrita
Juntando tudo:
let john = Object.create(personPrototype, {
name: {
value: 'John',
writable: true, // o valor pode ser alterado
enumerable: true // propriedade visível em for...in
},
id: {
value: 1001,
writable: false, // somente leitura
enumerable: true
},
info: {
enumerable: true,
get: function() { // getter: dispara na leitura
return this.name + ' #' + this.id;
},
set: function(value) { // setter: dispara na escrita
this.name = value;
}
}
});
console.log(john.info); // Exibe: John #1001
john.name = 'Johnny'; // funciona
john.id = 2002; // não faz nada, silenciosamente
console.log(john.info); // Exibe: Johnny #1001
Repare: os três sinalizadores são false por padrão, então, ao usar o segundo argumento, quase sempre é preciso defini-los explicitamente. Atribuir a uma propriedade com writable: false falha silenciosamente no modo normal e lança um TypeError no modo estrito ('use strict').
Outro caso útil é Object.create(null). Um objeto assim não tem protótipo algum: nem toString(), nem hasOwnProperty(), nem qualquer outro método herdado. Isso o torna um prático «dicionário limpo», em que toda chave é garantidamente sua e não herdada de Object.prototype.
6.2 Acesso às propriedades e métodos
1. Acesso com ponto
A forma mais comum de acessar propriedades e métodos de um objeto é através do ponto:
let person = {
name: 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person.name); // Exibe: John
console.log(person.age); // Exibe: 30
console.log(person.greet()); // Exibe: Hello!
2. Acesso com colchetes
As propriedades de um objeto também podem ser acessadas usando colchetes. Este método é útil se o nome da propriedade é armazenado em uma variável ou contém espaços ou caracteres especiais:
let person = {
'first name': 'John',
age: 30,
greet: function() {
return 'Hello!';
}
};
console.log(person['first name']); // Exibe: John
console.log(person['age']); // Exibe: 30
let propertyName = 'greet';
console.log(person[propertyName]()); // Exibe: Hello!
3. Alteração e adição de propriedades
As propriedades de um objeto podem ser alteradas ou adicionadas a qualquer momento:
let person = {
name: 'John',
age: 30
};
// Alteração de uma propriedade existente
person.age = 31;
console.log(person.age); // Exibe: 31
// Adição de uma nova propriedade
person.isStudent = false;
console.log(person.isStudent); // Exibe: false
4. Exclusão de propriedades
As propriedades de um objeto podem ser excluídas usando o operador delete:
let person = {
name: 'John',
age: 30,
isStudent: false
};
delete person.isStudent;
console.log(person.isStudent); // Exibe: undefined
6.3 Iteração sobre as propriedades de um objeto
1. Loop for...in
O loop for...in permite iterar sobre todas as propriedades enumeráveis de um objeto:
let person = {
name: 'John',
age: 30,
isStudent: false
};
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// Exibe:
// name: John
// age: 30
// isStudent: false
2. Método Object.keys()
O método Object.keys() retorna um array de todas as propriedades enumeráveis de um objeto:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let keys = Object.keys(person);
console.log(keys); // Exibe: ['name', 'age', 'isStudent']
3. Método Object.values()
O método Object.values() retorna um array dos valores de todas as propriedades enumeráveis de um objeto:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let values = Object.values(person);
console.log(values); // Exibe: ['John', 30, false]
4. Método Object.entries()
O método Object.entries() retorna um array de pares [chave, valor] para todas as propriedades enumeráveis de um objeto:
let person = {
name: 'John',
age: 30,
isStudent: false
};
let entries = Object.entries(person);
console.log(entries); // Exibe: [['name', 'John'], ['age', 30], ['isStudent', false]]
6.4 Verificação de existência de propriedades
1. Operador in
O operador in permite verificar a existência de uma propriedade em um objeto:
let person = {
name: 'John',
age: 30
};
console.log('name' in person); // Exibe: true
console.log('isStudent' in person); // Exibe: false
2. Método hasOwnProperty()
O método hasOwnProperty() verifica se um objeto possui uma propriedade especificada como sua própria (não herdada):
let person = {
name: 'John',
age: 30
};
console.log(person.hasOwnProperty('name')); // Exibe: true
console.log(person.hasOwnProperty('isStudent')); // Exibe: false
GO TO FULL VERSION