Usando funções com array de objetos

Atenção! Este artigo foi traduzido do inglês para o português a partir da fonte informada ao final do artigo, escrita pelo autor Cihan. A tradução é fornecida apenas para fins informativos e não deve ser considerada como uma tradução oficial. Não me responsabilizo por quaisquer erros ou imprecisões que possam ter sido introduzidos na tradução. É altamente recomendável que você verifique a precisão do conteúdo com a fonte original em inglês.

Prefácio

Quantas operações diferentes podemos fazer usando apenas um único array de objetos? Essas soluções, que parecem simples, mas contêm muitas dicas, irão aprimorar suas habilidades.

const students = [
  {
    name: 'John',
    isOnline: false,
  },
  {
    name: 'Jane',
    isOnline: true,
  },
  {
    name: 'Pedro',
    isOnline: false,
  },
]

1. Como classificar objetos em JavaScript usando o método Sort

Às vezes, precisamos classificar os objetos em uma matriz de acordo com a propriedade do objeto. Como você costuma fazer?

students.sort((first, second) => {
  if (first.isOnline && !second.isOnline) {
    return -1
  } 
  else if (!first.isOnline && second.isOnline) {
    return 1
  } 
  else {
    return 0
  }
})

console.log(students)

2. Como classificar um array de strings em JavaScript

Agora vamos colocar os nomes dos alunos em um array. Se houver um array de strings, qual é a maneira mais confiável de classificá-las?

const studentNames = students.map((user) => user.name)

studentNames.sort((first, second) => {
  return first.localeCompare(second)
})

console.log(studentNames)

O método localeCompare() verifica se uma determinada string vem antes, depois ou é equivalente a outra string na ordem de classificação.

3. Usar um IIFE em JavaScript pode ajudar a resolver problemas de escopo

Às vezes, podemos ter que trabalhar com a palavra-chave var. Por exemplo, se quisermos imprimir os nomes dos alunos após um segundo, obteremos o seguinte erro.

for (var i = 0; i < studentNames.length; i++) {

  setTimeout(() => {
    console.log(studentNames[i]) 
  }, 1000)

}

Output: // undefined undefined undefined

Como var é um escopo global, os valores de i aumentam primeiro. O valor pós-loop de i é 3. Então, quando o método setTimeout no loop de eventos é chamado, o studentNames[3] se torna indefinido. Porque o nome do último aluno é armazenado no 2º índice.

O IIFE pode ser usado para criar um novo escopo de função para setTimeout. Só precisamos envolver o setTimeout em um IIFE.

for (var i = 0; i < studentNames.length; i++) {

  ((studentName) => {
    setTimeout(() => {
      console.log(studentName)
    }, 1000)
  })(studentNames[i])

}

Output: // Jane John Pedro

Ou com a palavra-chave let do ES6: Como a palavra-chave let tem escopo de bloco, os valores i são armazenados em cada loop e podemos ver os valores consecutivos.

for (let i = 0; i < studentNames.length; i++) {
  setTimeout(() => {
    console.log(studentNames[i])
  }, 1000)
}

Output: // Jane John Pedro

4. Como usar Object.entries para converter objetos em arrays

Como podemos colocar objetos em um array dos próprios pares [key, value]? Qual é a maneira mais fácil de fazer isso? Podemos fazer isso facilmente usando os métodos map e Object.entries juntos.

Às vezes, realmente precisamos fazer isso.

const entriesStudents = students.map((student) => Object.entries(student))

console.log(entriesStudents)

Saída:

[
    [
        [
            "name",
            "Jane"
        ],
        [
            "isOnline",
            true
        ]
    ],
    [
        [
            "name",
            "John"
        ],
        [
            "isOnline",
            false
        ]
    ],
    [
        [
            "name",
            "Pedro"
        ],
        [
            "isOnline",
            false
        ]
    ]
]

5. Como usar Object.fromEntries para converter arrays em objetos

O que devemos fazer se quisermos restaurar a situação acima novamente? Podemos restaurá-lo usando os métodos map e Object.fromEntries juntos.

const fromEntriesStudents = entriesStudents.map((student) => {
  return Object.fromEntries(student)
})

console.log(fromEntriesStudents)

Saída:

[
    {
        "name": "Jane",
        "isOnline": true
    },
    {
        "name": "John",
        "isOnline": false
    },
    {
        "name": "Pedro",
        "isOnline": false
    }
]

Se você quiser tentar, clique aqui