Como criar array com JavaScript e principais propriedades

Ao trabalhar com o desenvolvimento web, é muito comum lidar com informações que precisam ser armazenadas em algum lugar, para serem acessadas posteriormente em nossas aplicações. Muitas vezes, é necessário até que façamos a manipulação desses dados, alterando-os ou deletando-os.

Sabemos que o JavaScript é uma linguagem muito poderosa e com diversas possibilidades de manipulações de dados. Uma das principais é a utilização dos Arrays. 

Nesse artigo, aprenderemos sobre esse objeto nativo do JavaScript, capaz de guardar os dados e manipulá-los. Além disso, veremos os seus principais métodos e propriedades.

O que é um array?

O array é um objeto nativo do JavaScript, capaz de armazenar diferentes tipos de dados em uma variável ou constante. Dessa forma, poderemos ter um array contendo strings, números, booleanos, entre outros. Além disso, através dos métodos, é possível manipular esses dados.

Qual a sua sintaxe?

Existem diferentes formas de utilização da sintaxe de criação de um array. A primeira delas é declarando uma variável e inserindo diretamente as informações dentro das chaves. A sintaxe fica da seguinte forma:

Outra forma de utilizarmos a sintaxe de criação de um array é através do construtor new, conforme o exemplo abaixo:

Como se cria um array em JavaScript?

Como acabamos de ver no tópico anterior, existem diferentes maneiras de se declarar um array em nossos códigos. Abaixo, veremos exemplos práticos dessas criações, demonstrando a diferença entre os arrays unidimensionais e bidimensionais.

Array unidimensional

Como o próprio nome já sugere, o array unidimensional é aquele que possui apenas uma dimensão. Ou seja, os elementos dentro da matriz podem ser identificados diretamente por um único índice. Vamos utilizar o exemplo anterior para entendermos melhor sobre esse tipo de array.

Para acessarmos o primeiro elemento, basta chamarmos o array, seguido do índice do elemento que queremos capturar entre chaves. Fique atento ao fato de que todo array começa pelo índice zero.

Array Bidimensional

Diferente do anterior, esse array possui mais de uma dimensão. Basicamente, é um array que armazena outro array. Dessa forma, para acessarmos os elementos ali presentes, precisamos identificá-los através de dois índices.

Vamos imaginar a seguinte situação: Precisamos separar os alunos aqui da Kenzie Academy Brasil pelos módulos em que estão cursando. Em um array, vamos armazenar os dados referentes aos alunos do Módulo 1. Já em outro, colocaremos apenas os do Módulo 2.

Caso quiséssemos acessar o nome do aluno do segundo módulo, faríamos da seguinte forma:

Como usar o array?

É importantíssimo saber como utilizar os arrays corretamente em nossas aplicações. Para manipular os dados ali presentes, existem diversos métodos nativos que podem nos auxiliar. A seguir, veremos na prática como utilizar essas funcionalidades.

Adicionando elementos a um array

Para adicionarmos novos elementos em um array já existente, utilizarmos o método push. Confira o exemplo a seguir: 

Perceba que o nosso elemento “Melância” foi adicionado ao array de frutas na última posição. 

E como faríamos caso quiséssemos adicionar um novo elemento na primeira posição de um array? Para isso, existe o método unshift.

Podemos também adicionar um elemento em qualquer outra posição dentro da nossa lista, utilizando método splice. Esse método recebe como parâmetro três argumentos: a posição do array onde o nosso novo elemento será inserido, a quantidade de itens que serão excluídos desse array e o elemento em si. 

Removendo elementos de um array

Assim como para inserimos os elementos em um array, podemos remover de diferentes posições. Para excluir o primeiro item de um array, utilizamos o método shift. Além da sua exclusão, esse método retorna o elemento removido, caso o seu valor seja atribuído a uma variável.

Já para removermos o último elemento de um array, utilizamos o método pop. Assim como método shift, o elemento removido é retornado, caso seja atribuído a uma variável. 

Da mesma forma que utilizamos o splice para adicionar elementos, podemos utilizá-lo para remover, passando como parâmetro a posição do array e a quantidade de itens excluídos a partir dessa posição.

Alterando elementos de um array

Para alterarmos os elementos de um array, existem duas formas. A primeiro é mais manual, selecionando diretamente o elemento a ser alterado a partir do seu índice e atribuindo um novo valor para ele.

A segunda e mais recomendada forma, é utilizando novamente o método splice. Dessa vez, passando como argumento a posição da lista, a quantidade de itens removidos e o novo item a ser inserido naquela posição.

Iterando arrays

Existem diferentes formas de iteração dos elementos de um Array. Neste artigo, veremos as duas principais e mais utilizadas.

A primeira é através de uma estrutura de repetição, utilizando o looping for. Essa estrutura recebe três parâmetros fundamentais. O primeiro deles é o índice de início do nosso looping. O segundo é até onde essa repetição vai iterar. Para isso, utilizamos o comprimento total do array, através do método length. Já o último, é a iteração de cada elemento.

No exemplo a seguir, iremos iterar e trazer no console do nosso navegador cada elemento presente no array com o seu índice.

Já a seguinte forma de iteração de um array, é utilizando o método forEach, passando como parâmetro uma função de callback, que receberá o elemento atual iterado e o seu índice. Perceba que a sintaxe será bem mais enxuta se comparada a uma estrutura de repetição, como a citada anteriormente. 

Quais as propriedades e métodos do JavaScript Array?

Os arrays, assim como outros objetos nativos do JavaScript, possuem diversas propriedades e métodos próprios, que auxiliam a vida da pessoa programadora no desenvolvimento dos projetos. São eles:

Propriedades

Array.length

Essa propriedade é muito utilizada nas estruturas de repetições e loops. Sua funcionalidade é retornar o tamanho do array. Ou seja, a quantidade de itens presentes dentro dele.

get Array

Essa propriedade possui como objetivo a criação de objetos derivados através de uma função construtora.

Array.prototype

Sua funcionalidade é criar novas propriedades para o array que funcionem como funções. Vejamos o exemplo a seguir: 

Observe que criamos uma nova propriedade com características de função e a utilizamos em nosso array de stacks, manipulando os dados e transformando-os em letras minusculas.

Métodos

Array.from()

Array from é um método nativo do JavaScript, capaz de criar uma nova instância de um Array a partir de diferentes tipos de dados. Ou seja, caso tenhamos um array-like (objeto semelhante a um Array) ou um objeto iterável, podemos utilizar esse método para convertê-los e acessar todas as propriedades, assim como as vantagens, de um Array.

Array.isArray ()

Esse método verifica se a variável ou constante passada como parâmetro é um array. O seu retorno é um booleano.

Array.of ()

Esse método retorna um novo array contendo os elementos passados como parâmetro.

Como utilizar instâncias de array?

Ao instanciar um array, criamos uma cópia do original, herdando todas as suas propriedades e métodos. Essa prática é muito comum quando precisamos manipular os dados. Os principais métodos que retornam um novo array são:

Array.filter ()

Como o próprio nome sugere, utilizamos esse método para filtrar uma determinada informação do nosso array original, retornando em um novo array apenas os elementos que satisfaçam a nossa condição.

No exemplo abaixo, filtraremos apenas os números pares.

Array.map ()

Esse método é bem semelhante ao forEach. A diferença é que o map retorna um novo array, após ter executado uma função de callback para cada item ali presente.

No exemplo abaixo, transformaremos todos os nomes em letras maiúsculas.

Array.concat ()

O método concat retorna um novo array concatenando outros arrays existentes. Ou seja, une as informações de diferentes arrays em apenas um.

Conclusão

Nesse artigo, vimos sobre um dos recursos mais utilizados do JavaScript. Aprender a armazenar e manipular os dados nos Arrays é parte fundamental do trabalho de uma pessoa programadora em sua rotina nas empresas.

Porém, isso é apenas a ponta do iceberg. Existe muito mais a se aprender sobre arrays, suas propriedades e métodos. Aqui na Kenzie Academy Brasil, preparamos os nossos estudantes para se tornarem profissionais qualificados utilizando uma das linguagens mais requisitadas do mercado: o JavaScript. 

Se deseja aprender mais sobre essa linguagem de programação, que está em alta entre as empresas de tecnologia, venha conhecer a formação em Desenvolvimento Full Stack da Kenzie Academy Brasil.