A Programação Orientada a Objetos (POO) é atualmente uma das principais paradigmas no desenvolvimento de aplicações, e em JavaScript podemos também usufruir de todos os benefícios dessa abordagem. No entanto, a POO no contexto do JavaScript tem algumas peculiaridades.
Objetos - JavaScript
Em tópicos anteriores, trabalhamos com dados primitivos, como números e strings, mas os dados nem sempre são de tipos primitivos. Por exemplo, se precisarmos descrever a entidade "pessoa" em nossa aplicação, com atributos como nome, idade, sexo e assim por diante, não seria viável representar essa entidade apenas com um número ou string. Precisaríamos de diversas strings ou números para descrever a pessoa adequadamente. Nesse contexto, uma pessoa seria uma estrutura complexa, com propriedades distintas, como idade, altura, nome, sobrenome, entre outras.
Para trabalhar com essas estruturas no JavaScript, usamos objetos. Cada objeto pode armazenar propriedades que descrevem seu estado, e métodos que descrevem seu comportamento.
Criação de um Novo Objeto
Há várias formas de criar um novo objeto.
O primeiro método é usar o construtor Object
const user = new Object(); Neste caso, o objeto é chamado de usernew Object()new
O segundo método é usar chaves (notação literal):
const user = {};
Atualmente, esse segundo método é mais comum.
Propriedades de um Objeto
Após criar um objeto, podemos definir suas propriedades. Para fazer isso, após o nome do objeto, usamos um ponto seguido pelo nome da propriedade e atribuímos um valor a ela:
const user = {};
user.name = "Tom";
user.age = 26; Neste caso, são definidas duas propriedades: nameage
console.log(user.name);
console.log(user.age);Também é possível definir propriedades no momento da criação do objeto:
const user = {
name: "Tom",
age: 26
};Neste caso, usamos o símbolo de dois pontos para atribuir um valor a uma propriedade, e colocamos uma vírgula (em vez de um ponto e vírgula) após cada propriedade.
Além disso, há um método abreviado para definir propriedades:
const name = "Tom";
const age = 34;
const user = {name, age};
console.log(user.name); // Tom
console.log(user.age); // 34Aqui, os nomes das variáveis também são os nomes das propriedades do objeto. Essa abordagem permite criar estruturas mais complexas:
const name = "Tom";
const age = 34;
const user = {name, age};
const teacher = {user, course: "JavaScript"};
console.log(teacher.user); // {name: "Tom", age: 34}
console.log(teacher.course); // JavaScriptMétodos de um Objeto
Os métodos de um objeto definem seu comportamento ou ações que ele realiza. Métodos são funções. Por exemplo, vamos definir um método que imprime o nome e a idade de uma pessoa:
const user = {};
user.name = "Tom";
user.age = 26;
user.display = function() {
console.log(user.name);
console.log(user.age);
};
// Chamada do método
user.display();Assim como funções, os métodos são definidos primeiro e depois chamados.
Também é possível definir métodos diretamente ao criar o objeto:
const user = {
name: "Tom",
age: 26,
display: function() {
console.log(this.name);
console.log(this.age);
}
};
Como nas propriedades, um método é atribuído a uma função por meio do símbolo de dois pontos.
Para acessar as propriedades ou métodos de um objeto de dentro dele mesmo, usamos a palavra-chave this
Há também uma forma abreviada para definir métodos, omitindo os dois pontos e a palavra function
let user = {
name: "Tom",
age: 26,
display() {
console.log(this.name, this.age);
},
move(place) {
console.log(this.name, "vai para", place);
}
};
user.display(); // Tom 26
user.move("a loja"); // Tom vai para a loja
Sintaxe de Arrays
Há uma maneira alternativa de definir propriedades e métodos usando a sintaxe de arrays:
const user = {};
user["name"] = "Tom";
user["age"] = 26;
user["display"] = function() {
console.log(user.name);
console.log(user.age);
};
// Chamando o método
user["display"](); O nome de cada propriedade ou método é colocado entre aspas e dentro de colchetes, e então lhes é atribuído um valor, como user["age"] = 26
Ao acessar essas propriedades e métodos, podemos usar a notação de ponto user.nameuser["name"]
Também podemos definir propriedades e métodos diretamente ao criar o objeto, usando a sintaxe de arrays:
const user = {
["name"]: "Tom",
["age"]: 26,
["display"]: function() {
console.log(user.name);
console.log(user.age);
}
};
user["display"]();
Strings como Propriedades e Métodos
É importante notar que os nomes de propriedades e métodos de um objeto são sempre strings. Portanto, poderíamos reescrever o exemplo anterior assim:
const user = {
"name": "Tom",
"age": 26,
"display": function() {
console.log(user.name);
console.log(user.age);
}
};
// Chamando o método
user.display();Por um lado, não há diferença entre essas duas definições. Por outro, há casos em que envolver o nome em uma string pode ser útil. Por exemplo, se o nome da propriedade tiver duas palavras separadas por um espaço:
const user = {
name: "Tom",
age: 26,
"full name": "Tom Johns",
"display info": function() {
console.log(user.name);
console.log(user.age);
}
};
console.log(user["full name"]);
user["display info"]();
Nesse caso, precisamos usar a sintaxe de arrays para acessar essas propriedades e métodos.
Definição Dinâmica de Nomes de Propriedades e Métodos
A sintaxe de arrays também nos permite definir o nome de uma propriedade fora do objeto:
const prop1 = "name";
const prop2 = "age";
const tom = {
[prop1]: "Tom",
[prop2]: 37
};
console.log(tom); // {name: "Tom", age: 37}
console.log(tom.name); // Tom
console.log(tom["age"]); // 37Isso permite, por exemplo, criar objetos dinamicamente com nomes de propriedades arbitrários:
function createObject(propName, propValue) {
return {
[propName]: propValue,
print() {
console.log(`${propName}: ${propValue}`);
}
};
}
const person = createObject("name", "Tom");
person.print(); // name: Tom
const book = createObject("title", "JavaScript Reference");
book.print(); // title: JavaScript ReferenceRemovendo Propriedades
Anteriormente, vimos como adicionar propriedades dinamicamente a um objeto. No entanto, também podemos remover propriedades e métodos usando o operador delete
delete objeto.propriedade;Ou podemos usar a sintaxe de arrays:
delete objeto["propriedade"];Por exemplo, podemos remover uma propriedade assim:
let user = {};
user.name = "Tom";
user.age = 26;
user.display = function() {
console.log(user.name);
console.log(user.age);
};
console.log(user.name); // Tom
delete user.name; // Remove a propriedade
// Alternativamente:
// delete user["name"];
console.log(user.name); // undefined Após a remoção, a propriedade não estará definida, e ao acessá-la, o programa retornará undefined
Criando um Objeto a Partir de Variáveis e Constantes
Ao criar um objeto, seus valores de propriedade podem ser provenientes de variáveis, constantes ou resultados dinamicamente calculados de funções:
function getSalary(status) {
if(status === "senior") return 1500;
else return 500;
}
const name = "Tom";
const age = 37;
const person = { name: name, age: age, salary: getSalary() };
console.log(person); // {name: "Tom", age: 37, salary: 500}
Mas se os nomes das constantes/variáveis coincidirem com os nomes das propriedades, podemos simplificar a atribuição:
const name = "Tom";
const age = 37;
const salary = 500;
const person = { name, age, salary };
console.log(person); // {name: "Tom", age: 37, salary: 500}O mesmo se aplica a funções atribuídas aos métodos de um objeto:
function display() {
console.log(this.name, this.age);
}
const move = function(place) { console.log(this.name, "vai para", place); };
const name = "Tom";
const age = 37;
const salary = 500;
const person = { name, age, salary, display, move };
person.display(); // Tom 37
person.move("cinema"); // Tom vai para o cinema Aqui, o objeto person tem dois métodos que correspondem às funções display()move()thisthiswindow
const move = (place) => {
console.log(this.name, "vai para", place);
console.log(this);
};
const name = "Tom";
const person = { name, move };
person.move("cinema"); // vai para o cinema Neste caso, thiswindowperson
Função Object.fromEntries()
Com a função Object.fromEntries()
const personData = [ ["name", "Tom"], ["age", 37] ];
const person = Object.fromEntries(personData);
console.log(person); // {name: "Tom", age: 37}
console.log(person.name); // Tom Aqui, o objeto é criado a partir do array personData
Conclusão
Neste tema, aprendemos a criar objetos em JavaScript, definir propriedades e métodos, e acessá-los. Vimos várias maneiras de criar objetos e definir propriedades e métodos, e também aprendemos a remover propriedades e métodos de um objeto. Além disso, vimos como criar objetos a partir de variáveis e constantes, e como usar a função Object.fromEntries()