Valores, variáveis, tipos e operadores

Identificação

• Duração: 2 horas
• Tipo: teoria aplicada e laboratório
• Entrega: explorador interativo de valores
• Laboratório: ../exemplos/aula-2.1/index.html

Introdução

Por que aprender valores e tipos?

Todo programa trabalha com informações. Um nome é texto, uma quantidade é número, uma permissão pode ser verdadeira ou falsa e uma data de conclusão pode ainda não existir.

Para o computador, essas diferenças importam. Somar dois números é diferente de juntar dois textos:

2 + 3; // 5
"2" + "3"; // "23"

Se não compreendermos o tipo do valor, uma regra aparentemente simples pode produzir um resultado inesperado.

O que é uma variável?

Uma variável é um nome que utilizamos para acessar um valor:

const courseName = "Engenharia de IA Aplicada";
let completedLessons = 1;

Ela nos permite trabalhar com a informação sem repetir o valor diretamente em todos os lugares.

JavaScript exige que eu declare o tipo?

JavaScript possui tipagem dinâmica. Não escrevemos o tipo ao declarar uma variável, e uma mesma variável pode receber valores de tipos diferentes.

Essa flexibilidade exige atenção. Nesta aula aprenderemos a reconhecer, converter e validar tipos de maneira explícita. Mais adiante, TypeScript adicionará contratos estáticos sobre o JavaScript.

O que são operadores?

Operadores são símbolos ou palavras que realizam operações:

10 + 5;        // soma
age >= 18;     // comparação
isActive && hasAccess; // operação lógica

Antes de criar condições, funções ou chamadas de API, precisamos compreender como esses valores e operadores se comportam.

Objetivos

Ao final da aula, o aluno deverá conseguir:

1. diferenciar valor, variável e tipo;
2. declarar variáveis com const e let;
3. reconhecer os tipos primitivos;
4. utilizar typeof conscientemente;
5. converter strings para números e booleanos;
6. evitar coerções implícitas perigosas;
7. utilizar operadores aritméticos, relacionais e lógicos;
8. diferenciar == e ===;
9. reconhecer valores truthy e falsy;
10. construir mensagens com template literals.

Pré-requisitos

• conclusão do Módulo 1;
• navegador e DevTools;
• editor de código;
• noções de HTML e JavaScript no navegador.

Pergunta orientadora

Como representar informações no JavaScript sem criar resultados inesperados por causa de tipos e conversões?

Roteiro sugerido

1. Valores

Um valor representa uma informação:

"Knowledge AI"
42
true
null

Valores podem representar:

• texto;
• quantidade;
• estado;
• ausência intencional;
• data estruturada;
• comportamento.

Antes de programar, pergunte:

Qual informação estou representando e quais operações fazem sentido para ela?

2. Variáveis

Uma variável associa um nome a um valor.

const courseName = "Engenharia de IA Aplicada";
let completedLessons = 6;

const

Utilize quando a associação não será substituída:

const totalLessons = 8;

Isso não torna objetos profundamente imutáveis:

const task = {
  title: "Revisar aula",
};

task.title = "Publicar aula";

A variável continua apontando para o mesmo objeto, mas o conteúdo do objeto foi alterado.

let

Utilize quando o valor associado precisa mudar:

let completedLessons = 0;
completedLessons = completedLessons + 1;

var

var possui regras de escopo e inicialização diferentes. Código moderno normalmente utiliza const e let. Estudaremos as diferenças de escopo na Aula 2.3.

3. Nomes

Um bom nome descreve a informação:

const userEmail = "aluno@example.com";
const isAuthenticated = false;
const maximumAttempts = 3;

Evite:

const x = "aluno@example.com";
const thing = false;
const data = 3;

Convenções:

• camelCase para variáveis e funções;
• nomes booleanos iniciados por is, has, can ou should;
• substantivos para valores;
• verbos para funções;
• abreviações apenas quando forem claras.

4. Tipagem dinâmica

JavaScript possui tipagem dinâmica:

let value = 10;
value = "dez";

A variável não possui um tipo fixo. O valor atual possui um tipo.

Isso oferece flexibilidade, mas pode permitir mudanças difíceis de perceber. TypeScript será utilizado posteriormente para adicionar contratos estáticos.

5. Tipos primitivos

String

Representa texto:

const title = "Como a Web funciona";
const emptyText = "";

Number

Representa números:

const price = 29.9;
const quantity = 3;
const temperature = -2;

JavaScript utiliza number para inteiros e decimais comuns.

BigInt

Representa inteiros maiores do que o intervalo seguro de number:

const largeIdentifier = 9007199254740993n;

Não misture diretamente number e bigint em operações aritméticas.

Boolean

Representa true ou false:

const isPublished = true;
const hasPermission = false;

Undefined

Normalmente representa algo que ainda não recebeu valor:

let selectedTask;

Null

Representa ausência intencional:

const finishedAt = null;

Symbol

Cria identificadores únicos:

const internalId = Symbol("internalId");

Será utilizado apenas quando existir uma necessidade clara.

6. typeof

typeof "texto"; // "string"
typeof 42; // "number"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof 10n; // "bigint"
typeof Symbol("id"); // "symbol"

Uma particularidade histórica:

typeof null; // "object"

Para testar null:

value === null;

Arrays também retornam "object":

typeof []; // "object"
Array.isArray([]); // true

7. Strings

Aspas:

const single = 'texto';
const double = "texto";

Template literal:

const name = "Ana";
const message = `Olá, ${name}!`;

Também permite múltiplas linhas:

const summary = `
Curso: ${courseName}
Aulas concluídas: ${completedLessons}
`;

8. Operadores aritméticos

const sum = 10 + 5;
const subtraction = 10 - 5;
const multiplication = 10 * 5;
const division = 10 / 5;
const remainder = 10 % 3;
const power = 2 ** 3;

Precedência

const resultA = 2 + 3 * 4; // 14
const resultB = (2 + 3) * 4; // 20

Utilize parênteses quando melhorarem a clareza.

9. Concatenação e soma

O operador + pode somar ou concatenar:

2 + 3; // 5
"2" + "3"; // "23"
"2" + 3; // "23"

Esse comportamento é uma fonte comum de erros em formulários, porque valores de campos chegam como strings.

const firstValue = "2";
const secondValue = "3";

const incorrect = firstValue + secondValue; // "23"
const correct = Number(firstValue) + Number(secondValue); // 5

10. Conversão para string

String(42); // "42"
String(true); // "true"
String(null); // "null"

Para exibição, template literals normalmente são mais legíveis:

const label = `Total: ${total}`;

11. Conversão para número

Number("42"); // 42
Number("3.14"); // 3.14
Number(""); // 0
Number("texto"); // NaN

O caso da string vazia exige validação explícita:

function parseRequiredNumber(value) {
  const normalized = value.trim();

  if (normalized === "") {
    return null;
  }

  const number = Number(normalized);
  return Number.isFinite(number) ? number : null;
}

parseInt e parseFloat

Number.parseInt("42px", 10); // 42
Number.parseFloat("3.14rem"); // 3.14

Essas funções aceitam uma parte inicial válida. Para validar um campo que deve conter apenas um número, Number com verificações explícitas costuma ser mais previsível.

12. NaN

NaN significa que uma operação numérica não produziu um número válido.

const result = Number("texto");
Number.isNaN(result); // true

Apesar do nome:

typeof NaN; // "number"

Para verificar números utilizáveis:

Number.isFinite(value);

13. Conversão para boolean

Boolean(true); // true
Boolean(false); // false
Boolean(1); // true
Boolean(0); // false
Boolean("texto"); // true
Boolean(""); // false

Uma string com o texto "false" é truthy:

Boolean("false"); // true

Quando o texto precisa representar um booleano:

function parseBoolean(value) {
  const normalized = value.trim().toLowerCase();

  if (normalized === "true") return true;
  if (normalized === "false") return false;

  return null;
}

14. Truthy e falsy

Valores falsy:

false
0
-0
0n
""
null
undefined
NaN

Outros valores normalmente são truthy, inclusive:

Boolean("false"); // true
Boolean([]); // true
Boolean({}); // true

Não utilize truthiness quando precisar distinguir 0, string vazia e ausência.

15. Comparação

5 > 3;
5 >= 5;
3 < 5;
3 <= 3;

Igualdade estrita

5 === 5; // true
5 === "5"; // false
5 !== "5"; // true

Igualdade com coerção

5 == "5"; // true
0 == false; // true

Prefira === e !==. Quando tipos diferentes precisam ser comparados, converta de maneira explícita.

16. Operadores lógicos

AND

const canPublish = isAuthenticated && hasPermission;

OR

const displayName = preferredName || "Visitante";

|| utiliza truthiness. Se "" ou 0 forem valores válidos, considere ??.

NOT

const isBlocked = !hasPermission;

Nullish coalescing

const total = storedTotal ?? 0;

?? utiliza o valor da direita apenas quando o da esquerda é null ou undefined.

Compare:

0 || 10; // 10
0 ?? 10; // 0

17. Atribuição

let count = 0;

count += 1;
count -= 1;
count *= 2;
count /= 2;

Incremento:

count++;

Em expressões complexas, count += 1 normalmente comunica a intenção com maior clareza.

18. Laboratório - Explorador de tipos

O laboratório recebe:

• texto digitado;
• tipo desejado;
• comando para analisar.

Apresenta:

• valor original;
• valor convertido;
• typeof;
• truthiness;
• validade da conversão.

Regras

• não utilizar eval;
• não inserir entrada com innerHTML;
• tratar string vazia;
• tratar NaN;
• aceitar boolean apenas como true ou false;
• representar null e undefined conscientemente.

19. Estrutura da conversão

function convertValue(rawValue, targetType) {
  if (targetType === "string") {
    return {
      value: rawValue,
      valid: true,
    };
  }

  if (targetType === "number") {
    const normalized = rawValue.trim();
    const value = Number(normalized);

    return {
      value,
      valid: normalized !== "" && Number.isFinite(value),
    };
  }

  return {
    value: undefined,
    valid: false,
  };
}

O código completo adiciona boolean, null e undefined.

20. Testes manuais

21. Exercício de fixação

Crie uma calculadora de subtotal:

subtotal = quantidade * preço

Requisitos:

• quantidade e preço começam como strings;
• strings vazias são inválidas;
• números precisam ser finitos;
• quantidade deve ser inteira e positiva;
• preço não pode ser negativo;
• resultado deve utilizar duas casas para exibição;
• cálculo e exibição devem permanecer separados.

22. Desafio individual

Crie um conversor de duração.

Entrada:

135 minutos

Saída:

2 horas e 15 minutos

Requisitos:

• validar entrada;
• aceitar zero;
• rejeitar número negativo;
• utilizar divisão e resto;
• tratar singular e plural;
• escrever pelo menos seis casos de teste.

23. Erros comuns

Utilizar let para tudo

Comece com const. Mude para let quando a associação precisar ser substituída.

Somar strings

Campos de formulário retornam texto. Converta e valide antes de calcular.

Converter string vazia diretamente

Number("") retorna zero. Confirme se vazio é realmente um valor válido.

Utilizar Boolean("false")

Qualquer string não vazia é truthy. Faça parsing explícito.

Comparar com ==

Coerção pode criar equivalências inesperadas. Prefira igualdade estrita.

Testar null apenas com typeof

typeof null retorna "object". Utilize value === null.

Confundir NaN

Utilize Number.isNaN e Number.isFinite.

Utilizar eval

eval executa texto como código e não é necessário para explorar tipos ou operadores.

24. Lista de verificação de entrega

• Variáveis utilizam nomes claros.
• const é utilizado por padrão.
• let aparece apenas quando necessário.
• Conversões são explícitas.
• String vazia é tratada.
• NaN é tratado.
• Boolean textual possui parsing explícito.
• Comparações utilizam === e !==.
• 0 não é confundido com ausência.
• null e undefined possuem significado definido.
• Interface utiliza textContent.
• Não existe eval.
• Casos válidos e inválidos foram testados.
• Console não apresenta erros.

25. Critérios de aceite

A entrega será aceita quando:

1. analisar string, number, boolean, null e undefined;
2. distinguir valor original e convertido;
3. apresentar typeof;
4. apresentar truthiness;
5. rejeitar número inválido;
6. rejeitar boolean textual desconhecido;
7. não executar a entrada como código;
8. funcionar por teclado;
9. funcionar em celular;
10. não apresentar erros no console.

26. Perguntas para revisão

1. Qual é a diferença entre valor e variável?
2. Quando utilizar let?
3. Quais são os tipos primitivos?
4. Por que typeof null exige atenção?
5. Por que campos de formulário podem causar concatenação?
6. Qual é o resultado de Boolean("false")?
7. Qual é a diferença entre || e ???
8. Por que preferimos ===?
9. Como verificar se um número é utilizável?
10. Por que eval não deve ser utilizado neste laboratório?

Próxima aula

Na Aula 2.2, utilizaremos condições e repetições para classificar tarefas, validar regras e processar coleções de dados.