Desenvolvimento Front-end Javascript

Trabalhando com arrays e objetos no JavaScript

Confira neste artigo como trabalhar com Arrays e Objetos no JavaScript. Vamos aprender a declarar e manipular Arrays e Objetos com exemplos.

4 meses atrás

Saber utilizar arrays e objetos no JavaScript é de extrema importância. Neste artigo vamos aprender como declarar e utilizar arrays e objetos com exemplos práticos.

JavaScript - Fundamentos
Curso JavaScript - Fundamentos
Conhecer o curso

O que são arrays em JavaScript?

O array é um objeto no JavaScript, ele nos auxilia pois podemos utilizar uma única variável para armazenar uma lista de diferentes elementos.

Por exemplo, imagine que seja necessário armazenar os nomes de todos os alunos de uma sala de aula, criar uma variável para cada aluno seria, no mínimo, trabalhoso, dependendo do tamanho dos dados eu diria inviável.

Nesta ideia podemos então criar a variável alunos e com isso armazenar o nome de todos os alunos.

Como declarar um array no JavaScript?

Para utilizar os Arrays precisamos declarar uma variável (você pode acessar o nosso artigo conhecendo variáveis e constantes no JavaScript para saber como declarar variáveis).

E ao atribuir um valor, vamos colocar entre [] e separar cada um por ,. Por exemplo:

let alunos = ['Wesley', 'Marina', 'Bruno', 'Paula'];
var series = ['Game of Thrones', 'Friends', 'Vikings'];

Obs: lembrando que nossas listas são variáveis, portanto podem ser declaradas tanto com let ou var.

Nós podemos declarar arrays sem nenhum item e tamanho, ou somente com tamanho definido mas vazio, da seguinte forma:

let alunos = Array(20);
var series = [];

No primeiro exemplo nós declaramos e atribuímos 20 posições para o array alunos, e no segundo exemplo deixamos em aberto o tamanho do array. Para popular o array, é só atribuir um valor junto ao índice:

let alunos = Array(20);
alunos[0] = 'Paulo';

Curiosidade: no JavaScript nós temos o método Array.isArray(obj); que permite verificar se um objeto é um array, utilizando um dos exemplos acima nós temos o seguinte resultado:

Ele retorna true caso seja um array e false caso não seja.

Mas enfim, declaramos nossos arrays. Porém, como podemos acessar os dados armazenados?

Como alterar e acessar itens de um array no JavaScript?

Para acessar um item de um array é muito simples, basta utilizarmos o índice da posição do item.

Em relação ao nosso exemplo, nós não adicionamos os itens a um índice declarado, portanto o JavaScript inicia do índice 0 e incrementa cada item posterior. Portanto, para exibir um item podemos fazer da seguinte forma:

console.log(alunos[1]);

Neste caso vamos exibir o item que se encontra no índice 1, lembrando que a nossa lista é iniciada no índice 0, portanto, teremos o seguinte resultado:

Ao executar o console.log(alunos[1]) obtemos o retorno ‘Marina’.

Para alterar um elemento, basta usar o nome do array com o índice e atribuir o novo valor:

alunos[2] = 'Gabriel';

Ao executar o código acima o aluno Bruno será alterado pelo aluno Gabriel.

Como adicionar um novo elemento a um array?

JavaScript Intermediário
Curso JavaScript Intermediário
Conhecer o curso

Para adicionar um elemento a um array nós utilizamos o método push(), da seguinte forma:

alunos.push('Bruno');

Após a execução do método push() podemos verificar que o aluno Bruno foi adicionado ao final do array, que agora possui 5 posições:

Outro ponto importante que vale ressaltar é que o JavaScript permite um array de elementos de tipos diferentes:

let array = [1, 'Paulo', 2, 'Marina', 3, 'Bruna'];
typeof array[0];
typeof array[1];

No exemplo acima declaramos o array array com itens do tipo number e string e utilizamos o operador typeof para verificar o tipo de cada elemento. Ao executar o código acima vamos obter o seguinte resultado:

Como podemos ver, para o índice 0 temos um elemento do tipo number e para o índice 1 temos o um elemento do tipo string.

Você pode aprender sobre métodos utéis para trabalhar com arrays no nosso artigo “Javascript: métodos de arrays que voce precisa conhecer”.

Como utilizar objetos no JavaScript

Nós utilizamos objetos para agrupar valores que possuem propriedades e funções, podemos por exemplo fazer uma analogia aos objetos do mundo real. Um carro que possui cor e marca, ele também realiza ações como acelerar e frear.

Para declarar um objeto a sintaxe é bem parecida a que utilizamos para declarar arrays, porém trocamos os [] por {}. Onda as chaves, valores e funções são declaradas entre {}, conforme abaixo:

let carro = {
		modelo: 'gol',
		cor: 'vermelho',
		acelerar(){
			console.log('Acelerando...');
		},
		frear(){
			console.log('Freando');
		},
};

Neste caso declaramos o objeto literal carro, que possui duas propriedades, modelo e cor, que podem ser chamadas de chaves. Declaramos também duas funções, acelerar e frear, que podem ser chamadas de métodos. Vale ressaltar que nós podemos declarar de outras formas as funções: acelerar: function () {}ou utilizando uma arrow function, acelerar: () => {}.

Após declarar nosso objeto, podemos executar um cosole.log(carro); para visualizar como é apresentado:

Como acessar as propriedades ou funções de um Objeto?

Para acessar uma propriedade ou uma função basta utilizarmos o nome do objeto seguido da propriedade/função separada por ponto. Por exemplo:

console.log(carro.modelo);
console.log(carro.acelerar);
carro.acelerar();

Utilizamos a função console.log, para exibir os dados acessados no console, importante lembrar que para executar a função acelerar não podemos esquecer dos ().

Ao executar o código acima, vamos obter o seguinte resultado:

Outra forma que podemos utilizar para acessar propriedades é utilizando o padrão objeto['propriedade'], o que possibilita usarmos variáveis para estar acessando as propriedades de um objeto.

Como alterar e adicionar novas propriedades a um objeto?

Para adicionar uma propriedade em um objeto no JavaScript é bem simples, basta usarmos a sintaxe de acesso às propriedades porém atribuindo um valor a nova propriedade inexistente, podemos fazer de duas formas:

carro.ano = 2011;
carro['marca'] = 'Volkswagen'

Ao executar esse código as novas propriedades são adicionadas em nosso objeto:

Para alterar as propriedades de um objeto basta utilizar a mesma lógica acima, porém com uma propriedade já existente:

carro.cor = 'prata';
carro['ano'] = 2010;

Ao executar o código acima os dados das propriedades são atualizados:

Como deletar uma propriedade de um objeto?

Para deletar basta usarmos o operador delete, seguindo a lógica do objeto.propriedade:

delete carro.ano;

Desta forma a propriedade ano não fará mais parte do nosso objeto carro:

Conclusão

Neste artigo tivemos o primeiro contato com a manipulação de arrays e objetos no JavaScript, podemos perceber que a linguagem permite trabalhar esses conceitos de forma flexível e eficiente.

Desenvolvedor Front-end
Formação Desenvolvedor Front-end
Conhecer a formação

Autor(a) do artigo

Wesley Gado
Wesley Gado

Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão.

Todos os artigos

Artigos relacionados Ver todos