# Aula 2.1 - 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`](../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:

```js
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:

```js
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:

```js
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

| Etapa | Duração |
|---|---:|
| Valores e variáveis | 20 min |
| Tipos primitivos | 25 min |
| Conversões e coerção | 25 min |
| Operadores | 20 min |
| Laboratório | 25 min |
| Revisão | 5 min |

## 1. Valores

Um valor representa uma informação:

```js
"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.

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

### `const`

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

```js
const totalLessons = 8;
```

Isso não torna objetos profundamente imutáveis:

```js
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:

```js
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:

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

Evite:

```js
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:

```js
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:

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

### Number

Representa números:

```js
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`:

```js
const largeIdentifier = 9007199254740993n;
```

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

### Boolean

Representa `true` ou `false`:

```js
const isPublished = true;
const hasPermission = false;
```

### Undefined

Normalmente representa algo que ainda não recebeu valor:

```js
let selectedTask;
```

### Null

Representa ausência intencional:

```js
const finishedAt = null;
```

### Symbol

Cria identificadores únicos:

```js
const internalId = Symbol("internalId");
```

Será utilizado apenas quando existir uma necessidade clara.

## 6. `typeof`

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

Uma particularidade histórica:

```js
typeof null; // "object"
```

Para testar `null`:

```js
value === null;
```

Arrays também retornam `"object"`:

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

## 7. Strings

Aspas:

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

Template literal:

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

Também permite múltiplas linhas:

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

## 8. Operadores aritméticos

```js
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

```js
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:

```js
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.

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

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

## 10. Conversão para string

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

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

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

## 11. Conversão para número

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

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

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

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

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

### `parseInt` e `parseFloat`

```js
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.

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

Apesar do nome:

```js
typeof NaN; // "number"
```

Para verificar números utilizáveis:

```js
Number.isFinite(value);
```

## 13. Conversão para boolean

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

Uma string com o texto `"false"` é truthy:

```js
Boolean("false"); // true
```

Quando o texto precisa representar um booleano:

```js
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:

```text
false
0
-0
0n
""
null
undefined
NaN
```

Outros valores normalmente são truthy, inclusive:

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

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

## 15. Comparação

```js
5 > 3;
5 >= 5;
3 < 5;
3 <= 3;
```

### Igualdade estrita

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

### Igualdade com coerção

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

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

## 16. Operadores lógicos

### AND

```js
const canPublish = isAuthenticated && hasPermission;
```

### OR

```js
const displayName = preferredName || "Visitante";
```

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

### NOT

```js
const isBlocked = !hasPermission;
```

### Nullish coalescing

```js
const total = storedTotal ?? 0;
```

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

Compare:

```js
0 || 10; // 10
0 ?? 10; // 0
```

## 17. Atribuição

```js
let count = 0;

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

Incremento:

```js
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

```js
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

| Entrada | Tipo | Resultado esperado |
|---|---|---|
| `42` | number | número 42 válido |
| vazio | number | inválido |
| `texto` | number | inválido |
| `false` | boolean | boolean false |
| `qualquer` | boolean | inválido |
| `0` | string | string truthy |
| qualquer | null | `null`, falsy |

## 21. Exercício de fixação

Crie uma calculadora de subtotal:

```text
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:

```text
135 minutos
```

Saída:

```text
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.