Descomplicando Array em Javascript (ou Typescript) · wenderpmachado

PS.: TUDO que foi escrito nesse artigo serve tanto para Javascript, quanto para Typescript. Aproveite! 😄

Primeiro contato

Como em todas outras linguagens de programção, uma hora ou outra vamos precisar lidar com listas de itens. Esses itens podem ser informações de clientes, listagem das compras que você precisa fazer, ou até mesmo a sequência de números da mega sena que você sempre joga! 😂

Essa "lista de itens" se chama: array!

Agora imagina uma fila de banco, onde cada pessoa recebe uma senha para deixar um pouco mais organizado o atendimento. Podemos considerar a fila como nosso array e cada senha é o que chamamos de index.

Mas tem um detalhe bem importante aqui: o índice do Javascript começa no ZERO (0, 1, 2, 3, ..., N) e por isso o último elemento é o número total de elementos MENOS 1.

Ex.: Uma fila com 3 pessoas, a primeira pessoa tem o índice 0, a segunda tem o índice 1 e a terceira o índice 2.

🚶‍♂️🚶‍♀️ 🚶‍♀️

Criando um array

Há duas formas de criar um array:

Através do construtor, usando a palavra 'new' antes do 'Array':

const arrayVazio = new Array(); // array vazio
console.log(arrayVazio); // []

const arrayDuasPosicoesVazias = new Array(2); // array com 2 elementos vazios
console.log(arrayDuasPosicoesVazias ); // [undefined, undefined]

const nomes = new Array('Wender', 'Felipe'); // array com 2 elementos do tipo string
console.log(nomes); // ['Wender', 'Felipe']

Ou através de colchetes - que é o mais utilizado atualmente:

const arrayVazio = []; // array vazio
console.log(arrayVazio); // []

const arrayDuasPosicoesVazias = [,,]; // array com 2 elementos vazios
console.log(arrayDuasPosicoesVazias ); // [undefined, undefined]

const nomes = ['Wender', 'Felipe']; // array com 2 elementos do tipo string
console.log(nomes); // ['Wender', 'Felipe']

const maisNomes = [...nomes]; 
// Os 3 pontos "joga" tudo que está dentro de 'nomes' para fora. 
// Já os colchetes simbolizam que será criado um novo array. 
// Logo, será criado um novo array com todos elementos de 'nomes'

console.log(maisNomes ); ['Wender', 'Felipe']

PS.: use a virgula para separar os elementos

Agora imagina aquela fila do banco com três pessoas. Se a gente quiser criar esse array no javascript seria assim:

const filaBanco = ['🚶‍♂️', '🚶‍♀️', '🤰'];

E em relação aos índices seria:

🚶‍♂️	🚶‍♀️	🤰
0	1	2

Dica: para saber o tamanho total de elementos de um array, utiliza a função .length em qualquer array. Mas lembre-se: tamanho !== índice

Ex.: filaBanco.length retornará 3.

Ex².: filaBanco.length - 1 retornará o último índice, que nesse caso é 2.

Alterando um array

Beleza, já sei criar, mas e se eu quiser remover/adicionar/etc ?

Assim como .length que retorna o tamanho total, os arrays também possuem outras funções pré-definidas que podemos usar ao nosso favor.

Antes de começar com os exemplos, vamos inicializar nossa fila do banco antes de dar as senhas:

let filaBanco = [];

Adicionando item

As primeiras pessoas chegaram para serem atendidas. Um jeito de adicionar um elemento ao final do array é com a função .push(item):

filaBanco.push('🧔'); 
console.log(filaBanco); // ['🧔']

filaBanco.push('👩‍🦱'); 
console.log(filaBanco); // ['🧔', '👩‍🦱']

PS.: é possível adicionar quantos itens você quiser, separando cada item por virgula:
Ex: filaBanco.push('🧔', '👩‍🦱')

Mas se por acaso o banco tem fila única, talvez você precise colocar uma idosa que acabou de chegar no começo da fila. Pra fazer isso, usamos a função .unshift(item)

filaBanco.unshift('🧓'); 
console.log(filaBanco); // ['🧓', '🧔', '👩‍🦱']

E não acaba por aí. Mais um idoso apareceu, e agora? Para ser justo, devemos coloca-lo depois da idosa, mas na frente do restante dos adultos. Nesse caso, podemos usar a função .splice.

Ela é um pouco mais complicada pois você precisa passar pelo menos 3 informações pra ela, sendo:

A posição do novo item
Quantos itens você quer remover a partir da posição informada anteriormente
Item a ser adicionado

Nesse caso precisamos lembrar que:

🧓	🧔	👩‍🦱
0	1	2

Na prática ficaria:

filaBanco.splice(1, 0, '👴');
console.log(filaBanco); // ['🧓', '👴', '🧔', '👩‍🦱']

PS.: O número 0 é a quantidade de elementos que a gente quer remover. No caso, nenhum!

PS².: O número 1 é a posição onde queremos adicionar, no caso posição inicial (zero) + 1. Como informamos que não queremos remover nenhum item, a função adiciona o '👴' e "empurra" os demais itens para as outras posições.

Removendo item

Conforme as pessoas são atendidas, elas vão saindo da fila. Nesse caso, a idosa será atendida primeiro, logo precisamos retirar a primeira posição com a função .shift():

const pessoaRemovida = filaBanco.shift();
console.log(filaBanco); // ['👴', '🧔', '👩‍🦱']
console.log(pessoaRemovida ); // '🧓'

Agora, a mulher que estava no final da fila desistiu de esperar e foi embora. Nesse caso, usamos a função .pop() para remover o último item.

const pessoaRemovida = filaBanco.pop();
console.log(filaBanco); // ['👴', '🧔']
console.log(pessoaRemovida ); // '👩‍🦱'

Depois de um tempo de atendimento, um garotinho entrou no meio da fila e começou a fazer confusão!

console.log(filaBanco); // ['👴', '👦', '🧔']

Não teve jeito, o segurança teve que retirar ele da fila!

const garotoRemovido = filaBanco.splice(1, 1);
console.log(filaBanco); // ['👴', '🧔']
console.log(garotoRemovido ); // ['👦'] - um array com 1 elemento

PS.: Diferente da vez que usamos o splice para adicionar - que informamos o item no terceiro parâmetro, agora usamos apenas 2 parâmetros sendo:

Posição que quer remover

Quantas posições quer remover a partir da posição informada anteriormente

Ou seja: remover o item do índice 1 e somente ele.

PS².: O retorno do splice SEMPRE será um array, seja com 1 ou N elementos definidos por você.

Depois de horas de atendimento, a fila cresceu significativamente. E o pior, um rapaz fantasiado está em uma posição aleatória! Com o garotinho foi fácil, mas e agora?

No Javascript existe a função .indexOf que retorna o índice do elemento informado. O segurança não pensou duas vezes e retirou o homem fantasiado da fila:

console.log(filaBanco); // ['👩‍🦱', '👩‍⚖️',......., '🦹‍♂️' ,........,'🙎‍♀️']

const indiceDoHomemFantasiado = filaBanco.indexOf('🦹‍♂️');
const homemFantasiadoRemovido = filaBanco.splice(1, 1);
console.log(filaBanco); // ['👩‍🦱', '👩‍⚖️',...............,'🙎‍♀️']
console.log(homemFantasiadoRemovido ); // ['🦹‍♂️'] - um array com 1 elemento

Extraindo parte do array

Já no outro dia de expediente...

console.log(filaBanco); // ['👨‍🦳', '👵', '🧓', '👴', '👩', '👩‍🦱', '🧑', '👩‍🦰'];

O gerente, vendo que a fila estava começando a ficar grande, decidiu arregaçar as mangas e colocar um atendente só para os idosos. Diferente dos outros casos, vamos usar o .splice para "extrair" parte do array e criar outro, para simbolizar a outra fila:

let filaBancoIdosos = filaBanco.splice(0, 4);
console.log(filaBancoIdosos); // ['👨‍🦳', '👵', '🧓', '👴'];
console.log(filaBanco); // ['👩', '👩‍🦱', '🧑', '👩‍🦰'];

Por hoje é só pessoal!

Espero que tenha te ajudado a entender melhor como funcionam os arrays e suas funções mais básicas - porém super úteis no dia a dia ✌️