Praticando JavaScript: arrays

JavaScript Arrays - Apresentção

Boas-vindas ao curso da formação de Prática de Programação com JavaScript. Meu nome é Ju Amoasei.

Audiodescrição: Juliana se identifica como uma mulher branca. Possui cabelos curtos, pintados de azul, e óculos de grau com armação vermelha. Possui piercings de argola na narina e orelha direitas. Usa uma camiseta cinza com a logo da alura. Ao fundo, os estúdios da Alura, compostos por uma parede lisa iluminada em tons de azul e roxo e uma estante cheia de objetos à direita.

O foco deste curso é praticar código, testar conhecimentos de forma prática e resolver alguns dos problemas de lógica de programação que encontramos durante nossa rotina e estudos diários.

O que aprenderemos?

Nos cursos desta formação, teremos:

• Revisão de conteúdos;
• Materiais suplementares;
• Muitos desafios e exercícios para praticar tudo o que aprendemos.

Pré-requisitos

É importante destacar que, como este é um curso de revisão, é necessário já ter concluído a formação anterior sobre programar em JavaScript com foco no back-end, onde apresentamos os conceitos que apenas revisaremos durante esta formação.

Na formação prática, o conteúdo será revisado de forma incremental. Portanto, é recomendável seguir os cursos na ordem apresentada, para garantir que não percamos nada que seja referenciado em revisões anteriores.

É importante notar que este curso não é voltado para front-end. No entanto, toda a prática que realizaremos com JavaScript pode ser aproveitada no front-end, desde que o Node.js esteja instalado.

É essencial pausar, testar os vídeos, experimentar os exemplos, modificar e não deixar de fazer os exercícios. Isso é muito importante e será enfatizado durante toda a revisão.

Por fim, sinta-se à vontade para compartilhar o que aprender no fórum e no Discord, além de pedir ajuda, se necessário.

JavaScript Arrays - Array

Vamos começar revisando o conceito de arrays. Arrays são coleções ordenadas de valores, onde cada valor é chamado de elemento e possui uma posição determinada por um índice numérico, que começa em zero. Isso significa que, se não modificarmos os valores com um método externo, o array manterá todos os elementos na mesma ordem.

Criando arrays em JavaScript

Para criar um array em JavaScript, utilizamos a seguinte sintaxe:

const arr = [ elemento, elemento, elemento, elemento, elemento ];

Essa estrutura básica nos permite armazenar valores de qualquer tipo de dado, como números, strings, boolianos, outros arrays, ou objetos. Um array pode conter mais de um tipo de dado simultaneamente, algo que nem todas as linguagens permitem, mas JavaScript sim.

Exemplificando tipos de arrays

Por exemplo, podemos criar um array de números:

const arrNumeros = [1, 2, 3];

Ou um array misto, contendo diferentes tipos de dados:

const arrMisto = [5, true, 'texto'];

Também podemos ter um array de arrays, onde cada array interno é considerado um único elemento no array externo:

const arrArrays = [[1, 2], ['a', 'b', 'c'], [true, false]];

Além disso, podemos criar um array de objetos:

const arrObjetos = [{ a: 1 }, { b: 2 }, { c: 3 }];

Manipulando arrays

Agora, entenderemos como manipular arrays. A forma mais básica é através do índice. Por exemplo, se quisermos acessar o primeiro elemento de um array, usamos o índice 0:

//                   0   1   2   3
const arrNumeros = [46, 34, 23, 12];

console.log(arrNumeros[0]); // 46
console.log(arrNumeros[1]); // 34
console.log(arrNumeros[2]); // 23
console.log(arrNumeros[3]); // 12

Podemos também modificar valores em um array. Se quisermos alterar o valor no índice 1 de 34 para 36, reatribuímos o valor novo a ele:

arrNumeros[1] = 36;

Se quisermos adicionar um novo elemento no final do array, podemos atribuir um valor a um índice que ainda não existe:

arrNumeros[4] = 100;

Após essas operações, se executarmos um console.log() no array, veremos um novo índice:

console.log(arrNumeros);
//[ 46, 36, 23, 12, 100 ]

Conclusão

Essas são as formas básicas de manipulação de arrays. No dia a dia, utilizamos outras técnicas, mas é importante praticar para entender bem esses conceitos fundamentais.

JavaScript Arrays - Prática array

Vamos praticar com a forma mais básica de interagir com elementos de um array: através do número de índice. No arquivo de exercícios, já deixamos um array com quatro números: 1, 2, 3 e 4. Este array possui quatro elementos que vão da posição 0 a 3.

exercicios.js:

// ARRAY
// pratique construindo arrays e acessando seus elementos através dos índices

const arr = [1, 2, 3, 4];

Acessando e modificando elementos do array

Se quisermos acessar esses elementos, passá-los para uma função, entre outras operações, podemos utilizar console.log() na referência arr, nos índices 0, 1, 2 ou 3, e assim receberemos os elementos numéricos.

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);

No terminal, que já está aberto, podemos executar os exercícios e exibir no console tranquilamente.

node exercicios.js

1

2

3

4

Se desejarmos mudar o primeiro elemento no índice 0, por exemplo, de 1 para 3, podemos fazer isso. Na referência arr no índice 0, passamos o valor 3. Vamos modificar o valor e exibir o array atualizado:

arr[0] = 3;
console.log(arr);

Se pedirmos novamente para o console exibir o array completo, ele mostrará o array atualizado com 3, 2, 3 e 4, indicando que já fizemos a modificação.

[3, 2, 3, 4]

Manipulando índices inexistentes

Podemos fazer um exercício: temos quatro elementos no nosso array que vão de 0 a 3. Vamos experimentar o seguinte: o que acontece se passarmos para dentro do nosso array arr no índice 5?

O índice 5 não existe no momento, sendo que o último índice é o 3. Vamos atribuir o valor 10 ao índice 5 e ver o que acontece.

arr[5] = 10;
console.log(arr);

Ao executar novamente, o console nos avisa que temos dentro do nosso array os elementos 3, 2, 3, 4, um item vazio, e depois o valor 10.

[1, 2, 3, 4, <empty item>, 10]

O índice 4 do array ficou sem valor porque pulamos diretamente do índice 3 para o 5. No entanto, o JavaScript não gera erro, pois é uma característica da linguagem permitir esse tipo de array, conhecido como array esparso. O JavaScript permite que arrays tenham espaços vazios, e acabamos criando, sem querer, um espaço vazio entre o índice 3 e o índice 5.

Removendo espaços vazios

Para resolver isso, podemos pensar em deletar o espaço vazio. Sabemos que existe a palavra-chave delete no JavaScript. Se aplicarmos delete no arr no índice 4, que está vazio, e verificarmos o resultado, percebemos que o índice continua lá, sem alteração.

delete arr[4];
console.log(arr);

Podemos tentar outra abordagem: deletar o índice 5 e verificar se conseguimos deletar o 4 em seguida. Ao aplicar delete no índice 5 e executar um console.log(), observamos que, em vez de um item vazio e um elemento, agora temos dois itens vazios. Isso indica que a abordagem não funcionou como esperado.

delete arr[5];
console.log(arr);

[1, 2, 3, 4, <2 empty items>]

Próximos passos

Como retirar itens de um array e manipulá-los sem correr o risco de lidar diretamente com os índices? Normalmente, não sabemos de antemão em quais índices os elementos estão, especialmente em listas maiores.

Na sequência, veremos como manipular arrays de uma forma mais eficiente e performática.

Sobre o curso Praticando JavaScript: arrays

O curso Praticando JavaScript: arrays possui 53 minutos de vídeos, em um total de 22 atividades. Gostou? Conheça nossos outros cursos de em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• JavaScript arrays