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.
Curso JavaScript - Fundamentos
Conhecer o cursoO 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?
Curso JavaScript Intermediário
Conhecer o cursoPara 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.
Formação Desenvolvedor JavaScript
Conhecer a formaçãoPor fim, caso queira aprender mais sobre JavaScript saiba que aqui na TreinaWeb temos o curso JavaScript Intermediário que possui 03h38 de vídeos e um total de 38 exercícios. Conheça também nossos outros cursos de JavaScript.
Veja quais são os tópicos abordados durante o curso de JavaScript - Fundamentos:
- Orientação a Objetos;
- Protótipos e Classes;
- Tratamento de Erros e Debugging;
- Trabalhando com Expressões Regulares;
- Recursividade, escopo e closure;
- Location, History e Window;
- Trabalhando com Formulários;
- Abrindo e Salvando arquivos;
- Requisições HTTP;
- Conhecendo o jQuery.
