7.2.3 - Variáveis
🧬 Tipos de Dados em JavaScript: O que estou guardando?
🧬 Tipos de Dados em JavaScript: O que estou guardando?
Agora que você já sabe criar variáveis e entende seus tipos básicos, chegou a hora de se aprofundar: 🔍 O que exatamente essas variáveis estão guardando? 💾 Como o JavaScript trata cada tipo por trás das cortinas?
Bora mergulhar no universo dos tipos de dados! 🚀
🔢 Tipos Primitivos: Os blocos básicos
Os tipos primitivos são como os tijolinhos básicos da linguagem. Eles não são objetos, são valores diretos, simples e imutáveis.
string
"Oi"
Textos, entre aspas simples ou duplas
number
42, 3.14
Qualquer número (inteiro ou decimal)
boolean
true, false
Lógica: sim ou não, ligado ou desligado
undefined
(sem valor)
A variável foi criada, mas não tem valor ainda
null
null
Intencionalmente sem valor
bigint
123456789n
Números enormes, além do limite do number
symbol
Symbol("id")
Identificadores únicos (mais avançado)
⚠️ Importante:
Primitivos não são objetos
Não têm métodos próprios (mas o JS pode envolver eles temporariamente para operar)
🧳 Tipos de Referência: Estruturas mais complexas
Esses tipos são mais como malas que carregam vários valores dentro.
object
{ nome: "Ana", idade: 19 }
Um conjunto de pares chave:valor
array
[1, 2, 3]
Uma lista ordenada
function
function soma() {}
Um bloco de código que pode ser executado
date, map, set, etc.
(mais avançados)
Objetos especiais para tarefas específicas
💡 Características:
Guardam referência (endereço) na memória
Podem ser alterados internamente
São mutáveis
🧠 Stack vs Heap: Onde os dados moram?
🧱 Stack (pilha):
Guarda os tipos primitivos
Espaço de memória rápido e pequeno
Cada valor é copiado
📦 Heap (monte):
Guarda os tipos de referência
Espaço de memória maior e mais lento
Valores são acessados por referência
⚖️ Comparando os tipos
🔁 Comparando tipos primitivos
let a = 10;
let b = 10;
console.log(a === b); // true ✅➡️ Os valores são iguais e estão separados na memória
🔁 Comparando tipos de referência
let obj1 = { nome: "João" };
let obj2 = { nome: "João" };
console.log(obj1 === obj2); // false ❌➡️ Mesmo que o conteúdo seja igual, os objetos estão em lugares diferentes na memória
🧬 Comparando primitivo com referência
let nome = "Lucas"; // primitivo
let obj = { nome: "Lucas" }; // referência
console.log(nome === obj.nome); // true ✅➡️ Aqui estamos comparando valores primitivos (ambos são strings), então dá certo.
🪄 Conversão de tipos
🔃 Primitivo virando referência (boxing automático)
let texto = "oi";
console.log(texto.toUpperCase()); // "OI"Mesmo sendo um string primitivo, o JavaScript cria um objeto temporário só pra executar o método!
🔃 Referência virando primitivo
let pessoa = { nome: "Ana", idade: 20 };
console.log(pessoa.nome); // "Ana"A gente acessa um valor primitivo que está dentro do objeto.
🧪 Exemplos que causam erro (ou confusão)
🧨 Copiando objetos
let pessoa1 = { nome: "João" };
let pessoa2 = pessoa1;
pessoa2.nome = "Carlos";
console.log(pessoa1.nome); // "Carlos" 😱➡️ Como pessoa1 e pessoa2 apontam pro mesmo lugar, alterar um afeta o outro!
✅ Copiando corretamente
let pessoa1 = { nome: "João" };
let pessoa2 = { ...pessoa1 }; // spread operator
pessoa2.nome = "Carlos";
console.log(pessoa1.nome); // "João" 😎🧭 Quando usar cada tipo?
Use primitivos quando:
✅ Você precisa de um valor simples ✅ O valor não vai mudar internamente ✅ Precisa de comparações diretas ou números/textos básicos
Use referência quando:
✅ Você precisa agrupar dados ✅ Precisa manipular listas, pares de valor ✅ Vai alterar os valores internamente (como editar um perfil)
👩🏫 Boas práticas
✅ Prefira const para objetos e arrays que não serão reatribuídos
✅ Use let só quando precisar alterar
✅ Use nomes claros para tipos de referência (dadosUsuario, listaDeProdutos)
✅ Use métodos como slice(), map(), filter() para copiar arrays com segurança
🚫 Más práticas
❌ Reatribuir tipos diferentes na mesma variável ❌ Alterar objetos sem verificar se são cópias ou referências ❌ Comparar objetos diretamente achando que eles são “iguais”
🧠 Dica avançada: tipos foram criados para organizar o caos!
Imagine um mundo onde tudo fosse só texto! 😵
"5" + "5" viraria "55", e não 10
Você nunca saberia se "true" é verdadeiro mesmo...
➡️ Os tipos organizam a lógica, ajudam o computador a entender o que fazer e evitam bugs estranhos.
💬 Observação importante: Comentários no seu código 📝
Sabe quando você escreve um bilhetinho pra lembrar algo? Ou deixa uma dica pra outra pessoa entender o que você fez? No código, a gente faz isso com comentários! 👀✨
📌 O que são comentários?
Comentários são linhas no código que o computador ignora. Elas servem apenas para ajudar você e outras pessoas a entender o que está acontecendo no programa.
✍️ Como fazer um comentário?
✅ Comentário de uma linha:
// Isso é um comentário de uma linha
let nome = "Ana"; // Também pode estar no final de uma linha✅ Comentário de várias linhas:
/*
Esse é um comentário
que ocupa mais de uma linha.
Muito útil pra explicações maiores!
*/
let idade = 21;🎯 Para que servem os comentários?
👨🏫 Explicar o que o código faz
🧠 Escrever ideias para implementar depois
❌ Desativar uma linha de código sem apagar (pra testar)
💬 Deixar o código mais legível pra outras pessoas (ou pra você mesmo no futuro!)
⚠️ Dica de ouro: use com equilíbrio!
🟢 Boas práticas:
Comentar o porquê de algo (não só o que faz)
Explicar partes mais complicadas do código
Ser claro e direto
🔴 Más práticas:
Escrever comentário inútil:
let idade = 18; // define idadeEncher o código de comentário sem necessidade
Deixar comentários antigos que não fazem mais sentido
💡 Exemplo real:
// Verifica se o usuário é maior de idade
if (idade >= 18) {
console.log("Você pode acessar o sistema.");
} else {
console.log("Acesso negado para menores de idade.");
}🧼 Lembre sempre:
Um código bem escrito quase não precisa de comentário. Mas um bom comentário pode salvar seu futuro-eu ou ajudar alguém do seu time! 🚀
✨ Recapitulando
Primitivos: simples, imutáveis, copiados na stack
Referência: complexos, mutáveis, apontam para a heap
Comparar objetos = comparar endereços
Converter tipos é comum, mas exige atenção
Cuidar de como você copia e altera variáveis evita bugs!
🔗 Quer se aprofundar mais? Fontes confiáveis pra explorar 🕵️♀️
Se você ficou curioso(a) com tudo que a gente viu até aqui — variáveis, tipos de dados, memória, stack, heap e indireção — aqui vão alguns links maneiros pra você explorar com calma, todos em português e super respeitados na comunidade de programação. 🌍💻
📦 Como uma variável funciona no fundo do computador?
👉 Funcionamento do armazenamento de uma variável
Uma explicação bem detalhada sobre como os valores são guardados na memória, o que acontece no momento em que você escreve algo como let x = 10, e como isso vira informação que o computador entende. Ótimo pra quem quer entender o que rola "por trás da cortina"! 🎩✨
🔤 O que é uma variável, afinal?
👉 O que é uma variável? Esse link traz uma explicação mais ampla sobre o conceito de variável, desde a origem matemática até como ela se aplica na programação. Super útil pra reforçar o que a gente já viu, e ver outros pontos de vista. 📘
🧭 O que é "indireção"? Parece complicado, mas calma!
👉 O que é indireção? Aqui entra um conceito mais técnico, mas MUITO importante: a indireção. Em poucas palavras, é quando uma variável aponta pra outra coisa, e não para um valor direto — tipo o que acontece com objetos e arrays! Esse link explica de forma clara com exemplos simples.
🧠 Onde ficam as variáveis na memória? Stack e Heap na prática
👉 O que são e onde estão a stack e heap? Esse aqui é um verdadeiro mapa da mina pra quem quer entender como o computador organiza a memória. Explica onde ficam os dados simples (stack) e os mais complexos (heap), e como isso influencia o comportamento das variáveis. Ideal pra reforçar o que a gente viu na seção anterior. 📊📈
💬 Dica de ouro:
Essas discussões vêm da comunidade do Stack Overflow em Português, um site onde programadores e programadoras ajudam uns aos outros com dúvidas reais. É uma ótima fonte pra aprender, mas também pra participar, perguntar e ajudar quando você estiver pronto(a). 👥💬
📚 Estudar com fontes diferentes te ajuda a ver o mesmo conceito por ângulos diferentes. Então, aproveita esses links pra revisar, reforçar e até aprender um pouco mais do que foi falado aqui.
E lembre-se: cada clique que você dá em busca de aprender é um passo a mais no seu futuro na tecnologia! 🚀
Last updated