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.

Wesley Gado 9 de março de 2021

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 de JavaScript - Fundamentos
CONHEÇA 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:

Usando Array.isArray

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:

Exibindo array alunos com console.log no JavaScript

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.

Alterando elementos de um array no JavaScript

Como adicionar um novo elemento a um array?

JavaScript Intermediário
Curso de JavaScript Intermediário
CONHEÇA 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:

Usando método push para adicionar elemento a um array

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:

Tipos de elementos em uma String

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:

Objeto

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:

Acessando Objetos

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.

Acessando propriedade de objetos com variáveis

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:

Adicionando propriedades

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:

Atualizando propriedades

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:

Excluindo propriedades

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
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO
Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor 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.

    Posts desse Autor

Artigos relacionados