Esse é um tema constante e que sempre gera dúvidas. Com Javascript temos várias funções que nos possibilitam trabalhar com Arrays mas você sabe o que cada uma delas faz?

O que é um Array?

Array é uma lista de valores.

Em Javascript, definimos um array como itens dentro de colchetes [“item1”, “item2”], simples assim.

const novoArray = ['item1', 'item2', 'item3'];

Agora o grande mistério é como trabalhar com estes arrays: adicionar um valor, buscar um valor, filtrar um valor, conferir se existe um valor na lista, e diversas outras funções. Existem diversas funções assim e vamos tratar as principais:

push() — Adicionando um item no Array

Para adicionar um novo item na sua lista, basta utilizar a função push(). Um push irá adicionar um novo item na última posição da lista, como você pode conferir no exemplo:

const novoArray = [];
novoArray.push('item1');
novoArray.push('item2');

console.log(novoArray);
//['item1', 'item2']

pop() e shift() —Excluindo um item do Array

Você pode excluir um item do seu array de duas formas: excluindo o primeiro, ou excluindo o último da lista, com as funções pop() ou shift()

const novoArray = ['item1', 'item2', 'item3'];
const ultimoItemExcluido = novoArray.pop();
const primeiroItemExcluido = novoArray.shift();

console.log(novoArray)
//['item2']

indexOf() —Buscando a posição de um item

Com essa função, você passa um valor como parâmetro a ser buscado na lista. Se existir, retornará em que posição está este valor:

const novoArray = ['item1', 'item2', 'item3'];
const indexDoItem2 = novoArray.indexOf('item2');

includes(), some() e every() —Conferindo se item existe

Você pode conferir se um item existe na sua lista com a função includes(), que retornará um valor booleano indicando se existe ou não.

Existem também as funções some() ou every(), bem interessantes para uma analise geral da lista: “existe algum item que cumpre a condição Y na lista?”, “todos os itens da lista cumprem a condição Z?”)

Segue o exemplo:

const novoArray = [1, 2, 3, 4, 5, 7, 8, 'umaStringQualquer'];
const listaPossuiNumero4 = novoArray.includes(4);
const listaPossuiNumero10 = novoArray.includes(10);
const existeAlgumaStringNaLista = novoArray.some((item) => typeof item == 'string');
const todosItemsSaoNumeros = novoArray.every((item) => typeof item == 'number');

console.log(listaPossuiNumero4, listaPossuiNumero10, existeAlgumaStringNaLista, todosItemsSaoNumeros)
//true false true false

filter() —Filtrando items de um array

Uma outra função bastante interessante, e bastante utilizada em diversas situações. Um filter() permite que você gere uma nova lista, filtrando os resultados desejados, seguindo uma determinada condição.

No exemplo abaixo, filtrei de uma lista os resultados pares e impares:

const novoArray = [1, 2, 3, 4, 5, 7, 8];
const numerosPares = novoArray.filter((item) => item % 2 == 0);
const numerosImpares = novoArray.filter((item) => item % 2 == 1);

console.log(numerosPares)
//[2, 4, 8]
console.log(numerosImpares)
// [1, 3, 5, 7]

map() e forEach() —Passando por todos os items de um array

São duas funções parecidas e que geram uma certa confusão. Tanto o map() quanto o forEach() passam por todos os itens da lista.

A diferença, é que o forEach apenas passa pela lista, e o map() pode “remapear” os valores, criando uma nova lista com valores completamente diferentes.

No exemplo abaixo, usei o map() para transformar todos os itens da lista em strings, e usei o forEach para chamar uma ação para todos os itens da lista.

const novoArray = [1, 2, 3, 4, 5, 7, 8];
const novoArrayComoString = novoArray.map((item) => item.toString());

console.log(novoArrayComoString)
//['1', '2', '3', '4', '5', '7', '8']

const novoArray = [1, 2, 3, 4, 5, 7, 8];
novoArray.forEach((item) => realizaAlgumaAcao(item));

Tratamento de listas no Javascript podem parecer complexos, mas é mesmo uma questão de prática? Ainda tem alguma dúvida? Participe de nosso canal no Discord e nos chame por lá que podemos te ajudar!