Operadores e texto
Com operadores você faz contas e comparações; com template literals, monta frases que misturam texto e valores. Duas ferramentas do dia a dia.
Estudar esta lição interativa →Guardar valores é só o começo. A graça de programar é fazer coisas com esses valores, e a ferramenta mais básica para isso são os operadores: símbolos que combinam ou comparam valores para produzir um resultado. Você já conhece os aritméticos da escola: + soma, - subtrai, * multiplica e / divide. Em JavaScript, eles funcionam exatamente como você espera.
Tem um operador, porém, que costuma ser novidade: o %, chamado de resto (ou módulo). Ele não devolve o resultado da divisão, e sim o que sobra dela. Por exemplo, 7 % 3 é 1, porque o 3 cabe duas vezes dentro do 7 (dá 6) e sobra 1. Isso parece um detalhe matemático sem utilidade, mas é surpreendentemente comum na prática. O uso mais clássico é descobrir se um número é par ou ímpar: todo número par dividido por 2 deixa resto 0, e todo ímpar positivo deixa resto 1 (com negativos, -3 % 2 dá -1; por isso, no código, o teste mais seguro é "o resto é diferente de zero"). Guarde esse truque: mais adiante, quando você aprender a comparar valores (no próximo módulo), vai usar o resto por 2 para separar pares de ímpares o tempo todo.
// Operadores matemáticos
console.log(7 + 3); // soma -> 10
console.log(7 - 3); // subtração -> 4
console.log(7 * 3); // multiplicação -> 21
console.log(7 / 2); // divisão -> 3.5
console.log(7 % 3); // resto da divisão -> 1
// Atalhos muito usados:
let pontos = 10;
pontos += 5; // o mesmo que: pontos = pontos + 5
console.log(pontos); // 15
pontos++; // soma 1
console.log(pontos); // 16Ainda sobre operadores, existe um grupo de atalhos que vale conhecer agora, porque eles aparecem em todo lugar. Sempre que você quer atualizar uma variável usando o próprio valor dela (somar mais um pouco, subtrair, dobrar), dá para escrever de forma abreviada, sem repetir o nome da variável dos dois lados:
| Você quer | Forma longa | Atalho |
|---|---|---|
| Somar 5 | pontos = pontos + 5 | pontos += 5 |
| Subtrair 3 | pontos = pontos - 3 | pontos -= 3 |
| Dobrar | pontos = pontos * 2 | pontos *= 2 |
| Somar 1 | pontos = pontos + 1 | pontos++ |
Todos fazem a conta com o valor atual da variável e guardam o resultado de volta nela mesma.
A última linha merece um olhar especial. Somar 1 é a operação mais frequente de todas (contar cliques, avançar um placar, passar para o próximo item da fila), e por isso ela ganhou o atalho mais curtinho: pontos++. A partir de agora, todos esses formatos vão aparecer o tempo todo, então vale se acostumar com eles desde já.
Agora, do lado dos textos. É muito comum precisar montar uma frase que mistura texto fixo com valores guardados em variáveis, algo como "Olá, Ana, você tem 3 mensagens novas". O jeito antigo de fazer isso era ir somando os pedaços com +, colando texto e variáveis um a um. Funciona, mas fica trabalhoso e é fácil escorregar (esquecer um espaço, um + no lugar errado, e por aí vai).
O JavaScript moderno oferece um jeito bem mais limpo: os template literals. A ideia tem duas partes, e as duas usam símbolos que provavelmente são novos para você, então vamos com calma. A primeira: em vez das aspas de sempre, o texto é envolvido por crases. A crase é aquele tracinho inclinado, o `, que, em teclados americanos, fica no canto superior esquerdo, ao lado do número 1. No teclado brasileiro (ABNT2) é Shift + a tecla do acento agudo (à direita do P), seguida da barra de espaço. Cuidado para não confundir com o apóstrofo comum.
A segunda parte é a que dá todo o poder: dentro do texto entre crases, onde você quiser encaixar o valor de uma variável, você usa uma marcação especial, um cifrão seguido de chaves, escrito assim, ${ }, com o nome da variável no meio das chaves. Quando o programa roda, o JavaScript troca esse ${ } pelo valor atual da variável, automaticamente. É a primeira vez que esse símbolo aparece no curso, então não se assuste nem tente decorar agora: a ideia fica clara vendo o exemplo abaixo. Repare na última linha, que mostra o jeito antigo, somando pedaços com +, para você sentir o contraste:
Entre crases, tudo é texto comum. Onde aparece o ${ } com o nome de uma variável, o JavaScript troca pelo valor guardado: com nome valendo "Ana", a frase montada vira Olá, Ana!.
// Template literals usam crases e deixam juntar texto com variáveis.
const produto = "Café";
const preco = 12.5;
// Repare no ${ } para "encaixar" a variável dentro do texto:
console.log(`O ${produto} custa R$ ${preco}`);
console.log(`Com 2 unidades: R$ ${preco * 2}`);
// O jeito antigo (com +) ainda funciona, mas é mais chato:
console.log("O " + produto + " custa R$ " + preco);// Sua vez! Complete e clique em Rodar.
const largura = 8;
const altura = 5;
// Troque ${largura} para imprimir a ÁREA (dica: largura * altura). Deve dar 40.
console.log(`A área é ${largura}`);Complete aqui mesmo e clique em Rodar.