Manipulando objetos no JavaScript

O que é um objeto no JavaScript?

Um objeto no JavaScript é uma coleção de chaves e valores. Ou seja, são pares de informações onde a chave cumpre um papel de identificador, que armazena um determinado valor. Cada par de informação é chamado de propriedade.

Por exemplo, se temos um objeto Usuário, que possui as propriedades nome e idade, ele é representado da seguinte forma:

let usuário = {
  nome: "João",
  idade: 20
}

A primeira propriedade é representada pela chave nome e o seu valor é "João". A segunda propriedade é representada pela chave idade e o seu valor é 20.

Como criar um objeto?

Existem basicamente duas maneiras de criar objetos no JavaScript:

Objetos literais
Funções construtoras

Vamos ver como cada uma delas funciona na prática.

Objetos literais

Para criar um objeto literal, basta fazer uso das chaves {} para organizar as suas propriedades, da mesma forma que criamos nosso usuário. Vamos ver mais um exemplo abaixo:

let livro = {
  título: "Essencialismo: A disciplinada busca por menos",
  autor: "Greg McKeown",
  editora: "Sextante",
  ISBN: 9788543102146
}

Nosso objeto livro possui quatro propriedades, que ficam separadas por vírgula entre as chaves.

Também podemos criar um objeto vazio:

let filme = {}

Nesse caso, o objeto filme ainda não possui nenhuma propriedade.

Funções construtoras

Também podemos utilizar funções construtoras para criar objetos. Vamos criar nosso livro novamente:

// criando a função construtora
function Livro(título, autor, editora, ISBN) {
  this.título = título;
  this.autor = autor;
  this.editora = editora;
  this.ISBN = ISBN;
}

// utilizando a função new para criar uma nova instância do objeto
let livro = new Livro(
  "Essencialismo: A disciplinada busca por menos",
  "Greg McKeown",
  "Sextante",
  9788543102146
)

O objeto livro criado das duas maneiras é exatamente o mesmo. A diferença é que utilizar a função construtora permite maior controle sobre a criação dos objetos. Por exemplo, podemos criar uma propriedade que vai ter seu valor preenchido automaticamente utilizando uma expressão.

function Livro(nome, preço, barato) {
  this.nome = nome;
  this.barato = preço < 10;
}

let senhorDosAnéis = new Livro("O Senhor dos Anéis", 15)
// { nome: "O Senhor dos Anéis, barato: false }

let harryPotter = new Livro("Harry Potter e a Pedra Filosofal", 8)
// { nome: "Harry Potter ...", barato: true }

Repare que a propriedade barato é preenchida automaticamente com o resultado da expressão preço < 10, que atribuímos para essa propriedade na função construtora.

Também podemos criar um objeto vazio utilizando uma função construtora:

let filme = new Object();

No caso acima, usamos uma função construtora já pronta. Por isso, só precisamos chamar o new e a função construtora Object.

Acessando as propriedades de um objeto

Também existem duas maneiras de acessar as propriedades de um objeto no JavaScript:

Utilizando o ponto .
Utilizando os colchetes []

Voltando para o nosso usuário, conseguimos acessar seu nome das duas formas:

let usuário = {
  nome: "João",
  idade: 20
}

usuário.nome
// "João"

usuário["nome"]
// João

Caso o objeto tenha propriedades cujos valores também sejam objetos (sim, isso é possível!) podemos encadear as chamadas para acessar as propriedades desses objetos. Veja abaixo:

let usuário = {
  nome: "João",
  idade: 20,
  endereço: {
    rua: "Avenida Brasil"
    número: 308
  }
}

usuário.endereço // { rua: "Avenida Brasil", número: 308 }
usuário.endereço.rua // "Avenida Brasil
usuário.endereço.número // 308

Adicionando, editando e removendo propriedades

Para adicionar uma nova propriedade em um objeto, basta atribuir um valor para a nova propriedade utilizando o operador =, como se ela já existisse. Você pode fazer isso acessando a propriedade de uma das duas possíveis maneiras. Vamos acrescentar uma propriedade nome ao objeto filme que criamos vazio, ou seja, sem propriedades.

let filme = {}
filme.nome = "O Poderoso Chefão" // utilizando o ponto
filme["ano"] = 1972 // utilizando os colchetes

filme // { nome: "O Poderoso Chefão", ano: 1972 }

Também podemos editar uma propriedade, acessando ela de uma das duas possíveis maneiras, e atribuindo o novo valor através do operador =.

filme.nome = "O Poderoso Chefão II"
filme["ano"] = 1974

filme // { nome: "O Poderoso Chefão II", ano: 1974 }

Para remover uma propriedade, utilizamos a palavra-chave delete. No exemplo abaixo, vamos remover o ano do filme.

let filme = {
  nome: "O Poderoso Chefão II",
  ano: 1974
}

delete filme.ano // true
filme // { nome: "O Poderoso Chefão II" }

Repare que ao utilizar a palavra-chave delete, ela retornou true, indicando que a remoção da propriedade foi bem sucedida. Caso a propriedade não puder ser removida, o retorno será false.

Obtendo as chaves e valores de um objeto

Você pode ter acesso a um array com as chaves (keys) ou valores (values) de um objeto de maneira simples. Basta usar os métodos Object.keys() para acessar as chaves, ou Object.values() para acessar os valores.

let livro = {
  título: "Essencialismo: A disciplinada busca por menos",
  autor: "Greg McKeown",
  editora: "Sextante",
  ISBN: 9788543102146
}

Object.keys(livro) // ["título", "autor", "editora", "ISBN"]
Object.values(livro) // ["Essencialismo: ...", "Greg McKeown", "Sextante", 9788543102146]

Você também pode converter um objeto em uma array de chaves e valores, usando o método Object.entries().

Object.entries(livro) // [["nome", "Essencialismo: ..."], ["autor", "Greg McKeown"], ...]

Combinando objetos com o spread e assign

Antes de entender como combinar objetos com o operador spread, vamos entender como ele funciona. O operador spread ... é utilizado para expandir uma array ou objeto em lugares onde argumentos ou elementos. Por exemplo, se eu quero criar uma array, e que parte dos seus elementos sejam elementos de outra array, posso utilizar o spread para fazer isso:

let melhoresAmigos = ["João", "Ana", "Paulo"]
let todosAmigos = ["Pedro", "Lucas", ...melhoresAmigos]
// ["Pedro", "Lucas", "João", "Ana", "Paulo"]

Repare que, se não usarmos o spread o resultado não vai ser o mesmo. Vamos ter uma array dentro de outra array:

let todosAmigos = ["Pedro", "Lucas", melhoresAmigos]
// ["Pedro", "Lucas", ["João", "Ana", "Paulo"]]

O mesmo vale para objetos:

let títuloAutor = {
  título: "Essencialismo: A disciplinada busca por menos",
  autor: "Greg McKeown"
}

let livro = {
  ...títuloAutor,
  editora: "Sextante",
  ISBN: 9788543102146
}
// {
//    título: "Essencialismo: A disciplinada busca por menos",
//    autor: "Greg McKeown",
//    editora: "Sextante",
//    ISBN: 9788543102146
// }

Ou seja, estamos combinando objetos. Repare que isso é diferente de adicionar propriedades a um objeto. Nesse caso, estamos criando um novo objeto, que incorpora propriedades de um objeto que já existia.

Iterando sobre as propriedades de um objeto

Por último, vamos ver como iterar sobre as propriedades de um objeto. Para isso, vamos usar um tipo específico de loop, o for...in. Repare que o loop vai iterar pelas chaves das propriedades.

let livro = {
  título: "Essencialismo: A disciplinada busca por menos",
  autor: "Greg McKeown",
  editora: "Sextante",
  ISBN: 9788543102146
}

for (let key in livro) {
  console.log(key)
}
// Output
// título
// autor
// editora
// ISBN

Você pode usar a chave para acessar os elementos:

for (let key in livro) {
  console.log(key + ": " + livro[key])
}

// Output
// título: Essencialismo: A disciplinada busca por menos
// autor: Greg McKeown
// editora: Sextante
// ISBN: 9788543102146

Conclusão

Os objetos são extremamente importantes para o JavaScript. Eles são a principal forma de representarmos e organizarmos os dados nessa linguagem. E como aprendemos nesse tutorial, eles são extremamente versáteis e flexíveis.

Para quem está começando na linguagem, é muito importante que entenda bem os conceitos de objeto, propriedades, chave e valor. E que aprenda a manipular essas informações com familiaridade. Para aprender mais sobre JavaScript, continue lendo nossos textos.

jdanielnd/manipulando-objetos-no-javascript.md