O que é Javascript?

Javascript é uma linguagem de programação usada principalmente para criar efeitos dinâmicos
em páginas da web. Pense nela como uma maneira de dar vida e interatividade aos sites.

Fundamentos

Variáveis

Variáveis são como caixas onde você pode guardar e acessar informações. Elas são essenciais
para armazenar dados que você precisa usar mais tarde.

Cenário do dia a dia: Imagine que você tem um caderno onde escreve seus lembretes. Cada
lembrete é como uma variável.

Aplicação profissional: Em um programa de gerenciamento de projetos, você pode ter uma

variável para armazenar o número de tarefas pendentes.
javascript

var minhaVariavel = "Olá, mundo!"; // Cria uma variável com o valor "Olá, mundo!"

[Link](minhaVariavel); // Mostra o valor da variável no console

// Exemplo profissional

var numeroDeTarefas = 5;

[Link](numeroDeTarefas); // Mostra 5

Tipos de Dados

Os tipos de dados são diferentes categorias de valores que você pode armazenar em variáveis.

Cenário do dia a dia: Você pode ter uma caixa para números (como a quantidade de maçãs) e
outra para texto (como o nome das maçãs).

Aplicação profissional: Em um sistema de e-commerce, você pode ter variáveis para o preço
dos produtos (número) e para o nome dos produtos (texto).
var meuNumero = 10; // Tipo de dado número

[Link](meuNumero); // Mostra 10

var texto = "Preço: ";

var preco = 19.99;

[Link](texto + preco); // Mostra "Preço: 19.99"

// Exemplo profissional

var estoque = 100; // Número

var produto = "Laptop"; // Texto

[Link](produto + " em estoque: " + estoque); // Mostra "Laptop em estoque: 100"

1
let e const

São formas modernas de declarar variáveis. let permite mudar o valor, enquanto const cria
variáveis cujo valor não pode ser alterado.

Cenário do dia a dia: Você tem uma garrafa de água (let) que você pode encher ou esvaziar, e
uma garrafa decorativa (const) que você só usa para exibição.

Aplicação profissional: Em um sistema de controle de inventário, você pode usar let para a
quantidade de itens em estoque (que pode mudar) e const para o nome do produto.
let idade = 25; // Variável que pode ser alterada

const pi = 3.14; // Variável que não pode ser alterada

[Link](idade, pi); // Mostra 25 e 3.14

// Exemplo profissional

let quantidadeEmEstoque = 50;

const nomeDoProduto = "Tablet";

[Link](nomeDoProduto + " em estoque: " + quantidadeEmEstoque); // Mostra "Tablet em estoque: 50"

Operadores Aritméticos

Esses operadores são usados para fazer cálculos com números.

Cenário do dia a dia: Você quer saber quantas maçãs tem no total se você comprar 5 maças e
já tiver 3.

Aplicação profissional: Você precisa calcular o total de vendas de um produto somando as

vendas de vários meses.
let a = 10;

let b = 5;

[Link](a + b); // Soma: 15

[Link](a - b); // Subtração: 5

[Link](a * b); // Multiplicação: 50

[Link](a / b); // Divisão: 2

// Exemplo profissional

let vendasJaneiro = 2000;

let vendasFevereiro = 3000;

2
let totalVendas = vendasJaneiro + vendasFevereiro;

[Link]("Total de vendas: " + totalVendas); // Mostra "Total de vendas: 5000"

Operadores de Comparação

Esses operadores comparam dois valores e retornam verdadeiro (true) ou falso (false).

Cenário do dia a dia: Você compara se o número de maçãs que você tem é maior do que 10.

Aplicação profissional: Você verifica se o estoque de um produto é suficiente para atender a

um pedido.
let c = 10;

let d = 20;

[Link](c == d); // Igualdade: false

[Link](c != d); // Diferença: true

[Link]("15" == 15); // Comparação com conversão automática: true

[Link]("15" === 15); // Comparação sem conversão automática: false

// Exemplo profissional

let estoqueAtual = 30;

let pedido = 25;

[Link](estoqueAtual >= pedido); // Verifica se o estoque é suficiente: true

Operadores Lógicos

São usados para combinar várias condições.

Cenário do dia a dia: Você só vai ao parque se o clima estiver bom e se tiver tempo.

Aplicação profissional: Você só executa uma tarefa se todas as condições forem atendidas,
como se o usuário estiver autenticado e tiver permissão para acessar uma área.

[Link](10 > 5 && 20 > 15); // AND: true

[Link](10 > 5 || 20 < 15); // OR: true
// Exemplo profissional

let usuarioAutenticado = true;

let temPermissao = true;

[Link](usuarioAutenticado && temPermissao); // Verifica se o usuário pode acessar a área: true

Conversão de Tipos

3
Transforma um valor de um tipo para outro tipo.

Cenário do dia a dia: Você converte um número de telefone em um formato que pode ser
exibido.

Aplicação profissional: Você converte dados de entrada de um formulário para garantir que
sejam do tipo correto antes de salvar no banco de dados.
const meuNumeroTexto = "123";

const meuNumeroConvertido = Number(meuNumeroTexto); // Converte texto para número

[Link](meuNumeroConvertido); // Mostra 123

[Link](typeof meuNumeroConvertido); // Mostra "number"

// Exemplo profissional

const entradaUsuario = "4500";

const valorConvertido = parseFloat(entradaUsuario); // Converte texto para número decimal

[Link](valorConvertido); // Mostra 4500

Estrutura de Condição (if, else, else if)

Permite executar diferentes blocos de código dependendo de uma condição.

Cenário do dia a dia: Você decide se vai sair com base no clima. Se estiver chovendo, você fica
em casa; caso contrário, você vai sair.

Aplicação profissional: Você verifica o status de um pedido e executa ações diferentes

dependendo se ele está pendente, em processamento ou concluído.
const clima = "ensolarado";

if (clima === "chuvoso") {

[Link]("Fique em casa");

} else if (clima === "nublado") {

[Link]("Leve um guarda-chuva");

} else {

[Link]("Saia e aproveite o sol");

// Exemplo profissional

const statusPedido = "concluído";

4
if (statusPedido === "pendente") {

[Link]("Aguarde a confirmação");

} else if (statusPedido === "em processamento") {

[Link]("Seu pedido está sendo preparado");

} else {

[Link]("Pedido concluído");

switch

Outra maneira de lidar com várias condições baseadas no valor de uma variável.

Cenário do dia a dia: Você escolhe o que comer baseado no menu do restaurante.

Aplicação profissional: Você processa diferentes tipos de solicitações de API com base no
código de resposta.
const diaDaSemana = "sexta-feira";

switch(diaDaSemana) {

case "segunda-feira":

[Link]("Começo da semana!");

break;

case "sexta-feira":

[Link]("Sexta-feira, quase lá!");

break;

default:

[Link]("Dia normal");
}

// Exemplo profissional

const codigoResposta = 404;

switch(codigoResposta) {

case 200:

[Link]("OK");

break;

case 404:

[Link]("Não encontrado");

break;

5
 default:

[Link]("Erro desconhecido");

Estruturas de Repetição

Permitem executar um bloco de código várias vezes.

for

Usa um contador e é ótimo para repetir um bloco de código um número fixo de vezes.

Cenário do dia a dia: Você conta de 1 a 10 para checar quantos passos deu.

Aplicação profissional: Você gera uma lista de itens para exibição em um relatório.
for(let i = 0; i < 5; i++) {

[Link]("O valor de i é: " + i); // Mostra 0, 1, 2, 3, 4

// Exemplo profissional

const produtos = ["Laptop", "Mouse", "Teclado"];

for(let i = 0; i < [Link]; i++) {

[Link]("Produto: " + produtos[i]); // Mostra cada produto da lista

while

Executa um bloco de código enquanto uma condição é verdadeira.

Cenário do dia a dia: Você vai continuar a fazer exercícios físicos até sentir que está cansado.

Aplicação profissional: Você mantém uma tarefa de processamento de dados enquanto

houver dados a serem processados.
let k = 0;

while(k < 5) {

[Link]("O valor de k é: " + k); // Mostra 0, 1, 2, 3, 4

k++;

// Exemplo profissional

let dadosPendentes = true;

while (dadosPendentes) {

6
 // Código para processar dados

[Link]("Processando dados...");

// Simulação de condição para parar o loop

dadosPendentes = false; // Para o loop depois de uma iteração

do while

Executa o bloco de código pelo menos uma vez e depois continua enquanto a condição for
verdadeira.

Cenário do dia a dia: Você pega um ônibus e verifica se é o seu. Se não for, você pega outro,
mas pelo menos verifica uma vez.

Aplicação profissional: Você lê dados de um arquivo e processa cada linha. Verifica se há mais
linhas para ler após o processamento de cada linha.
let j = 0;

do {

[Link]("O valor de j é: " + j); // Mostra 0, 1, 2, 3, 4

j++;

} while(j < 5);

// Exemplo profissional

let leituraConcluida = false;

do {

[Link]("Lendo dados do arquivo...");

// Simulação de leitura de dados

leituraConcluida = true; // Termina o loop após a primeira leitura

} while (!leituraConcluida);

Funções

Funções são blocos de código que você define uma vez e pode reutilizar em várias partes do
seu programa.

Cenário do dia a dia: Você tem uma receita para fazer um bolo e pode seguir essa receita
várias vezes.

Aplicação profissional: Você tem uma função para calcular o preço total de um pedido com
base em diferentes taxas e descontos.
function cumprimentar(nome) {
7
 [Link]("Olá, " + nome + "!"); // Mostra uma saudação personalizada

cumprimentar("Bruno"); // Chama a função e passa "Bruno" como argumento

// Exemplo profissional

function calcularPrecoTotal(precoBase, desconto) {

let precoFinal = precoBase - desconto;

return precoFinal; // Retorna o preço final com desconto

let precoProduto = 100;

let desconto = 20;

[Link]("Preço final: " + calcularPrecoTotal(precoProduto, desconto)); // Mostra 80

Escopo de Variáveis

Define onde uma variável pode ser usada. Variáveis dentro de funções não afetam variáveis
externas.

Cenário do dia a dia: Você tem uma caixa de brinquedos para seus filhos e uma caixa separada
para suas ferramentas. As brinquedos são só para seus filhos, e as ferramentas são só para
você.

Aplicação profissional: Em um software de gestão de projetos, variáveis dentro de uma função

de cálculo de orçamento não devem afetar as variáveis usadas em outra função de relatório.
let cor = "azul"; // Variável global

function mostrarCor() {

let cor = "verde"; // Variável local à função

[Link](cor); // Mostra "verde"

[Link](cor); // Mostra "azul" porque a variável global não é alterada

mostrarCor(); // Chama a função

Hoisting (Içamento)

É um comportamento onde funções e variáveis são movidas para o topo do código antes de
serem executadas.

Cenário do dia a dia: Você consegue usar uma lista de tarefas mesmo que você a tenha criado
depois de começar a planejar o dia.
8
Aplicação profissional: Em um sistema de cálculos financeiros, você pode definir e usar
funções em qualquer lugar do código, desde que sejam definidas antes da execução.
testeHoisting(); // Pode ser chamado antes de ser definido

function testeHoisting() {

[Link]("Deu certo!"); // Mostra "Deu certo!"

Manipulação de Arrays
Método map()

Cria um novo array com os resultados da aplicação de uma função a cada elemento do array
original.

Cenário do dia a dia: Você tem uma lista de preços e deseja aplicar um desconto a cada um.

Aplicação profissional: Você processa uma lista de usuários para extrair apenas os nomes e
criar uma lista de e-mails.
const precos = [100, 200, 300];

const precosComDesconto = [Link](preco => preco * 0.9); // Aplica 10% de desconto

[Link](precosComDesconto); // Mostra [90, 180, 270]

// Exemplo profissional

const usuarios = [

{ nome: "Ana", email: "ana@[Link]" },

{ nome: "Bruno", email: "bruno@[Link]" }

];

const emails = [Link](usuario => [Link]);

[Link](emails); // Mostra ["ana@[Link]", "bruno@[Link]"]

Manipulação de Arrays
Método filter()

Cria um novo array com todos os elementos que passam no teste implementado por uma
função fornecida.

Cenário do dia a dia: Você tem uma lista de tarefas e quer filtrar apenas as que estão
marcadas como "pendentes".

9
Aplicação profissional: Você filtra uma lista de usuários para mostrar apenas aqueles que
estão ativos.
const tarefas = [

{ tarefa: "Comprar leite", status: "pendente" },

{ tarefa: "Estudar JavaScript", status: "concluída" },

{ tarefa: "Fazer exercícios", status: "pendente" }

];

const tarefasPendentes = [Link](tarefa => [Link] === "pendente");

[Link](tarefasPendentes); // Mostra [{ tarefa: "Comprar leite", status: "pendente" }, { tarefa: "Fazer

exercícios", status: "pendente" }]

// Exemplo profissional

const usuarios = [

{ nome: "Ana", ativo: true },

{ nome: "Bruno", ativo: false },

{ nome: "Carlos", ativo: true }

];

const usuariosAtivos = [Link](usuario => [Link]);

[Link](usuariosAtivos); // Mostra [{ nome: "Ana", ativo: true }, { nome: "Carlos", ativo: true }]

Método reduce()

Aplica uma função a um acumulador e a cada elemento do array (da esquerda para a direita)
para reduzir a um único valor.

Cenário do dia a dia: Você soma o total de itens em uma lista de compras para saber quanto
vai gastar no total.

Aplicação profissional: Você calcula o total de vendas de uma loja somando os valores de cada
venda.
const precos = [100, 200, 300];

const total = [Link]((acumulador, preco) => acumulador + preco, 0); // Soma todos os preços

[Link](total); // Mostra 600

// Exemplo profissional

10
const vendas = [1500, 2000, 2500];

const totalVendas = [Link]((acumulador, venda) => acumulador + venda, 0);

[Link]("Total de vendas: " + totalVendas); // Mostra "Total de vendas: 6000"

Manipulação Avançada de Arrays

Método find()

Retorna o primeiro elemento de um array que satisfaz a função de teste fornecida.

Cenário do dia a dia: Você procura um item específico em uma lista de compras para verificar
se ele está presente.

Aplicação profissional: Você busca um usuário específico em um banco de dados de usuários

com base em um critério.
const frutas = ["Maçã", "Banana", "Laranja", "Manga"];

const frutaEncontrada = [Link](fruta => [Link]("M")); // Encontra a primeira fruta que começa com
"M"

[Link](frutaEncontrada); // Mostra "Maçã"

// Exemplo profissional

const usuarios = [

{ id: 1, nome: "Ana" },

{ id: 2, nome: "Bruno" },

{ id: 3, nome: "Carlos" }

];

const usuario = [Link](user => [Link] === 2);

[Link](usuario); // Mostra { id: 2, nome: "Bruno" }

Método some()

Verifica se pelo menos um elemento no array passa no teste fornecido.

11
Cenário do dia a dia: Você verifica se pelo menos um item na sua lista de tarefas está marcado
como "urgente".

Aplicação profissional: Você checa se pelo menos um registro em um conjunto de dados

atende a um critério específico, como verificar se há algum item em estoque.
const tarefas = [

{ tarefa: "Comprar leite", urgente: false },

{ tarefa: "Estudar JavaScript", urgente: true },

{ tarefa: "Fazer exercícios", urgente: false }

];

const temUrgente = [Link](tarefa => [Link]);

[Link](temUrgente); // Mostra true

// Exemplo profissional

const produtos = [

{ nome: "Produto A", emEstoque: false },

{ nome: "Produto B", emEstoque: true },

{ nome: "Produto C", emEstoque: false }

];

const algumEmEstoque = [Link](produto => [Link]);

[Link](algumEmEstoque); // Mostra true

Método sort()

Ordena os elementos de um array in-place e retorna o array.

Cenário do dia a dia: Você organiza uma lista de compras em ordem alfabética para facilitar a
leitura.

Aplicação profissional: Você ordena uma lista de usuários por nome ou idade antes de exibi-
los na interface.
const numeros = [4, 2, 5, 1, 3];

[Link]((a, b) => a - b); // Ordena em ordem crescente

[Link](numeros); // Mostra [1, 2, 3, 4, 5]

// Exemplo profissional

12
const usuarios = [

{ nome: "Ana", idade: 25 },

{ nome: "Carlos", idade: 30 },

{ nome: "Bruno", idade: 22 }

];

[Link]((a, b) => [Link] - [Link]);

[Link](usuarios); // Mostra usuários ordenados por idade

Método map()

Cria um novo array com os resultados da função fornecida aplicada a cada elemento do array.

Cenário do dia a dia: Você transforma uma lista de preços com desconto aplicado.

Aplicação profissional: Você transforma uma lista de objetos de dados para adicionar ou
modificar informações antes de exibir ou processar.
const precos = [100, 200, 300];

const precosComDesconto = [Link](preco => preco * 0.9); // Aplica 10% de desconto

[Link](precosComDesconto); // Mostra [90, 180, 270]

// Exemplo profissional

const usuarios = [

{ nome: "Ana", idade: 25 },

{ nome: "Carlos", idade: 30 },

{ nome: "Bruno", idade: 22 }

];

const nomesUsuarios = [Link](usuario => [Link]);

[Link](nomesUsuarios); // Mostra ["Ana", "Carlos", "Bruno"]

Método forEach()

Executa uma função para cada elemento do array. Diferente do map(), não retorna um novo
array.

Cenário do dia a dia: Você imprime a lista de compras para cada item no papel.

Aplicação profissional: Você faz uma atualização em todos os itens de uma lista de dados ou
executa uma ação para cada item.
13
const tarefas = ["Comprar leite", "Estudar JavaScript", "Fazer exercícios"];

[Link](tarefa => {

[Link](tarefa); // Imprime cada tarefa

});

// Exemplo profissional

const produtos = [

{ nome: "Produto A", preco: 100 },

{ nome: "Produto B", preco: 200 }

];

[Link](produto => {

[Link](`Produto: ${[Link]}, Preço: ${[Link]}`);

});

Manipulação de Objetos

Método [Link]()

Retorna um array com os valores das propriedades de um objeto.

Cenário do dia a dia: Você tem um objeto com detalhes de um produto e quer ver todos os
valores sem as chaves.

Aplicação profissional: Você extrai todos os valores de um objeto de configuração para gerar
um relatório ou exportar os dados.
const produto = {

nome: "Notebook",

preco: 2500,

categoria: "Eletrônicos"

};

[Link]([Link](produto)); // Mostra ["Notebook", 2500, "Eletrônicos"]

// Exemplo profissional

const configuracoes = {

modoEscuro: true,

idioma: "pt-BR",

14
 atualizacaoAutomatica: false

};

[Link]([Link](configuracoes)); // Mostra [true, "pt-BR", false]

Método [Link]()

Retorna um array com pares [chave, valor] das propriedades de um objeto.

Cenário do dia a dia: Você tem um objeto com informações pessoais e quer listar cada campo
junto com seu valor.

Aplicação profissional: Você gera um relatório com todos os pares chave-valor de um objeto
de dados de usuário para exibir em uma interface.
const pessoa = {

nome: "João",

idade: 25,

cidade: "Rio de Janeiro"

};

[Link]([Link](pessoa)); // Mostra [["nome", "João"], ["idade", 25], ["cidade", "Rio de Janeiro"]]

// Exemplo profissional

const usuario = {

id: 1,

nome: "Maria",

email: "maria@[Link]"

};

const relatorioUsuario = [Link](usuario).map(([chave, valor]) => `${chave}: ${valor}`).join(", ");

[Link](relatorioUsuario); // Mostra "id: 1, nome: Maria, email: maria@[Link]"

Método [Link]()

Retorna um array com os nomes das propriedades de um objeto.

Cenário do dia a dia 1: Você tem um inventário de itens e quer listar todos os itens
disponíveis.

Cenário do dia a dia 2: Você faz uma lista de todos os itens na sua lista de contatos.

15
Aplicação profissional: Você extrai todos os campos de um objeto de configuração para
exibição ou validação.

const pessoa = {

nome: "Bruno",

idade: 30,

cidade: "São Paulo"

};

[Link]([Link](pessoa)); // Mostra ["nome", "idade", "cidade"]

// Exemplo profissional

const configuracoes = {

modoEscuro: true,

idioma: "pt-BR",

atualizacaoAutomatica: false

};

[Link]([Link](configuracoes)); // Mostra ["modoEscuro", "idioma", "atualizacaoAutomatica"]

// Exemplo profissional

const configuracao = {

modoEscuro: true,

idioma: "pt-BR",

notificacoes: true

};

[Link]([Link](configuracao)); // Mostra ["modoEscuro", "idioma", "notificacoes"]

Método [Link]()

Transforma um array de pares chave-valor em um objeto.

Cenário do dia a dia: Você converte uma lista de contatos em um formato de endereço de e-
mail para envio de convites.

16
Aplicação profissional: Você transforma uma lista de configurações em um objeto para fácil
manipulação e uso em código.
const entradas = [

["nome", "Ana"],

["idade", 25],

["cidade", "São Paulo"]

];

const pessoa = [Link](entradas);

[Link](pessoa);

// Mostra { nome: "Ana", idade: 25, cidade: "São Paulo" }

// Exemplo profissional

const configuracaoEntries = [

["tema", "escuro"],

["idioma", "pt-BR"],

["notificacoes", true]

];

const configuracao = [Link](configuracaoEntries);

[Link](configuracao);

// Mostra { tema: "escuro", idioma: "pt-BR", notificacoes: true }

Manipulação de Objetos
Método [Link]()

Retorna um array contendo pares de chave e valor dos próprios pares de uma propriedade
enumerável de um objeto.

Cenário do dia a dia: Você faz uma lista de todos os itens e seus preços em um catálogo.

Aplicação profissional: Você transforma um objeto de configuração em uma lista de

propriedades para exibição ou iteração.
const pessoa = {

nome: "Ana",

idade: 25,

17
 cidade: "São Paulo"

};

const entradas = [Link](pessoa);

[Link](entradas);

// Mostra [["nome", "Ana"], ["idade", 25], ["cidade", "São Paulo"]]

Método flat()

Desdobra arrays aninhados em um único array.

Cenário do dia a dia: Você organiza livros em várias prateleiras e deseja ver todos os livros em
uma única lista.

Aplicação profissional: Você processa dados estruturados em vários níveis para exibir em uma
interface de usuário.
const arrayAninhado = [1, [2, 3], [4, [5, 6]]];

const arrayPlano = [Link]();

[Link](arrayPlano); // Mostra [1, 2, 3, 4, [5, 6]]

// Exemplo profissional

const dadosAninhados = [

{ nome: "Produto A", categorias: ["Categoria 1", "Categoria 2"] },

{ nome: "Produto B", categorias: ["Categoria 1"] }

];

const todasCategorias = dadosAninhados

.map(produto => [Link])

.flat();

[Link](todasCategorias);

// Mostra ["Categoria 1", "Categoria 2", "Categoria 1"]

Método findIndex()

Retorna o índice do primeiro elemento que satisfaz a função de teste fornecida.

18
Cenário do dia a dia: Você encontra a posição de um item específico em uma lista de tarefas
para editá-lo.

Aplicação profissional: Você localiza a posição de um registro em um conjunto de dados para

atualização ou remoção.

const numeros = [10, 20, 30, 40];

const indice = [Link](num => num > 25);

[Link](indice); // Mostra 2

// Exemplo profissional

const usuarios = [

{ id: 1, nome: "Ana" },

{ id: 2, nome: "Carlos" },

{ id: 3, nome: "Bruno" }

];

const indiceUsuario = [Link](user => [Link] === 2);

[Link](indiceUsuario); // Mostra 1

Manipulação de Objetos e Arrays

Método [Link]()

Copia as propriedades de um ou mais objetos para um objeto de destino.

Cenário do dia a dia: Você copia informações de um formulário para um documento.

Aplicação profissional: Você mescla configurações de usuário com configurações padrão.

const destino = { nome: "Ana" };

const fonte = { idade: 25 };

[Link](destino, fonte);

[Link](destino); // Mostra { nome: "Ana", idade: 25 }

19
// Exemplo profissional

const configuracaoDefault = {

tema: "escuro",

idioma: "pt-BR"

};

const configuracaoUsuario = {

idioma: "en-US"

};

const configuracaoFinal = [Link]({}, configuracaoDefault, configuracaoUsuario);

[Link](configuracaoFinal); // Mostra { tema: "escuro", idioma: "en-US" }

Método spread operator (...)

Expande um array ou objeto em elementos individuais.

Cenário do dia a dia: Você divide uma caixa de brinquedos em vários pacotes menores.

Aplicação profissional: Você combina arrays de dados ou mescla propriedades de objetos em

uma aplicação.
const numeros = [1, 2, 3];

const maisNumeros = [4, 5, 6];

const todosNumeros = [...numeros, ...maisNumeros];

[Link](todosNumeros); // Mostra [1, 2, 3, 4, 5, 6]

// Exemplo profissional

const usuario = {

nome: "Ana",

idade: 25

};

const detalhesUsuario = {

email: "ana@[Link]",

telefone: "123456789"
20
};

const perfilCompleto = { ...usuario, ...detalhesUsuario };

[Link](perfilCompleto); // Mostra { nome: "Ana", idade: 25, email: "ana@[Link]", telefone:

"123456789" }

Funções setTimeout e setInterval

setTimeout

Executa uma função depois de um certo tempo.

Cenário do dia a dia: Você define um alarme para tocar após 10 minutos.

Aplicação profissional: Você agenda uma tarefa para enviar uma notificação ao usuário após
um período específico.
setTimeout(() => {

[Link]("5 segundos se passaram!");

}, 5000); // 5000 milissegundos = 5 segundos

// Exemplo profissional

setTimeout(() => {

enviarNotificacaoUsuario(); // Função que envia notificação

}, 10000); // 10000 milissegundos = 10 segundos

setInterval

Executa uma função repetidamente após um certo intervalo de tempo.

Cenário do dia a dia: Você define um timer para tocar a cada 1 minuto.

Aplicação profissional: Você atualiza uma exibição de dados em tempo real, como um painel
de monitoramento.
setInterval(() => {

[Link]("Isso aparece a cada 3 segundos!");

}, 3000); // 3000 milissegundos = 3 segundos

// Exemplo profissional

setInterval(() => {

atualizarDashboard(); // Função que atualiza o painel

}, 60000); // 60000 milissegundos = 1 minuto

21
Manipulação de Strings
Método split()

Divide uma string em um array de substrings com base em um separador.

Cenário do dia a dia: Você tem uma lista de itens separados por vírgulas e quer transformar
essa lista em um array para manipulação.

Aplicação profissional: Você recebe uma string de dados de um formulário e precisa separar
os campos para processá-los individualmente.
const frase = "Maçã, Banana, Laranja";

const frutas = [Link](", "); // Divide a string em um array

[Link](frutas); // Mostra ["Maçã", "Banana", "Laranja"]

// Exemplo profissional

const dados = "nome=Ana&idade=30&cidade=São Paulo";

const parametros = [Link]("&").map(parametro => [Link]("="));

[Link](parametros); // Mostra [["nome", "Ana"], ["idade", "30"], ["cidade", "São Paulo"]]

Método join()

Une todos os elementos de um array em uma única string, usando um separador.

Cenário do dia a dia: Você tem uma lista de itens para comprar e deseja criar uma única string
para imprimi-la ou enviá-la por mensagem.

Aplicação profissional: Você gera uma string de consulta para uma URL a partir de parâmetros
armazenados em um array.
const listaFrutas = ["Maçã", "Banana", "Laranja"];

const listaString = [Link](", "); // Une o array em uma string

[Link](listaString); // Mostra "Maçã, Banana, Laranja"

// Exemplo profissional

const parametrosConsulta = [["nome", "Ana"], ["idade", "30"], ["cidade", "São Paulo"]];

const urlParams = [Link](p => [Link]("=")).join("&");

[Link](urlParams); // Mostra "nome=Ana&idade=30&cidade=São Paulo"

22
Manipulação de Strings
Método includes()

Verifica se uma string contém uma substring específica.

Cenário do dia a dia: Você verifica se um item está listado em um menu.

Aplicação profissional: Você busca por palavras-chave dentro de uma string de texto em uma
aplicação de processamento de dados.
const frase = "A programação é divertida";

const resultado = [Link]("divertida");

[Link](resultado); // Mostra true

// Exemplo profissional

const mensagem = "Erro: Não foi possível conectar ao servidor.";

const contemErro = [Link]("Erro");

[Link](contemErro); // Mostra true

Método replace()

Substitui parte de uma string por outra.

Cenário do dia a dia: Você corrige um erro de digitação em uma lista de tarefas.

Aplicação profissional: Você atualiza URLs ou formatos de dados em uma string de

configuração.
const texto = "Olá, mundo!";

const novoTexto = [Link]("mundo", "JavaScript");

[Link](novoTexto); // Mostra "Olá, JavaScript!"

// Exemplo profissional

const endereco = "[Link]

const novoEndereco = [Link]("antigo", "novo");

[Link](novoEndereco); // Mostra [Link]

23
Manipulação de Strings
Método trim()

Remove espaços em branco do início e do fim de uma string.

Cenário do dia a dia: Você limpa o texto antes de enviar um e-mail, removendo espaços extras
que podem ter sido acidentalmente adicionados.

Aplicação profissional: Você remove espaços em branco de entradas de usuário antes de

armazená-las em um banco de dados para evitar problemas de consistência.
const textoComEspacos = " Olá, mundo! ";

const textoLimpo = [Link]();

[Link](textoLimpo); // Mostra "Olá, mundo!" sem espaços extras

// Exemplo profissional

const entradaUsuario = " João da Silva ";

const entradaLimpa = [Link]();

[Link](entradaLimpa); // Mostra "João da Silva"

Método substring()

Extrai uma parte específica de uma string entre dois índices.

Cenário do dia a dia: Você extrai uma parte específica de um número de telefone para
formatá-lo.

Aplicação profissional: Você extrai uma parte de um código de produto para exibir em uma
interface de usuário.
const texto = "Olá, mundo!";

const subtexto = [Link](0, 5); // Extrai "Olá, "

[Link](subtexto); // Mostra "Olá, "

// Exemplo profissional

const codigoProduto = "123-456-789";

const codigoBase = [Link](0, 3);

[Link](codigoBase); // Mostra "123"

24
Funções de Callback
Funções callback

Uma função passada como argumento para outra função, para ser executada após a conclusão
da operação.

Cenário do dia a dia: Você faz um pedido para a sua comida e dá um número de telefone para
a pizzaria ligar quando a comida estiver pronta.

Aplicação profissional: Você realiza uma requisição para um servidor e define uma função
para processar os dados quando a resposta chegar.
function buscarDados(callback) {

// Simulação de uma operação assíncrona

setTimeout(() => {

const dados = "Dados recebidos";

callback(dados); // Chama a função de callback com os dados

}, 2000);

buscarDados(dados => {

[Link](dados); // Mostra "Dados recebidos" após 2 segundos

});

// Exemplo profissional

function obterUsuario(callback) {

// Simulação de uma requisição a uma API

setTimeout(() => {

const usuario = { nome: "Carlos", idade: 28 };

callback(usuario); // Chama a função de callback com os dados do usuário

}, 3000);

obterUsuario(usuario => {

[Link](`Nome: ${[Link]}, Idade: ${[Link]}`); // Mostra "Nome: Carlos, Idade: 28"

});

25
Trabalhando com Promises e async/await
Promise

Representa a eventual conclusão (ou falha) de uma operação assíncrona e seu valor resultante.

Cenário do dia a dia: Você faz um pedido de entrega e recebe uma notificação quando a
entrega é concluída.

Aplicação profissional: Você realiza uma requisição a um servidor e manipula a resposta

quando os dados chegam.

function obterDados() {

return new Promise((resolve, reject) => {

setTimeout(() => {

const sucesso = true;

if (sucesso) {

resolve("Dados recebidos");

} else {

reject("Erro ao receber dados");

}, 2000);

});

obterDados()

.then(dados => [Link](dados)) // Mostra "Dados recebidos"

.catch(erro => [Link](erro));

// Exemplo profissional

function requisitarDados() {

return new Promise((resolve, reject) => {

setTimeout(() => {

const dados = { nome: "Maria", idade: 25 };

resolve(dados);

}, 3000);

});

26
}

requisitarDados()

.then(dados => [Link](`Nome: ${[Link]}, Idade: ${[Link]}`)) // Mostra "Nome: Maria, Idade: 25"

.catch(erro => [Link](erro));

async/await

Sintaxe para trabalhar com código assíncrono de maneira mais síncrona.

Cenário do dia a dia: Você aguarda uma mensagem de texto antes de começar uma tarefa.

Aplicação profissional: Você aguarda a resposta de uma requisição de API antes de processar
os dados.

async function obterDadosAsync() {

return new Promise((resolve) => {

setTimeout(() => {

resolve("Dados recebidos");

}, 2000);

});

async function mostrarDados() {

const dados = await obterDadosAsync();

[Link](dados); // Mostra "Dados recebidos"

mostrarDados();

// Exemplo profissional

async function buscarUsuario() {

return new Promise((resolve) => {

setTimeout(() => {

resolve({ nome: "Pedro", idade: 32 });

}, 3000);

});

27
async function exibirUsuario() {

const usuario = await buscarUsuario();

[Link](`Nome: ${[Link]}, Idade: ${[Link]}`); // Mostra "Nome: Pedro, Idade: 32"

exibirUsuario();

Funções e Métodos Avançados

this

O this refere-se ao contexto no qual uma função é executada. Ele pode se comportar de
maneira diferente dependendo de onde e como a função é chamada.

Cenário do dia a dia: Quando você está em uma sala e diz "Eu estou aqui", o "eu" se refere a
você, na sala onde está.

Aplicação profissional: Você tem um objeto que representa um usuário e um método que
retorna o nome desse usuário. O this dentro do método refere-se ao objeto usuário.
const pessoa = {

nome: "Ana",

saudacao: function() {

[Link]("Olá, " + [Link] + "!"); // `this` refere-se ao objeto `pessoa`

};

[Link](); // Mostra "Olá, Ana!"

// Exemplo profissional

const funcionario = {

nome: "Carlos",

cargo: "Desenvolvedor",

descricao: function() {

[Link](`${[Link]} é um ${[Link]}.`); // `this` refere-se ao objeto `funcionario`

};

[Link](); // Mostra "Carlos é um Desenvolvedor."

Arrow Functions (=>)

28
Funções de seta (arrow functions) têm uma sintaxe mais curta e não vinculam seu próprio this,
o que pode ser útil em certos contextos.

Cenário do dia a dia: Você prefere usar uma caneta mais compacta (que é uma forma mais
curta de escrever) que você encontra mais prática.

Aplicação profissional: Você usa uma função de seta para simplificar a definição de funções
em callbacks ou manipulação de eventos, especialmente quando você não precisa de um this
próprio.
const soma = (a, b) => a + b; // Função de seta para somar dois números

[Link](soma(5, 3)); // Mostra 8

// Exemplo profissional

const numeros = [1, 2, 3, 4];

const quadrados = [Link](num => num * num); // Usa uma função de seta para calcular quadrados

[Link](quadrados); // Mostra [1, 4, 9, 16]

try...catch

Usado para tratar erros que podem ocorrer durante a execução de um bloco de código. O
bloco catch permite lidar com os erros de maneira controlada.

Cenário do dia a dia: Você está tentando ligar um aparelho elétrico, e se ele não ligar, você
verifica a fonte de energia.

Aplicação profissional: Você realiza operações que podem falhar, como leitura de arquivos ou
chamadas a APIs, e trata os erros para evitar que o sistema falhe.
try {

let resultado = 10 / 0; // Isto causará um erro de divisão por zero

[Link](resultado);

} catch (erro) {

[Link]("Ocorreu um erro: " + [Link]); // Captura e mostra o erro

// Exemplo profissional

async function buscarDados() {

try {

let resposta = await fetch('[Link]

if (![Link]) throw new Error('Erro na resposta da API');

let dados = await [Link]();

29
 [Link](dados);

} catch (erro) {

[Link]("Erro ao buscar dados: " + [Link]);

buscarDados();

Manipulação de Data e Hora

Método Date()

Cria e manipula datas e horas.

Cenário do dia a dia: Você quer saber que horas são agora para agendar um compromisso.

Aplicação profissional: Você registra a data e hora de eventos em um sistema de

gerenciamento de logs.
const agora = new Date();

[Link]("Data e hora atuais: " + agora); // Mostra a data e hora atuais

// Exemplo profissional

const evento = new Date('2024-07-19T15:00:00Z');

[Link]("O evento está agendado para: " + [Link]()); // Mostra a data e hora do evento

[Link]()

Executa várias Promises em paralelo e aguarda todas serem concluídas.

Cenário do dia a dia: Você faz vários pedidos de comida e espera que todos sejam entregues
antes de começar a refeição.

Aplicação profissional: Você faz várias requisições a APIs e precisa esperar que todas sejam
concluídas antes de processar os dados coletados.
const promessa1 = new Promise((resolve) => setTimeout(() => resolve('Dados da API 1'), 1000));

const promessa2 = new Promise((resolve) => setTimeout(() => resolve('Dados da API 2'), 2000));

const promessa3 = new Promise((resolve) => setTimeout(() => resolve('Dados da API 3'), 1500));

[Link]([promessa1, promessa2, promessa3])

.then(resultados => {

[Link](resultados); // Mostra ["Dados da API 1", "Dados da API 2", "Dados da API 3"]

})

.catch(erro => {

[Link]("Erro em uma das promessas: " + erro);

30
 });

// Exemplo profissional

const requisições = [

fetch('[Link]

fetch('[Link]

fetch('[Link]

];

[Link](requisições)

.then(respostas => [Link]([Link](resposta => [Link]())))

.then(dados => {

[Link](dados); // Mostra todos os dados das APIs

})

.catch(erro => {

[Link]("Erro ao buscar dados de uma ou mais APIs: " + erro);

});

setTimeout e setInterval
Método setTimeout()

Executa uma função depois de um determinado tempo.

Cenário do dia a dia: Você define um alarme para acordar após 8 horas de sono.

Aplicação profissional: Você programa uma tarefa para ser executada após um atraso, como
enviar um lembrete após um tempo específico.
setTimeout(() => {

[Link]("Este é um aviso após 3 segundos!");

}, 3000); // 3000 milissegundos = 3 segundos

// Exemplo profissional

setTimeout(() => {

[Link]("Envio de lembrete após 1 hora");

}, 3600000); // 3600000 milissegundos = 1 hora

Método setInterval()

Executa uma função repetidamente a cada intervalo de tempo.

Cenário do dia a dia: Você configura um cronômetro para lembrar de tomar água a cada 30
minutos.
31
Aplicação profissional: Você atualiza uma interface de usuário com dados em tempo real,
como uma exibição de estatísticas ao vivo.
setInterval(() => {

[Link]("Atualização a cada 5 segundos!");

}, 5000); // 5000 milissegundos = 5 segundos

// Exemplo profissional

setInterval(() => {

atualizarPainel(); // Função que atualiza um painel de dados

}, 60000); // 60000 milissegundos = 1 minuto

fetch()

Faz uma requisição HTTP e retorna uma Promise com a resposta.

Cenário do dia a dia: Você consulta um aplicativo de previsão do tempo para saber se deve
levar um guarda-chuva.

Aplicação profissional: Você realiza uma requisição para uma API para obter dados
necessários para exibir em uma aplicação web.
fetch('[Link]

.then(response => [Link]()) // Converte a resposta para JSON

.then(data => [Link](data)) // Mostra os dados recebidos

.catch(error => [Link]('Erro:', error));

// Exemplo profissional

fetch('[Link]

.then(response => [Link]())

.then(usuarios => {

[Link](usuario => {

[Link](`Usuário: ${[Link]}, Email: ${[Link]}`);

});

})

.catch(error => [Link]('Erro ao buscar usuários:', error));

Trabalhando com Funções

Funções Anônimas

32
Funções sem nome que são usadas diretamente onde são criadas.

Cenário do dia a dia: Você pede uma comida em um restaurante e define que o pedido deve
ser entregue às 19h, sem dar um nome específico para a solicitação.

Aplicação profissional: Você passa uma função para um método que precisa de uma ação
específica, como uma função de callback.
const numeros = [1, 2, 3, 4];

const quadrados = [Link](function(num) {

return num * num;

});

[Link](quadrados); // Mostra [1, 4, 9, 16]

// Exemplo profissional

const produtos = [

{ nome: "Produto A", preco: 100 },

{ nome: "Produto B", preco: 200 }

];

[Link](function(produto) {

[Link](`${[Link]} custa ${[Link]}`);

});

Funções de Ordem Superior

Funções que recebem outras funções como argumentos ou retornam uma função.

Cenário do dia a dia: Você contrata um serviço de limpeza e especifica uma tarefa adicional
que deve ser feita após a limpeza básica.

Aplicação profissional: Você cria funções que podem ser usadas para personalizar o
comportamento de uma função de processamento de dados.
function processarArray(arr, operacao) {

return [Link](operacao);

const numeros = [1, 2, 3];

33
const quadrados = processarArray(numeros, num => num * num);

[Link](quadrados); // Mostra [1, 4, 9]

// Exemplo profissional

function aplicarDesconto(produtos, desconto) {

return [Link](produto => ({

nome: [Link],

preco: [Link] * (1 - desconto)

}));

const produtos = [

{ nome: "Produto A", preco: 100 },

{ nome: "Produto B", preco: 200 }

];

const produtosComDesconto = aplicarDesconto(produtos, 0.1);

[Link](produtosComDesconto); // Mostra produtos com 10% de desconto

Trabalhando com Contexto e Escopo

Escopo de Variáveis

Variáveis definidas dentro de uma função não são acessíveis fora dela (escopo local), e
variáveis definidas fora de qualquer função são acessíveis em qualquer lugar (escopo global).

Cenário do dia a dia: Você guarda um segredo em uma caixa trancada (escopo local) e outro
segredo em uma caixa aberta (escopo global).

Aplicação profissional: Você usa variáveis locais para armazenar dados temporários em uma
função e variáveis globais para configurar parâmetros de uma aplicação.
let global = "Eu sou global"; // Variável global

function exemploEscopo() {

let local = "Eu sou local"; // Variável local

[Link](global); // Acessível

34
 [Link](local); // Acessível

exemploEscopo();

[Link](global); // Acessível

[Link](local); // Erro: local não está definido fora da função

// Exemplo profissional

let configuracaoGlobal = {

modoEscuro: false

};

function atualizarConfiguracao() {

let configuracaoLocal = {

idioma: "en-US"

};

[Link](configuracaoGlobal); // Acessível

[Link](configuracaoLocal); // Acessível

atualizarConfiguracao();

[Link](configuracaoGlobal); // Acessível

[Link](configuracaoLocal); // Erro: configuracaoLocal não está definido fora da função

Closures

Funções que têm acesso às variáveis de seu escopo externo, mesmo após a função externa ter
terminado sua execução.

Cenário do dia a dia: Você guarda uma receita secreta (uma variável) em um caderno (uma
função), e mesmo que você não esteja mais com o caderno, a receita ainda está lá.

Aplicação profissional: Você cria funções que retornam outras funções e preservam o estado
das variáveis internas.
function criarContador() {

let contador = 0;

return function() {

contador++;

return contador;

};

35
}

const meuContador = criarContador();

[Link](meuContador()); // Mostra 1

[Link](meuContador()); // Mostra 2

// Exemplo profissional

function criarMensagemSaudacao(nome) {

return function() {

return `Olá, ${nome}!`;

};

const saudacaoAna = criarMensagemSaudacao("Ana");

[Link](saudacaoAna()); // Mostra "Olá, Ana!"

Web APIs e Manipulação DOM

Método [Link]()

Seleciona o primeiro elemento que corresponde a um seletor CSS.

Cenário do dia a dia: Você procura um livro específico em uma estante organizada por gênero.

Aplicação profissional: Você seleciona um elemento específico em uma página web para
atualizar seu conteúdo.

const elemento = [Link]("#minhaDiv");

[Link] = "Conteúdo atualizado!";

// Exemplo profissional

const botao = [Link](".btn-enviar");

[Link]("click", () => {

[Link]("Botão clicado!");

});

36
Método addEventListener()

Adiciona um ouvinte de evento a um elemento.

Cenário do dia a dia: Você configura um lembrete para que um alarme toque quando um
evento ocorre.

Aplicação profissional: Você adiciona funcionalidades interativas a uma página web, como
eventos de clique ou teclado.
javascript

Copiar código

const botao = [Link]("#meuBotao");

[Link]("click", () => {

[Link]("Botão clicado!");

});

// Exemplo profissional

const input = [Link]("#meuInput");

[Link]("input", (evento) => {

[Link]("Valor do input:", [Link]);

});

Funções e Closures
Funções de Ordem Superior

Funções que podem aceitar outras funções como argumentos ou retornar uma função.

Cenário do dia a dia: Você faz um pedido para que alguém faça um trabalho e fornece
instruções específicas.

Aplicação profissional: Você cria funções que configuram e retornam outras funções para
processamento personalizado de dados.
function fazerCalculo(calculo) {

return function(a, b) {

return calculo(a, b);

};

const soma = fazerCalculo((a, b) => a + b);

37
[Link](soma(5, 3)); // Mostra 8

// Exemplo profissional

function aplicarFiltro(filtro) {

return function(array) {

return [Link](filtro);

};

const filtroMaiorQue10 = aplicarFiltro(num => num > 10);

[Link](filtroMaiorQue10([5, 10, 15, 20])); // Mostra [15, 20]

Funções Geradoras

Funções que permitem criar iteradores, gerando valores sob demanda com o yield.

Cenário do dia a dia: Você cria uma receita passo a passo e segue cada passo quando precisar.

Aplicação profissional: Você gera uma sequência de valores ou processa grandes quantidades
de dados em partes.
function* contar() {

yield 1;

yield 2;

yield 3;

const contador = contar();

[Link]([Link]().value); // Mostra 1

[Link]([Link]().value); // Mostra 2

[Link]([Link]().value); // Mostra 3

// Exemplo profissional

function* gerarNumeros(limite) {

let num = 0;

while (num <= limite) {

yield num;

num++;

38
const numeros = gerarNumeros(5);

for (const num of numeros) {

[Link](num); // Mostra 0, 1, 2, 3, 4, 5

Manipulação de Assíncronos
setTimeout()

Executa uma função após um determinado período de tempo.

Cenário do dia a dia: Você configura um alarme para tocar após um certo período.

Aplicação profissional: Você adia a execução de uma função para aguardar o término de uma
operação ou para melhorar a experiência do usuário.
setTimeout(() => {

[Link]("Isso é exibido após 2 segundos");

}, 2000);

// Exemplo profissional

function carregarDados() {

setTimeout(() => {

[Link]("Dados carregados!");

}, 3000);

carregarDados(); // Exibe "Dados carregados!" após 3 segundos

Promise

Representa a conclusão (ou falha) eventual de uma operação assíncrona e seu valor resultante.

Cenário do dia a dia: Você faz uma reserva em um restaurante e espera a confirmação.

Aplicação profissional: Você faz uma requisição de dados a um servidor e lida com o resultado
ou erro quando a resposta chega.
const promessa = new Promise((resolve, reject) => {

setTimeout(() => {

resolve("Dados carregados com sucesso!");

}, 2000);

});

39
[Link]((mensagem) => {

[Link](mensagem); // Mostra "Dados carregados com sucesso!"

}).catch((erro) => {

[Link]("Erro:", erro);

});

// Exemplo profissional

function requisitarDados() {

return new Promise((resolve, reject) => {

fetch("[Link]

.then(response => [Link]())

.then(data => resolve(data))

.catch(error => reject(error));

});

requisitarDados().then(dados => {

[Link](dados);

}).catch(erro => {

[Link]("Erro ao requisitar dados:", erro);

});

Funções Assíncronas e await

Permite escrever código assíncrono de maneira síncrona, facilitando a leitura e manutenção.

Cenário do dia a dia: Você faz uma tarefa e espera a resposta antes de seguir para a próxima.

Aplicação profissional: Você aguarda a conclusão de uma chamada de API antes de continuar
a execução do código.
async function carregarDados() {

return new Promise((resolve) => {

setTimeout(() => {

resolve("Dados carregados com sucesso!");

}, 2000);

});

async function exibirDados() {

40
 const dados = await carregarDados();

[Link](dados); // Mostra "Dados carregados com sucesso!"

exibirDados();

// Exemplo profissional

async function requisitarDados() {

const resposta = await fetch("[Link]

const dados = await [Link]();

return dados;

requisitarDados().then(dados => {

[Link](dados);

}).catch(erro => {

[Link]("Erro ao requisitar dados:", erro);

});

41