Descondificando CC

Implementando Array.filter() em Javascript

August 23, 2019

Javascript
Iniciante

O Array.filter() é uma função que itera um dado array e nos retorna um novo array com somente os elementos que satisfizeram a nossa condição.

Por exemplo, digamos que temos o seguinte array de alunos:

const alunos = [
  { nome: "António", nota: 20 },
  { nome: "João", nota: 13 },
  { nome: "Maria", nota: 10 },
  { nome: "José", nota: 8 }
];

Onde cada aluno tem uma determinada nota. Digamos que queremos apenas os alunos que tenham uma nota acima dos 12 valores.

O Array.filter() recebe uma função callback como seu primeiro parâmetro, que para ela é passada à cada iteração o elemento actual, no nosso caso seria cada aluno. Por exemplo:

function filtrarAlunosPorNota(aluno) {
  return aluno.nota > 12;
}

const alunosAprovados = alunos.filter(filtrarAlunosPorNota);

console.log(alunosAprovados);
// [{nome: 'António', nota: 20}, {nome: 'João', nota: 13}]

E então, como é que implementaríamos nossa própria função filter?

Criar uma função filter personalizada no protótipo do objecto Array é tão simples quanto:

Array.prototype.filtrar = function(callBack) {
  let result = [];
  for (let element of this) {
    if (callBack(element)) {
      result.push(element);
    }
  }
  return result;
};

Aqui o this corresponde(rá) ao array na qual aplicaremos a nossa função filter, para o nosso exemplo o valor de this é a nossa lista de alunos.

Em seguida usamos um laço for of para iterarmos por cada aluno da nossa lista e chamamos a função de callback que ela fará uma comparação da nota para verificar se o valor está acima dos 12. O retorno da função callBack será um booleano que avaliará em true ou false, caso seja verdadeiro, pegamos o elemento actual e adicionamos ele ao array result que ele armazenará todos os elementos que respeitam a nossa condição e sem seguida retornamos result.

const alunosAprovados = alunos.filtrar(filtrarAlunosPorNota);

console.log(alunosAprovados);
// [{nome: 'António', nota: 20}, {nome: 'João', nota: 13}]

Ao aplicarmos a nossa função filter personalizada na nossa lista de alunos e passarmos para ela a nossa função de callback filtrarAlunosPorNota criada anteriormente, obtemos exatamente o mesmo resultado que o anterior onde usamos o Array.filter() que vem implementado no Javascript.