7.2.1 - Variáveis

🔗 Juntando tudo! Concatenação de Variáveis 💬➕

🔗 Juntando tudo! Concatenação de Variáveis 💬➕

Quando a gente quer unir informações em uma única frase, mensagem ou valor, usamos algo chamado concatenação. É como montar uma frase com blocos de LEGO, juntando variáveis, textos e números!

---

🧱 O que é concatenação?

Concatenar significa unir valores, normalmente textos (strings), formando uma nova frase ou resultado. Em JavaScript, existem duas formas principais de fazer isso:

---

🧵 1. Concatenando com o operador +

Essa é a forma mais clássica e simples:

let nome = "Lara";
let idade = 20;

let mensagem = "Olá, meu nome é " + nome + " e tenho " + idade + " anos.";

console.log(mensagem);
// Olá, meu nome é Lara e tenho 20 anos.

💡 Repare que usamos aspas para os textos fixos e + para juntar com as variáveis.

---

🧠 Cuidado: tudo vira texto!

Quando você concatena uma string com um número, o número vira string também:

let resultado = "10" + 5;
console.log(resultado); // "105" e não 15!

---

✨ 2. Template Literals (crase ` `)

Desde o ES6, existe uma forma muito mais moderna e legível de concatenar:

let nome = "Carlos";
let cidade = "Salvador";

let mensagem = `Olá, meu nome é ${nome} e moro em ${cidade}.`;

console.log(mensagem);
// Olá, meu nome é Carlos e moro em Salvador.

✅ Mais fácil de escrever ✅ Mais fácil de ler ✅ Funciona até com quebras de linha!

---

🧪 Exemplo com quebra de linha:

let nome = "Júlia";
let hobby = "desenhar";

let bio = `Oi! Eu sou ${nome}.
Adoro ${hobby} nas horas vagas.`;

console.log(bio);

// Oi! Eu sou Júlia.
// Adoro desenhar nas horas vagas.

---

📌 Dica bônus: concatenação de arrays

Sim, você também pode juntar arrays!

let a = [1, 2];
let b = [3, 4];

let juntos = a.concat(b); // [1, 2, 3, 4]

Ou, mais modernamente:

let juntos = [...a, ...b]; // Spread operator!

---

🎯 Recapitulando

• + junta strings (e converte número em texto se misturar!)

• Template literals (com crase `) deixam tudo mais bonito ✨

• Também dá pra juntar arrays!

---

Prontinho! Agora você já pode montar frases dinâmicas no seu código como um(a) verdadeiro(a) desenvolvedor(a) 💬👩‍💻👨‍💻