Guia essencial de JavaScript em português para iniciantes. Conceitos fundamentais com exemplos práticos de desenvolvimento web.
1// Comentários de uma linha começam com duas barras inclinadas 2 3/* 4 Comentários de múltiplas linhas usam barra-asterisco 5 e terminam com asterisco-barra 6*/ 7 8
1// Números (inteiros e decimais) 242 // inteiro 33.14 // decimal 41.5e2 // notação científica: 150 5 6// Operações aritméticas 710 + 5 // => 15 810 - 3 // => 7 94 * 3 // => 12 1020 / 4 // => 5 1117 % 5 // => 2 (resto da divisão) 122 ** 3 // => 8 (exponenciação) 13 14// Strings (com aspas simples ou duplas) 15"Olá, Mundo!" 16'JavaScript é incrível' 17`Template string com ${variavel}` // permite interpolação 18 19// Operações com strings 20"Olá" + " " + "Mundo" // => "Olá Mundo" 21"Programming".length // => 11 22"JavaScript"[0] // => 'J' 23 24// Booleanos 25true 26false 27 28// Operadores lógicos 29!true // => false 30true && false // => false 31true || false // => true 32 33// Operadores de comparação 345 === 5 // => true (igual em tipo e valor) 355 == "5" // => true (igual em valor, sem tipo) 365 !== "5" // => true (diferente) 3710 > 5 // => true 3810 <= 10 // => true 39 40// Valores especiais 41null // representa ausência intencional de valor 42undefined // representa valor não definido 43NaN // "Not a Number" ("Não é um número" - resultado de operação inválida) 44Infinity // resultado de divisão por zero
1// Variáveis com var (escopo de função - evitar usar) 2var nome = "João"; 3var idade; // undefined 4 5// Variáveis com let (escopo de bloco - recomendado) 6let cidade = "São Paulo"; 7let salario; 8 9// Constantes com const (não podem ser reatribuídas) 10const PI = 3.14159; 11const MAX_USUARIOS = 100; 12 13// Operadores de atribuição 14let x = 10; 15x += 5; // => 15 (equivalente a x = x + 5) 16x -= 3; // => 12 17x *= 2; // => 24 18x /= 4; // => 6 19 20// Incremento e decremento 21let contador = 0; 22contador++; // => 1 23contador--; // => 0
1// Criar arrays 2let frutas = ["maçã", "banana", "laranja"]; 3let numeros = [1, 2, 3, 4, 5]; 4let misto = [10, "texto", true, null]; // pode ter tipos diferentes 5 6// Acessar elementos (começando em 0) 7frutas[0] // => "maçã" 8frutas[-1] // => undefined (usar .length - 1) 9frutas.length // => 3 10 11// Métodos úteis 12frutas.push("uva"); // adiciona ao final 13frutas.pop(); // remove do final 14frutas.unshift("melancia"); // adiciona no início 15frutas.shift(); // remove do início 16 17// Encontrar elementos 18frutas.includes("banana"); // => true 19frutas.indexOf("laranja"); // => 1 20 21// Transformar arrays 22let dobrados = numeros.map(n => n * 2); // [2, 4, 6, 8, 10] 23let pares = numeros.filter(n => n % 2 === 0); // [2, 4] 24let soma = numeros.reduce((acc, n) => acc + n, 0); // 15 25 26// Fatiamento (slice não modifica array original) 27frutas.slice(0, 2); // retorna primeiros 2 elementos 28 29// Unir arrays 30let array1 = [1, 2]; 31let array2 = [3, 4]; 32let unido = [...array1, ...array2]; // [1, 2, 3, 4]
1// Criar objetos 2let pessoa = { 3 nome: "Ana", 4 idade: 28, 5 ativo: true 6}; 7 8let carro = { 9 marca: "Toyota", 10 modelo: "Corolla", 11 ano: 2023, 12 ligar: function() { 13 return "O carro ligou!"; 14 } 15}; 16 17// Acessar propriedades 18pessoa.nome // => "Ana" 19pessoa["idade"] // => 28 20 21// Modificar propriedades 22pessoa.idade = 29; 23pessoa.cidade = "Rio"; // adiciona nova propriedade 24 25// Deletar propriedades 26delete pessoa.ativo; 27 28// Verificar se propriedade existe 29"nome" in pessoa // => true 30pessoa.hasOwnProperty("idade") // => true 31 32// Listar todas as chaves 33Object.keys(pessoa); // ["nome", "idade", "cidade"] 34 35// Listar todos os valores 36Object.values(pessoa); // ["Ana", 29, "Rio"] 37 38// Iterar sobre objeto 39for (let chave in pessoa) { 40 console.log(chave, pessoa[chave]); 41} 42 43// Desestruturação 44let { nome, idade } = pessoa; // extrai as propriedades
1// Condicional if/else 2let temperatura = 25; 3 4if (temperatura > 30) { 5 console.log("Muito quente!"); 6} else if (temperatura < 15) { 7 console.log("Muito frio!"); 8} else { 9 console.log("Temperatura agradável"); 10} 11 12// Operador ternário (condicional em uma linha) 13let status = temperatura > 20 ? "quente" : "frio"; 14 15// Switch 16let diaSemana = 3; 17switch (diaSemana) { 18 case 1: 19 console.log("Segunda"); 20 break; 21 case 2: 22 console.log("Terça"); 23 break; 24 default: 25 console.log("Outro dia"); 26} 27 28// Operadores lógicos para valores padrão 29let nomePessoa = nomeEntrada || "Visitante"; // usa "Visitante" se nomeEntrada for falso
1// For clássico 2for (let i = 0; i < 5; i++) { 3 console.log(i); // 0, 1, 2, 3, 4 4} 5 6// While 7let contador = 0; 8while (contador < 3) { 9 console.log(contador); 10 contador++; 11} 12 13// Do-while (sempre executa pelo menos uma vez) 14let tentativa = 0; 15do { 16 console.log("Tentativa:", tentativa); 17 tentativa++; 18} while (tentativa < 2); 19 20// For-of (iteração sobre valores) 21for (let fruta of ["maçã", "banana", "laranja"]) { 22 console.log(fruta); 23} 24 25// For-in (iteração sobre chaves) 26let usuario = { nome: "João", idade: 30 }; 27for (let prop in usuario) { 28 console.log(prop, usuario[prop]); 29} 30 31// Array.forEach 32["gato", "cachorro", "pássaro"].forEach((animal, index) => { 33 console.log(`${index}: ${animal}`); 34});
1// Declaração de função 2function saudar(nome) { 3 return `Olá, ${nome}!`; 4} 5saudar("Maria"); // => "Olá, Maria!" 6 7// Parâmetros com valor padrão 8function criarPerfil(nome, idade = 18) { 9 return { nome, idade }; 10} 11criarPerfil("João"); // usa idade padrão 12criarPerfil("Ana", 25); // sobrescreve padrão 13 14// Função com múltiplos parâmetros variáveis 15function somar(...numeros) { 16 return numeros.reduce((acc, n) => acc + n, 0); 17} 18somar(1, 2, 3); // => 6 19somar(10, 20, 30); // => 60 20 21// Função anônima (expressão de função) 22let quadrado = function(x) { 23 return x * x; 24}; 25quadrado(4); // => 16 26 27// Arrow function (sintaxe moderna) 28let dobrar = x => x * 2; 29let somatoria = (a, b) => a + b; 30let cumprimento = () => "Olá!"; 31 32dobrar(5); // => 10 33somatoria(3, 4); // => 7 34 35// Closures (função dentro de função) 36function criarMultiplicador(fator) { 37 return function(numero) { 38 return numero * fator; 39 }; 40} 41 42let mult3 = criarMultiplicador(3); 43mult3(5); // => 15 44 45// Desestruturação de parâmetros 46function exibirUsuario({ nome, idade }) { 47 console.log(`${nome} tem ${idade} anos`); 48} 49exibirUsuario({ nome: "Pedro", idade: 35 });
1// Função construtora (padrão antigo) 2function Animal(nome, tipo) { 3 this.nome = nome; 4 this.tipo = tipo; 5} 6 7Animal.prototype.apresentar = function() { 8 return `Eu sou um ${this.tipo} chamado ${this.nome}`; 9}; 10 11let gato = new Animal("Miau", "gato"); 12gato.apresentar(); // => "Eu sou um gato chamado Miau" 13 14// Classes (sintaxe moderna - recomendada) 15class Veiculo { 16 constructor(marca, cor) { 17 this.marca = marca; 18 this.cor = cor; 19 } 20 21 info() { 22 return `${this.marca} ${this.cor}`; 23 } 24} 25 26class Moto extends Veiculo { 27 constructor(marca, cor, cilindrada) { 28 super(marca, cor); // chama construtor da classe mãe 29 this.cilindrada = cilindrada; 30 } 31 32 info() { 33 return `${super.info()} - ${this.cilindrada}cc`; 34 } 35} 36 37let moto = new Moto("Honda", "Vermelha", 560); 38moto.info(); // => "Honda Vermelha - 560cc" 39 40// Object.create (criar objeto com prototype específico) 41let prototipo = { 42 saudar() { 43 return `Olá, meu nome é ${this.nome}`; 44 } 45}; 46 47let pessoa = Object.create(prototipo); 48pessoa.nome = "Carlos"; 49pessoa.saudar(); // => "Olá, meu nome é Carlos" 50 51// Métodos úteis de Object 52Object.assign(pessoa, { idade: 30 }); // copiar propriedades 53Object.keys(pessoa); // ["nome", "idade"] 54Object.values(pessoa); // ["Carlos", 30]
1// Tratamento de erros 2try { 3 let resultado = 10 / 0; 4 JSON.parse("inválido"); 5} catch (erro) { 6 console.log("Erro capturado:", erro.message); 7} finally { 8 console.log("Limpeza executada"); 9} 10 11// Promises (para operações assíncronas) 12let promise = new Promise((resolve, reject) => { 13 setTimeout(() => { 14 resolve("Sucesso!"); 15 }, 1000); 16}); 17 18promise.then(resultado => { 19 console.log(resultado); // depois de 1 segundo 20}); 21 22// Async/await (forma moderna de trabalhar com promises) 23async function buscarDados() { 24 try { 25 let resposta = await fetch("https://api.example.com/dados"); 26 let dados = await resposta.json(); 27 return dados; 28 } catch (erro) { 29 console.error("Erro ao buscar:", erro); 30 } 31} 32 33// Destructuring avançado 34let { nome, idade, ...rest } = { nome: "Ana", idade: 25, cidade: "SP", país: "BR" }; 35// rest => { cidade: "SP", país: "BR" } 36 37// Rest parameters e spread operator 38let arr1 = [1, 2, 3]; 39let arr2 = [4, 5, 6]; 40let combinado = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] 41 42// Módulos (exportar e importar) 43// arquivo: math.js 44// export function somar(a, b) { return a + b; } 45 46// outro arquivo: 47// import { somar } from './math.js'; 48// somar(5, 3); // => 8 49 50// Template literals com tags 51function destaque(strings, ...valores) { 52 return strings[0] + valores[0].toUpperCase() + strings[1]; 53} 54let palavra = "javascript"; 55destaque`Eu amo ${palavra}!`; // => "Eu amo JAVASCRIPT!"