Dica para estudar métodos de Array em JavaScript

#JavaScript
#Node.js

Uma coisa importante que sempre tento deixar claro quando estudo qualquer coisa em JavaScript, ou em alguma outra ferramenta, é tentar entender de fato o que ocorre por baixo dos panos.

Acredito que só aprender a como escrever o código de um método/função pode ser algo não muito legal em várias situações. Tentar entender o que realmente cada método faz te poupará tempo, e evita aquela coisa de “tentativa e erro”, deixando a sua tomada de decisão mais rápida e até intuitiva na hora de codar.

Então, quando vou estudar alguma funcionalidade da linguagem agora, tento simular essa funcionalidade de uma forma mais “crua”, se essa for a palavra correta, e isso se deu bem em arrays.

Sei que muitos já conhecem, porém acho importante deixar em evidência para quem ainda iniciante nos conceitos da linguagem, ou até mesmo para relembrar quem já se esqueceu.

No caso dos métodos, utilizo muito o "for loop". O for seria uma opção pouco convencional para utilizar no código, porém ele meio que te permite fazer na “unha” o que um .map(), por exemplo, faz automaticamente. Aqui abaixo vou deixar alguns exemplos bem simples para melhor entendimento.

Map()

Normalmente, utilizamos o map quando queremos utilizar criar um novo array resultante de um "array original" onde foi utilizado um map() com uma função callback passada por argumento que manipula cada elemento e passa para esse novo array.

Abaixo segue um exemplo de aplicação do Map(), e também uma “simulação” de como ele funciona utilizando for loop.

Utilizando map()

const numeros = [1, 2, 3, 4, 5, 6];
const numerosAoQuadrado = numeros.map(numeroAtual => numeroAtual ** 2);


console.log(numerosAoQuadrado); // [1, 4, 9, 16, 25, 36]


const carros = [
  {
      modelo: "Jetta",
      marca: "Volkswagen"
  },
  {
      modelo: "HB20",
      marca: "Hyundai"
  },
  {
      modelo: "Fit",
      marca: "Honda"
  },
  {
      modelo: "Sandero",
      marca: "Renault"
  },
];


const marcasDisponiveis = carros.map(carroAtual => carroAtual.marca);


console.log(marcasDisponiveis); //[Volkswagen, Hyundai, Honda, Renault]

Utilizando "for"

const numeros = [1, 2, 3, 4, 5, 6];
const numerosAoQuadrado = [];


for(let i = 0; i < numeros.length; i ++){
  numerosAoQuadrado[i] = numeros[i] ** 2;
}


console.log(numerosAoQuadrado); //[1, 4, 9, 16, 25, 36]


const carros = [
  {
      modelo: "Jetta",
      marca: "Volkswagen"
  },
  {
      modelo: "HB20",
      marca: "Hyundai"
  },
  {
      modelo: "Fit",
      marca: "Honda"
  },
  {
      modelo: "Sandero",
      marca: "Renault"
  },
];


const marcasDisponiveis = [];


for(let i = 0; i < carros.length; i ++){
  marcasDisponiveis[i] = carros[i].marca;
}


console.log(marcasDisponiveis); //[Volkswagen, Hyundai, Honda, Renault]

Filter()

O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função callback, literalmente funciona como um Filtro, trazendo só aquilo que realmente a função quer passar.

Utilizando filter()

const alunos = [
  aluno1 = {
      nome: "Lucas",
      nota: 10
  }, 
  aluno2 = {
      nome: "Maria",
      nota: 8.5
  }, 
  aluno3 = {
      nome: "Lucio",
      nota: 4.8
  }, 
  aluno4 = {
      nome: "Pedro",
      nota: 7.5
  }, 
  aluno5 = {
      nome: "Marina",
      nota: 6.5
  }
]


const alunosAprovados = alunos.filter((aluno)=> {
  if(aluno.nota >= 7) return aluno
})


console.log(alunosAprovados); 
/**
 * {nome: 'Lucas', nota: 10}
 * {nome: 'Maria', nota: 8.5}
 * {nome: 'Pedro', nota: 7.5}
 */

const arrNumeros = [10, 25, 31, 55, 100, 101, 85, 56];


const arrNumerosImpares = arrNumeros.filter((numero)=>{
  if(numero % 2 != 0) return numero;
})


console.log(arrNumerosImpares); //[25, 31, 55, 101, 85]

Utilizando "for"

const alunos = [
  aluno1 = {
      nome: "Lucas",
      nota: 10
  }, 
  aluno2 = {
      nome: "Maria",
      nota: 8.5
  }, 
  aluno3 = {
      nome: "Lucio",
      nota: 4.8
  }, 
  aluno4 = {
      nome: "Pedro",
      nota: 7.5
  }, 
  aluno5 = {
      nome: "Marina",
      nota: 6.5
  }
]


const alunosAprovados = [];


  for(let i = 0; i < alunos.length; i ++){
      if(alunos[i].nota >= 7){
          alunosAprovados[i] = alunos[i];
      }
  }


console.log(alunosAprovados); 
/**
 * {nome: 'Lucas', nota: 10}
 * {nome: 'Maria', nota: 8.5}
 * {nome: 'Pedro', nota: 7.5}
 */


const arrNumeros = [10, 25, 31, 55, 100, 101, 85, 56];


const arrNumerosImpares = [];


  for(let i = 0; i < alunos.length; i ++){
      if(arrNumerosImpares[i] % 2 != 0){
          arrNumerosImpares[i] = arrNumeros[i];
      }
  }


console.log(arrNumerosImpares); //[25, 31, 55, 101, 85]

Reduce()

Esse parece ser um pouco mais dificultoso, devido também a sua quantidade mínima de parâmetros que devemos utilizar para a função callback ou até mesmo para o próprio método. No reduce, foi com o for que justamente comecei a utilizar de uma maneira melhor.

Em poucas palavras, o reduce itera sobre um array passando por cada índice desse array e utilizando os valores de cada um para resultar em apenas um valor final. Um caso bem pertinente, é você utilizá-lo para realizar uma soma acumulativa. Abaixo segue exemplo.

Utilizando reduce()

const depositosMensais = [1500, 980.50, 1000, 768.78, 654, 748.89];


const valorInicial = 0;


const somaDepositosMensais = depositosMensais.reduce((totalAcumulado, valorAtual)=>{
  return totalAcumulado + valorAtual;
}, valorInicial);


console.log(`Soma total dos depositos = R$ ${somaDepositosMensais.toFixed(2)}`);


const aluno = [nota = 6.5, nota = 7.8, nota = 10, nota = 5.5]
const somaNotasAluno = aluno.reduce((somaNotas, notaAtual)=>{
  return somaNotas + notaAtual
}, valorInicial)


const mediaAluno = somaNotasAluno / aluno.length;

console.log(`Media aluno = ${mediaAluno.toFixed(2)}`);

Utilizando "for"

const depositosMensais = [1500, 980.50, 1000, 768.78, 654, 748.89];


let somaDepositosMensais = 0;


for(let i = 0; i < depositosMensais.length; i ++){
  somaDepositosMensais += depositosMensais[i];
}


console.log(`Soma total dos depositos = R$ ${somaDepositosMensais.toFixed(2)}`);


const aluno = [nota = 6.5, nota = 7.8, nota = 10, nota = 5.5];


let somaNotasAluno = 0;


for(let i = 0; i < aluno.length; i ++){
  somaNotasAluno += aluno[i];
}


const mediaAluno = somaNotasAluno / aluno.length;


console.log(`Media aluno = ${mediaAluno.toFixed(2)}`);

Every()

Esse método testa se todos os elementos do array passam pelo teste implementado pela função callback.

O every() retorna um valor booleano (true ou false), retorna true caso a função passada como argumento retorne true para todos os elementos percorridos no array

No exemplo utilizando o for, quando a variável local "resultado" recebe "false",

é executado um "break" no for, parando de forma brusca o Loop. Pois basta um valor que não atenda a lógica da função-argumento que o every retornará como "false". Essa lógica, se não me engano, lembra muito a Tabela Verdade com operador AND (&&) onde só é verdadeiro se ambos os dados da comparação sejam todos verdadeiros.

Utilizando Every()

const provaDetran1 = [provaTeorica = "aprovado", 
                  provaPratica = "aprovado", 
                  examePsicologico = "aprovado", 
                  testeToxicologico = "aprovado"];


const provaDetran2 = [provaTeorica = "aprovado", 
                  provaPratica = "reprovado", 
                  examePsicologico = "aprovado", 
                  testeToxicologico = "aprovado"];


const resultadoDetran1 = provaDetran1.every(exame => exame == "aprovado");
const resultadoDetran2 = provaDetran2.every(exame => exame == "aprovado");


console.log("Resultado 1 ok: " + resultadoDetran1); //true
console.log("Resultado 2 ok: " + resultadoDetran2); //false

Utilizando "for"

const provaDetran1 = [provaTeorica = "aprovado", 
                  provaPratica = "aprovado", 
                  examePsicologico = "aprovado", 
                  testeToxicologico = "aprovado"];


const provaDetran2 = [provaTeorica = "aprovado", 
                  provaPratica = "reprovado", 
                  examePsicologico = "aprovado", 
                  testeToxicologico = "aprovado"];


function analisarResultadoDetran (prova){


  let resultado = '';


  for(let i = 0; i < prova.length; i ++){
      if(prova[i] == "reprovado"){
          resultado = false;
          break;
      } else {
          resultado = true;
      }
  }


  return resultado;
}


console.log("Resultado 1 ok: " + analisarResultadoDetran(provaDetran1));
console.log("Resultado 2 ok: " + analisarResultadoDetran(provaDetran2));

Me limitarei a apenas esses mencionados, para não deixar o artigo tão cansativo, porém aconselho tentar com outros métodos também: some(), indexOf(), find(), etc...

Espero que de alguma forma esse artigo contribua para alguém.

Comentem aí abaixo o que vocês concordam, o que não concordam, e quais os pontos positivos e negativos nesse artigo, me corrijam se usei algum termo incorretamente, ou até mesmo alguma informação errada também.

O feedback de vocês vai me ajudar a escrever artigos cada vez melhores e a me tornar um dev melhor também.

Aqui abaixo deixo algumas referências importantes:

https://www.treinaweb.com.br/blog/javascript-metodos-de-arrays-que-voce-precisa-conhecer

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

----------------------------------------------------------------//

Que a paz e o JavaScript estejam convosco. Vida longa ao DevTools!