Variáveis, Arrays e Objetos no JavaScript: Guardando e Manipulando Dados

 Bem-vindo(a) ao post no blog.  

🧠 O que é uma Variável

Uma variável é um espaço na memória onde guardamos uma informação temporária — um nome, um número, um valor lógico etc.
 Pense nela como uma “caixa com etiqueta”: o nome da variável é a etiqueta, e o conteúdo é o valor armazenado.

Exemplo:

let nome = "Maria";

let idade = 25;

 

console.log(nome); // Maria

console.log(idade); // 25

 

💡 Neste exemplo, nome e idade são variáveis que armazenam textos e números.

🔤 Tipos de Dados mais Comuns

Tipo	Exemplo	Descrição
String	"Olá mundo"	Texto entre aspas
Number	10, 3.14	Números inteiros ou decimais
Boolean	true ou false	Verdadeiro ou falso
Array	[1, 2, 3]	Lista de valores
Object	{nome: "Ana", idade: 30}	Estrutura com chaves e valores
Null	null	Valor intencionalmente vazio
Undefined	variável não inicializada	Valor indefinido

⚙️ Declaração de Variáveis

Desde o ES6 (nova versão do JavaScript), temos três formas principais de declarar variáveis:

Palavra-chave	Escopo	Pode mudar	Uso comum
var	Global (antigo, evite usar)	Sim	Legado
let	Local (bloco)	Sim	Quando o valor muda
const	Local (bloco)	Não	Quando o valor é fixo

Exemplo:

var nome = "João";     // antigo, evite

let idade = 22;        // pode mudar depois

const PI = 3.14159;    // valor fixo (constante)

 

💬 Mostraremos adiante que em estruturas maiores (objetos, arrays), mesmo com const, o conteúdo interno pode ser alterado apenas a referência é fixa.

🧮 Operações com Variáveis

let a = 10;

let b = 5;

let soma = a + b;

 

console.log(soma); // 15

 

Outros operadores úteis:
 - (subtração), * (multiplicação), / (divisão), % (resto), ** (exponenciação).

E também:

a++; // incrementa 1

b--; // diminui 1

 

ou operações diretas:

a += 2;  // a = a + 2

 

📦 Arrays Guardando Múltiplos Valores

Um array (lista) é uma coleção de valores dentro de colchetes [ ].
 Cada valor tem uma posição (índice), começando do 0.

Pense no Array como uma prateleira de sapatos (vários itens do mesmo tipo, um ao lado do outro). Já o Objeto é como uma ficha de cadastro de uma pessoa: tem nome, idade, altura e cor favorita. Cada um serve para uma organização diferente!

let frutas = ["Maçã", "Banana", "Laranja"];

console.log(frutas[0]); // Maçã

console.log(frutas[2]); // Laranja

 

Adicionando e Removendo Elementos

Método	Ação	Exemplo
.push()	adiciona ao final	frutas.push("Uva")
.pop()	remove o último	frutas.pop()
.shift()	remove o primeiro	frutas.shift()
.unshift()	adiciona ao início	frutas.unshift("Manga")
.splice()	adiciona/remove em posição específica	frutas.splice(1, 1)
.length	quantidade de elementos	frutas.length

💡 Exemplo prático

let numeros = [10, 20, 30];

numeros.push(40);

console.log(numeros); // [10, 20, 30, 40]

console.log(numeros.length); // 4

 

🔁 Percorrendo Arrays

Use loops para acessar cada item do array.

for tradicional:

let cores = ["Vermelho", "Verde", "Azul"];

 

for (let i = 0; i < cores.length; i++) {

  console.log(cores[i]);

}

 

Método forEach:

let carros = ["Fiat", "Chevrolet", "Ford"];

 

carros.forEach(carro => {

  console.log("Marca:", carro);

});

 

💬 forEach() é mais elegante e moderno.

🧩 Objetos Estruturas com Propriedades

Um objeto é uma coleção de chave: valor, muito usado para representar coisas do mundo real.

let pessoa = {

  nome: "Lucas",

  idade: 28,

  profissao: "Programador"

};

 

console.log(pessoa.nome);      // Lucas

console.log(pessoa["idade"]);  // 28

 

Alterando Valores

pessoa.idade = 29;

pessoa["profissao"] = "Desenvolvedor";

 

💡 Você acessa ou altera usando . (ponto) ou ["nomeChave"].

Adicionando Novas Propriedades

pessoa.cidade = "São Paulo";

console.log(pessoa);

 

🛠️ Arrays de Objetos

Você pode combinar listas e objetos para armazenar muitos dados estruturados, como um cadastro.

let alunos = [

  { nome: "Ana", nota: 9 },

  { nome: "Carlos", nota: 7 },

  { nome: "Beatriz", nota: 10 }

];

 

alunos.forEach(aluno => {

  console.log(`${aluno.nome} tirou nota ${aluno.nota}`);

});

 

💬 Estruturas assim são a base de bancos de dados, listas de usuários, produtos, carrinhos de compras, etc.

⚙️ Funções com Arrays e Objetos

Você pode combinar funções com dados armazenados.

function mediaNotas(lista) {

  let soma = 0;

  lista.forEach(item => soma += item.nota);

  return soma / lista.length;

}

 

const turma = [

  { nome: "Leo", nota: 8 },

  { nome: "Clara", nota: 6 },

  { nome: "Rafa", nota: 9 }

];

 

console.log(`Média da turma: ${mediaNotas(turma)}`);

 

💡 Este tipo de lógica é comum em sistemas escolares, relatórios e dashboards.

🧠 Exercício Cadastro Simples

Monte um pequeno sistema de cadastro de nomes.

<input id="nome" placeholder="Digite um nome">

<button id="adicionar">Adicionar</button>

<ul id="lista"></ul>

 

<script>

let nomes = [];

const input = document.getElementById("nome");

const lista = document.getElementById("lista");

const botao = document.getElementById("adicionar");

 

botao.addEventListener("click", () => {

  let nomeDigitado = input.value.trim();

  if (nomeDigitado !== "") {

    nomes.push(nomeDigitado);

 

    lista.innerHTML = "";

    nomes.forEach(item => {

      let li = document.createElement("li");

      li.textContent = item;

      lista.appendChild(li);

    });

 

    input.value = "";

  }

});

</script>

 

💬 Você criou uma lista de nomes dinâmica, adicionando novos dados a cada clique.

🔄 Destructuring (Desestruturação)

É uma forma moderna de extrair valores rapidamente de arrays e objetos.

Exemplo com objetos:

const pessoa = { nome: "Marina", idade: 32, cidade: "Curitiba" };

const { nome, idade } = pessoa;

 

console.log(nome); // Marina

console.log(idade); // 32

 

Exemplo com arrays:

const numeros = [10, 20, 30];

const [primeiro, segundo] = numeros;

 

console.log(primeiro); // 10

console.log(segundo);  // 20

 

💡 Isso deixa o código mais limpo e legível.

⚡ O Poder do JSON

O JSON (JavaScript Object Notation) é o formato mais usado para trocar e armazenar dados estruturados.

let produto = { nome: "Notebook", preco: 2500 };

let textoJSON = JSON.stringify(produto); // objeto → texto JSON

console.log(textoJSON);

// {"nome":"Notebook","preco":2500}

 

let objetoConvertido = JSON.parse(textoJSON); // JSON → objeto

console.log(objetoConvertido.nome); // Notebook

 

💬 JSON é o formato padrão usado em APIs e bancos de dados.

🧩 Boas Práticas

✔️ Use let e const em vez de var;
 ✔️ Nomes de variáveis devem ser claros e descritivos (sem acentos, sem espaços);
 ✔️ Prefira usar arrays e objetos para organizar informações;
 ✔️ Use loops (for ou forEach) para percorrer listas;
 ✔️ Use JSON quando precisar salvar ou transferir dados.

🧠 Hoje você aprendeu:

●     O que são variáveis e tipos de dados;

●     Como guardar e modificar valores;

●     Como trabalhar com listas (arrays);

●     Como criar estruturas de objetos para organizar informações;

●     Como percorrer, alterar e exibir dados;

●     Como combinar tudo para gerar lógica dinâmica.

🎓 Conclusão

Você deu um enorme passo na lógica de programação!
 A partir de agora, você pode estruturar e controlar dados dentro das suas páginas, criando lógicas completas.

Na próxima aula, vamos aprender como salvar essas informações de forma persistente, mesmo quando o usuário fecha o navegador  usando o LocalStorage do JavaScript.

Esse conteúdo faz parte do projeto Academy Code Christ, criado para ajudar iniciantes a aprender programação de forma gratuita e direta.

Se esse conteúdo te ajudou, você pode me pagar um café ☕

Pix: antropologiacrista@gmail.com