Variáveis, Arrays e Objetos: Guardando e Manipulando. 🌴 TRILHA JavaScript 🚀 Etapa 12

Academy Code Christ 0
 Seja muito bem-vindo à Academy Code Christ!  


🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) 
e aprender no seu idioma.

📚 Continue sua jornada de aprendizado



A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.  


📋 Menus correspondentes:



💻 Pratique o que você aprende

Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.


🚀 Etapa 12 

 O que você vai aprender nesta aula?


🧠 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.



📚 Continue aprendendo JavaScript:





🚀 Etapa 05 👉 Estruturas Condicionais

🚀 Etapa 06 👉 Laços de Repetição

🚀 Etapa 07 👉 Funções

🚀 Etapa 08 👉 Eventos

🚀 Etapa 09 👉 O DOM



🚀 Etapa 12 👉 Você está nessa Etapa



Este conteúdo faz parte do Academy Code Christ. 

Um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Nossa missão é compartilhar conhecimento e incentivar mais pessoas a descobrir que também podem aprender tecnologia, criar projetos e desenvolver novas habilidades.
Todo o conteúdo é disponibilizado gratuitamente, de forma clara, prática e 
sem enrolação. 

Você pode apoiar o projeto se quiser 
com um café. 


Tags

Post a Comment

Postar um comentário

Postagem Anterior Próxima Postagem