Resumo: JavaScript

Guia essencial de JavaScript em português para iniciantes. Conceitos fundamentais com exemplos práticos de desenvolvimento web.

JavaScript

Comentários e Sintaxe Básica

// Comentários de uma linha começam com duas barras inclinadas

/* 
  Comentários de múltiplas linhas usam barra-asterisco
  e terminam com asterisco-barra
*/

// Instruções terminam com ponto-e-vírgula (salvo em casos especiais do ASI)
console.log("JavaScript");

// O JavaScript insere ponto-e-vírgula automaticamente, mas é boa prática
// usar explicitamente para evitar comportamentos inesperados
let valor = 42;

Tipos de Dados e Operadores

// Números (inteiros e decimais)
42        // inteiro
3.14      // decimal
1.5e2     // notação científica: 150

// Operações aritméticas
10 + 5    // => 15
10 - 3    // => 7
4 * 3     // => 12
20 / 4    // => 5
17 % 5    // => 2 (resto da divisão)
2 ** 3    // => 8 (exponenciação)

// Strings (com aspas simples ou duplas)
"Olá, Mundo!"
'JavaScript é incrível'
`Template string com ${variavel}`  // permite interpolação

// Operações com strings
"Olá" + " " + "Mundo"  // => "Olá Mundo"
"Programming".length   // => 11
"JavaScript"[0]        // => 'J'

// Booleanos
true
false

// Operadores lógicos
!true           // => false
true && false   // => false
true || false   // => true

// Operadores de comparação
5 === 5         // => true (igual em tipo e valor)
5 == "5"        // => true (igual em valor, sem tipo)
5 !== "5"       // => true (diferente)
10 > 5          // => true
10 <= 10        // => true

// Valores especiais
null            // representa ausência intencional de valor
undefined       // representa valor não definido
NaN             // "Not a Number" ("Não é um número" - resultado de operação inválida)
Infinity        // resultado de divisão por zero

Variáveis e Escopo

// Variáveis com var (escopo de função - evitar usar)
var nome = "João";
var idade;      // undefined

// Variáveis com let (escopo de bloco - recomendado)
let cidade = "São Paulo";
let salario;

// Constantes com const (não podem ser reatribuídas)
const PI = 3.14159;
const MAX_USUARIOS = 100;

// Operadores de atribuição
let x = 10;
x += 5;         // => 15 (equivalente a x = x + 5)
x -= 3;         // => 12
x *= 2;         // => 24
x /= 4;         // => 6

// Incremento e decremento
let contador = 0;
contador++;     // => 1
contador--;     // => 0

Arrays (Listas)

// Criar arrays
let frutas = ["maçã", "banana", "laranja"];
let numeros = [1, 2, 3, 4, 5];
let misto = [10, "texto", true, null];      // pode ter tipos diferentes

// Acessar elementos (começando em 0)
frutas[0]       // => "maçã"
frutas[-1]      // => undefined (usar .length - 1)
frutas.length   // => 3

// Métodos úteis
frutas.push("uva");              // adiciona ao final
frutas.pop();                    // remove do final
frutas.unshift("melancia");      // adiciona no início
frutas.shift();                  // remove do início

// Encontrar elementos
frutas.includes("banana");       // => true
frutas.indexOf("laranja");       // => 1

// Transformar arrays
let dobrados = numeros.map(n => n * 2);     // [2, 4, 6, 8, 10]
let pares = numeros.filter(n => n % 2 === 0);  // [2, 4]
let soma = numeros.reduce((acc, n) => acc + n, 0);  // 15

// Fatiamento (slice não modifica array original)
frutas.slice(0, 2);              // retorna primeiros 2 elementos

// Unir arrays
let array1 = [1, 2];
let array2 = [3, 4];
let unido = [...array1, ...array2];  // [1, 2, 3, 4]

Objetos (Mapa de Chave-Valor)

// Criar objetos
let pessoa = {
    nome: "Ana",
    idade: 28,
    ativo: true
};

let carro = {
    marca: "Toyota",
    modelo: "Corolla",
    ano: 2023,
    ligar: function() {
        return "O carro ligou!";
    }
};

// Acessar propriedades
pessoa.nome              // => "Ana"
pessoa["idade"]          // => 28

// Modificar propriedades
pessoa.idade = 29;
pessoa.cidade = "Rio";   // adiciona nova propriedade

// Deletar propriedades
delete pessoa.ativo;

// Verificar se propriedade existe
"nome" in pessoa         // => true
pessoa.hasOwnProperty("idade")  // => true

// Listar todas as chaves
Object.keys(pessoa);     // ["nome", "idade", "cidade"]

// Listar todos os valores
Object.values(pessoa);   // ["Ana", 29, "Rio"]

// Iterar sobre objeto
for (let chave in pessoa) {
    console.log(chave, pessoa[chave]);
}

// Desestruturação
let { nome, idade } = pessoa;  // extrai as propriedades

Controle de Fluxo

// Condicional if/else
let temperatura = 25;

if (temperatura > 30) {
    console.log("Muito quente!");
} else if (temperatura < 15) {
    console.log("Muito frio!");
} else {
    console.log("Temperatura agradável");
}

// Operador ternário (condicional em uma linha)
let status = temperatura > 20 ? "quente" : "frio";

// Switch
let diaSemana = 3;
switch (diaSemana) {
    case 1:
        console.log("Segunda");
        break;
    case 2:
        console.log("Terça");
        break;
    default:
        console.log("Outro dia");
}

// Operadores lógicos para valores padrão
let nomePessoa = nomeEntrada || "Visitante";  // usa "Visitante" se nomeEntrada for falso

Laços de Repetição

// For clássico
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

// While
let contador = 0;
while (contador < 3) {
    console.log(contador);
    contador++;
}

// Do-while (sempre executa pelo menos uma vez)
let tentativa = 0;
do {
    console.log("Tentativa:", tentativa);
    tentativa++;
} while (tentativa < 2);

// For-of (iteração sobre valores)
for (let fruta of ["maçã", "banana", "laranja"]) {
    console.log(fruta);
}

// For-in (iteração sobre chaves)
let usuario = { nome: "João", idade: 30 };
for (let prop in usuario) {
    console.log(prop, usuario[prop]);
}

// Array.forEach
["gato", "cachorro", "pássaro"].forEach((animal, index) => {
    console.log(`${index}: ${animal}`);
});

Funções

// Declaração de função
function saudar(nome) {
    return `Olá, ${nome}!`;
}
saudar("Maria");  // => "Olá, Maria!"

// Parâmetros com valor padrão
function criarPerfil(nome, idade = 18) {
    return { nome, idade };
}
criarPerfil("João");           // usa idade padrão
criarPerfil("Ana", 25);        // sobrescreve padrão

// Função com múltiplos parâmetros variáveis
function somar(...numeros) {
    return numeros.reduce((acc, n) => acc + n, 0);
}
somar(1, 2, 3);     // => 6
somar(10, 20, 30);  // => 60

// Função anônima (expressão de função)
let quadrado = function(x) {
    return x * x;
};
quadrado(4);        // => 16

// Arrow function (sintaxe moderna)
let dobrar = x => x * 2;
let somatoria = (a, b) => a + b;
let cumprimento = () => "Olá!";

dobrar(5);          // => 10
somatoria(3, 4);    // => 7

// Closures (função dentro de função)
function criarMultiplicador(fator) {
    return function(numero) {
        return numero * fator;
    };
}

let mult3 = criarMultiplicador(3);
mult3(5);            // => 15

// Desestruturação de parâmetros
function exibirUsuario({ nome, idade }) {
    console.log(`${nome} tem ${idade} anos`);
}
exibirUsuario({ nome: "Pedro", idade: 35 });

Objetos e Protótipos

// Função construtora (padrão antigo)
function Animal(nome, tipo) {
    this.nome = nome;
    this.tipo = tipo;
}

Animal.prototype.apresentar = function() {
    return `Eu sou um ${this.tipo} chamado ${this.nome}`;
};

let gato = new Animal("Miau", "gato");
gato.apresentar();  // => "Eu sou um gato chamado Miau"

// Classes (sintaxe moderna - recomendada)
class Veiculo {
    constructor(marca, cor) {
        this.marca = marca;
        this.cor = cor;
    }
    
    info() {
        return `${this.marca} ${this.cor}`;
    }
}

class Moto extends Veiculo {
    constructor(marca, cor, cilindrada) {
        super(marca, cor);  // chama construtor da classe mãe
        this.cilindrada = cilindrada;
    }
    
    info() {
        return `${super.info()} - ${this.cilindrada}cc`;
    }
}

let moto = new Moto("Honda", "Vermelha", 560);
moto.info();  // => "Honda Vermelha - 560cc"

// Object.create (criar objeto com prototype específico)
let prototipo = {
    saudar() {
        return `Olá, meu nome é ${this.nome}`;
    }
};

let pessoa = Object.create(prototipo);
pessoa.nome = "Carlos";
pessoa.saudar();  // => "Olá, meu nome é Carlos"

// Métodos úteis de Object
Object.assign(pessoa, { idade: 30 });  // copiar propriedades
Object.keys(pessoa);                   // ["nome", "idade"]
Object.values(pessoa);                 // ["Carlos", 30]

Conceitos Avançados

// Tratamento de erros
try {
    let resultado = 10 / 0;
    JSON.parse("inválido");
} catch (erro) {
    console.log("Erro capturado:", erro.message);
} finally {
    console.log("Limpeza executada");
}

// Promises (para operações assíncronas)
let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Sucesso!");
    }, 1000);
});

promise.then(resultado => {
    console.log(resultado);  // depois de 1 segundo
});

// Async/await (forma moderna de trabalhar com promises)
async function buscarDados() {
    try {
        let resposta = await fetch("https://api.example.com/dados");
        let dados = await resposta.json();
        return dados;
    } catch (erro) {
        console.error("Erro ao buscar:", erro);
    }
}

// Destructuring avançado
let { nome, idade, ...rest } = { nome: "Ana", idade: 25, cidade: "SP", país: "BR" };
// rest => { cidade: "SP", país: "BR" }

// Rest parameters e spread operator
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combinado = [...arr1, ...arr2];  // [1, 2, 3, 4, 5, 6]

// Módulos (exportar e importar)
// arquivo: math.js
// export function somar(a, b) { return a + b; }

// outro arquivo:
// import { somar } from './math.js';
// somar(5, 3);  // => 8

// Template literals com tags
function destaque(strings, ...valores) {
    return strings[0] + valores[0].toUpperCase() + strings[1];
}
let palavra = "javascript";
destaque`Eu amo ${palavra}!`;  // => "Eu amo JAVASCRIPT!"