Objetos e Arrays no JavaScript – Dominando a Organização dos Dados!

Se você já escreveu qualquer código em JavaScript, com certeza se deparou com duas ferramentas poderosíssimas: Objetos e Arrays. Eles são os responsáveis por manter tudo organizado e estruturado, como se fossem os armários e gavetas do seu código!

Se liga que hoje vamos entender como esses dois funcionam, seus métodos mais comuns e como podemos manipulá-los com elegância. 🚀

1. Objetos: Os Organizadores de Informações

Objetos no JavaScript são coleções de chave: valor que nos permitem armazenar dados de maneira estruturada. Eles são como uma ficha cadastral: você tem diferentes informações associadas a uma mesma entidade.

Criando um Objeto

Podemos criar um objeto de forma simples usando chaves {}:

const pessoa = {
    nome: "Carlos",
    idade: 28,
    profissao: "Desenvolvedor",
    saudacao: function() {
        return `Oi, meu nome é ${this.nome} e eu sou um ${this.profissao}!`;
    }
};

Aqui temos um objeto pessoa que armazena algumas propriedades e até uma função!

Acessando Propriedades

Podemos acessar os valores usando ponto ou colchetes:

console.log(pessoa.nome); // Carlos
console.log(pessoa["idade"]); // 28
console.log(pessoa.saudacao()); // Oi, meu nome é Carlos e eu sou um Desenvolvedor!

Alterando e Adicionando Propriedades

Objetos são dinâmicos e podemos modificar suas propriedades ou adicionar novas facilmente:

pessoa.idade = 29; // Alterando idade
pessoa.cidade = "São Paulo"; // Adicionando nova propriedade

console.log(pessoa);

2. Arrays: Listas de Itens

Arrays são listas ordenadas que permitem armazenar vários valores em uma mesma variável. Eles são muito usados quando precisamos organizar coleções de itens, como uma playlist de músicas ou uma lista de compras.

Criando um Array

Podemos criar arrays de duas formas:

const listaCompras = ["Maçã", "Pão", "Leite"];
const numeros = new Array(1, 2, 3, 4);

Acessando Elementos

Os itens do array são acessados por índices, que começam do zero:

console.log(listaCompras[0]); // Maçã
console.log(listaCompras[2]); // Leite

Alterando e Adicionando Elementos

Podemos modificar elementos ou adicionar novos:

listaCompras[1] = "Queijo"; // Substitui "Pão" por "Queijo"
listaCompras.push("Cereal"); // Adiciona "Cereal" ao final
console.log(listaCompras);

3. Métodos Úteis de Arrays

O JavaScript oferece vários métodos incríveis para manipular arrays. Vamos ver os principais:

push() e pop()

• push() adiciona um elemento ao final do array.
• pop() remove o último elemento do array.

const frutas = ["Banana", "Maçã"];
frutas.push("Uva"); // Adiciona "Uva"
frutas.pop(); // Remove "Uva"
console.log(frutas);

map()

Percorre o array e aplica uma função a cada elemento, retornando um novo array.

const numerosDobro = numeros.map(num => num * 2);
console.log(numerosDobro); // [2, 4, 6, 8]

filter()

Cria um novo array apenas com os elementos que passam em um teste.

const maioresQueDois = numeros.filter(num => num > 2);
console.log(maioresQueDois); // [3, 4]

forEach()

Executa uma função para cada elemento do array, mas não retorna um novo array.

frutas.forEach(fruta => console.log(fruta));

4. Juntando Tudo: Objetos Dentro de Arrays

Um exemplo clássico é um array de objetos, como uma lista de produtos:

const produtos = [
    { nome: "Celular", preco: 1500 },
    { nome: "Notebook", preco: 3000 },
    { nome: "Tablet", preco: 1200 }
];

const produtosCaros = produtos.filter(produto => produto.preco > 2000);
console.log(produtosCaros); // [{ nome: "Notebook", preco: 3000 }]

Conclusão

Agora que você entende melhor objetos e arrays, pode estruturar seus dados de forma mais eficiente. Pratique criando seus próprios objetos e manipulando arrays com os métodos aprendidos. Quanto mais você testar, melhor!

🚀 Pronto para a próxima aula?