Array Javascript – Guia Completo Para Iniciante

Programador Viking 13 de fevereiro de 2023 2 Comentários Leitura: 7 min

Array Javascript - Guia Completo Para Iniciante

Neste artigo, vamos entender o que de fato é um array Javascript e como podemos utiliza-lo em nossos projetos de desenvolvimento.

Ou seja, dominar esse assunto é algo extremamente importante e obrigatório para quem deseja se tornar um programador profissional.

Isso porque todas as empresas utilizam array javascript em suas aplicações e você precisa entender como tudo isso funciona.

Portanto, recomendo ler este artigo até o final para não perder nenhum detalhe e dominar todos os conceitos sobre array.

Confira neste artigo:

O que é um array em Javascript?

Primeiramente devemos entender o que é um array na linguagem Javascript e como esse tipo de dado funciona. Para isso vamos fazer uma analogia.

Imagine o seguinte cenário, onde você precisa organizar sua sapateira, e para isso você precisa guardar os tênis em uma gaveta, os chinelos em outra gaveta e assim por diante.

Ou seja, um array é uma estrutura muito parecida com uma sapateira, onde você pode guardar “coisas” em um espaço reservado.

Porém, os arrays propriamente dito, são estruturas que server para guardar dados e também organizá-los.

Além disso esse elementos podem ser encontrados através de um índice, que nada mais que do que uma indicação de onde o elemento está.

Voltando para a analogia da sapateira, você pode colocar os tênis de academia na gaveta 1, os chinelos na gaveta 2, sapato social na gaveta 3 e assim por diante.

Portanto, sempre que precisar de um chinelo, você vai saber exatamente onde ele está.

Para que serve um array no Javascript?

De uma forma bem resumida, um array é basicamente uma estrutura de dados que serve para guardar determinado elemento em um espaço da memória do computador.

Ou seja, esses espaços na memórias são popularmente chamados de variáveis.

Portanto, quando queremos guardar vários elementos em um único lugar utilizamos o array, já quando vamos guardar apenas um elemento usamos as variáveis.

Para saber mais sobre variáveis e diversas outras coisas sobre programação, por exemplo criar projetos do zero mesmo sendo iniciante, recomendo acessar este link.

Agora vamos para o próximo tópico.

Veja também: Vale a pena investir no curso de JavaScript da OneBitCode?

Como funciona um Array Javascript?

Vamos fazer uma outra analogia, imagine que você precise ir a feira comprar frutas. Logo, você escreve em uma folha de papel uma lista de frutas que você precisa comprar, dessa forma:

Lista de Frutas:

Abacaxi
Manga
Limão
Pêra
Maçã

Caso alguém lhe pergunte qual a segunda coisa que você vai comprar, olhando para a lista você irá responder “Manga”.

Porém, no Javascript os arrays tem um comportamento parecido ao realizar uma busca de um item em uma determinada lista. A única diferença é que essa lista começa a contar do zero. Por exemplo:

Lista de Frutas:

Número	Frutas
0	Abacaxi
1	Manga
2	Limão
3	Pêra
4	Maçã

Portanto, cada item é um elemento, e cada elemento é acessado através de um índice que inicia com zero. Além disso, podemos alterar a ordem, inserir ou retirar elementos.

Como declarar um Array em JavaScript?

Basicamente, existem duas formas de se criar um array na linguagem Javascript, porém a mais popular é criando uma variável da seguinte forma:

var listaDeFrutas = ['Abacaxi','Manga','Limão','Pêra','Maçã'];

Ou seja, cada item da minha lista é separado por virgula, ocupando uma posição do array que chamei de listaDeFruta (usando a convenção camelCase).

Veja também: Convenções de nomenclaturas na programação.

Bem simples de entender né? com apenas uma linha já conseguimos criar o nosso array Javascript.

Agora como podemos acessar um elemento do nosso array? É isso que vamos ver no nosso próximo tópico.

Como acessar um elemento do array?

Para acessar um elemento do nosso array Javascript é bem simples, podemos fazê-lo buscando pelo seu índice.

Por exemplo:

var primeiroItem = listaDeFrutas[0]; // Pega o item 'Abacaxi'
var segundoItem = listaDeFrutas[1]; // Pega o item 'Manga'
var terceiroItem = listaDeFrutas[2]; // Pega o item 'Limão'

Uma outra forma bem interessante de acessar os elementos dentro de um array e fazendo a iteração sobre ele.

Ou seja, percorrendo todos os elementos do array utilizando estruturas de repetição como:

while;
for;
forEach()

Utilizando essa forma o código ficaria da seguinte forma:

listaDeFrutas.forEach(function (item, indice) {
  console.log(item, indice);
});
// Abacaxi 0
// Manga 1
// Limão 2
// Pêra 3
// Maçã 3

Lembrando que o tamanho e o tipo não são elementos fixos em um array Javascript, já que podemos a qualquer momento inserir ou remover seus elementos.

Agora que já entendemos o conceito por trás de um array Javascript, vamos conhecer alguns métodos bem populares pelos programadores para lidar com arrays.

Veja também: Vale a pena investir no curso de JavaScript da OneBitCode?

Métodos de Array em JavaScript

Primeiramente, temos que entender que existem alguns métodos de array bem populares entre os programadores.

Continue a leitura para conhecer todos eles.

Acessando um elemento com o método indexOf()

O método indexOf() tem como objetivo acessar um índice de um determinado elemento apenas informando o nome dele.

Por exemplo:

var listaDeFrutas = ['Abacaxi','Manga','Limão','Pêra','Maçã'];
var pos = listaDeFrutas.indexOf('Limão');
// pos = 2

Adicionando elementos com o método push()

Outro método bem interessante e que é muito utilizado é o push(). Com ele podemos adicionar facilmente um novo elemento em nosso array.

Vale lembrar que ao adicionar um elemento usando esse método, o mesmo irá ser inserido no final do array.

Exemplo:

var listaDeFrutas = ['Abacaxi','Manga','Limão','Pêra','Maçã'];
listaDeFrutas.push('Laranja');
// ['Abacaxi','Manga','Limão','Pêra','Maçã', 'Laranja']

Caso você precise inserir um novo elemento no início do array, utilize o método unshift().

Exemplo:

var listaDeFrutas = ['Abacaxi','Manga','Limão','Pêra','Maçã'];
listaDeFrutas.unshift('Laranja');
// ['Laranjas','Abacaxi','Manga','Limão','Pêra','Maçã']

Ou seja, independente do método, é necessário passar por parâmetro o elemento que desejamos adicionar no array Javascript.

Removendo elementos com o método shift()

Por fim, temos o método shift() que basicamente remove um elemento do início de um array.

Para utilizar esse método basta fazer o seguinte:

var listaDeFrutas = ['Abacaxi','Manga','Limão','Pêra','Maçã'];
listaDeFrutas.shift();
// ['Manga','Limão','Pêra','Maçã']

Caso precise remover um elemento no final de um array, utilize o método pop().

Exemplo:

var listaDeFrutas = ['Abacaxi','Manga','Limão','Pêra','Maçã'];
listaDeFrutas.pop();
// ['Abacaxi','Manga','Limão','Pêra']

Independente dos métodos não é necessário informar o elemento como parâmetro.

Uma outra forma de remover itens é a partir do seu índice utilizando o método splice().

Exemplo:

var listaDeFrutas = ['Abacaxi','Manga','Limão','Pêra','Maçã'];
var pos = listaDeFrutas.indexOf('Pêra');//pos = 3
listaDeFrutas.splice(pos, 1)
// ['Abacaxi','Manga','Limão','Maçã']

Ou seja, utilizando o método splice() o primeiro parâmetro deve ser a posição a partir do qual queremos remover os elementos, já o segundo parâmetro é a quantidade que queremos remover.

Veja também: Vale a pena investir no curso de JavaScript da OneBitCode?

Qual a diferença entre vetor e array?

Existe muita polêmica sobre a resposta para essa pergunta, porém vou deixar aqui o que é mais aceito na comunidade de programadores.

Array é basicamente um nome inglês para que chamamos de vetor aqui no Brasil.

Ou seja, um vetor é uma matriz de uma única dimensão, logo, tem uma única linha e uma única coluna de dados.

Geralmente utilizamos o termos matriz quando existe mais de uma dimensão, logo, ter mais de uma linha e mais de uma coluna.

Respondendo a pergunta de forma resumida: matriz é um vetor multidimensional.

Enfim, parece algo muito completo, porém quando entendemos o conceito fica muito mais simples de aplicar isso no nosso dia a dia.

Conclusão

Em conclusão, aprendemos o que são arrays Javascript, onde utilizamos eles para agrupar, armazenar e organizar os dados na memória do computador.

Também vimos que eles não possuem tamanho nem tipo fixo, ou seja, podemos inserir, remover e trocar os elementos de posição.

Além disso, aprendemos como utilizar os métodos mais populares para manipular arrays.

Enfim, agora recomendo que você se aprofunde ainda mais para continuar a sua evolução nos estudos.

Para isso, recomendo clicar no botão abaixo e conferir um curso completo que vai te ensinar tudo que você precisa para se tornar um programador Javascript profissional.

ACESSAR CURSOS COM CERTIFICADO

Recomendo fortemente que faz um teste de 7 dias, você realmente não tem nada a perder.

Enfim, espero que tenha gostado desse conteúdo e que ele tenha te ajudado de alguma forma.

Um forte abraço.