Apostila de JavaScript para Iniciantes
Etapa 1 – Fundamentos Sólidos
Tipos de Dados e Coerção
Em JavaScript, os tipos primitivos incluem: **string, number, boolean, null, undefined, symbol e
bigint**.
O operador `typeof` retorna o tipo de uma variável.
[Link](typeof 42); // "number"
[Link](typeof "Olá"); // "string"
[Link](typeof true); // "boolean"
[Link](typeof undefined);// "undefined"
[Link](typeof null); // "object" (curiosidade histórica)
Valores especiais: `NaN` significa "Not a Number", geralmente resultado de uma operação
inválida.
Valores **truthy/falsy**: valores que em contextos booleanos se comportam como verdadeiro ou
falso.
- Falsy: `0, "", null, undefined, NaN, false`
- Todos os outros são truthy.
Diferença entre `==` (comparação frouxa) e `===` (comparação estrita):
[Link](2 == "2"); // true (conversão implícita)
[Link](2 === "2"); // false (sem coerção de tipo)
Escopo e Variáveis
- `var`: escopo de função, sofre *hoisting*.
- `let`: escopo de bloco, respeita *Temporal Dead Zone*.
- `const`: igual ao `let`, mas não pode ser reatribuída.
if (true) {
var x = 10; // visível fora do bloco
let y = 20; // visível só aqui
const z = 30; // visível só aqui
[Link](x); // 10
[Link](y); // erro!
Funções Básicas
- Declaração:
function soma(a, b) {
return a + b;
- Expressão:
const subtrai = function(a, b) {
return a - b;
};
- Arrow function:
const multiplica = (a, b) => a * b;
Parâmetros default e rest/spread:
function saudacao(nome = "Visitante") {
[Link]("Olá, " + nome);
saudacao(); // Olá, Visitante
function somaTudo(...numeros) {
return [Link]((a, b) => a + b, 0);
[Link](somaTudo(1,2,3,4)); // 10
---
Exercícios Propostos – Etapa 1
1. Teste diferentes valores com `typeof` e identifique seus tipos.
2. Crie exemplos que usem `==` e `===` e explique a diferença nos resultados.
3. Faça uma função que receba qualquer quantidade de números e retorne a soma.
---
Etapa 2 – Intermediário 'de verdade'
Closures e Escopo Léxico
Um closure é quando uma função "lembra" o escopo onde foi criada.
function contador() {
let count = 0;
return function() {
count++;
return count;
};
const meuContador = contador();
[Link](meuContador()); // 1
[Link](meuContador()); // 2
this, call, apply, bind
O valor de `this` depende de como a função é chamada.
const pessoa = {
nome: "Maria",
fala() {
[Link]([Link]);
};
[Link](); // "Maria"
const falar = [Link];
falar(); // undefined
[Link](pessoa); // "Maria"
Objetos e Protótipos
const carro = { marca: "Toyota" };
const meuCarro = [Link](carro);
[Link]([Link]); // Toyota
Classes (azúcar sintático sobre protótipos):
class Animal {
constructor(nome) {
[Link] = nome;
falar() {
[Link]([Link] + " faz barulho.");
class Cachorro extends Animal {
falar() {
[Link]([Link] + " late.");
const dog = new Cachorro("Rex");
[Link](); // Rex late.
Assíncrono
Event loop: tarefas são enfileiradas (macrotasks/microtasks).
[Link]("Início");
setTimeout(() => [Link]("Timeout"), 0);
[Link]().then(() => [Link]("Promise"));
[Link]("Fim");
Saída:
Início
Fim
Promise
Timeout
Promessas e async/await:
function esperar(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
async function exemplo() {
[Link]("Aguarde...");
await esperar(1000);
[Link]("Pronto!");
exemplo();
---
Exercícios Propostos – Etapa 2
1. Crie uma função geradora de contadores usando closures.
2. Use `call` ou `bind` para corrigir a referência de `this` em uma função.
3. Implemente uma classe `Pessoa` com método `falar` e crie uma subclasse `Aluno`.
4. Faça uma função assíncrona que simule baixar dados e use `await` para exibir uma mensagem
após a conclusão.
---
Fim da Apostila
Parabéns por chegar até aqui! Continue praticando e explorando o JavaScript. ■