Pular para conteúdo

JavaScript

JavaScript é uma linguagem de programação de alto nível, interpretada, com tipagem dinâmica e multiparadigma. Originalmente desenvolvida para adicionar interatividade a páginas web, hoje é utilizada tanto no frontend quanto no backend, tornando-se uma das linguagens mais populares e versáteis do mundo da programação.

Características Principais

1. Linguagem de Script

JavaScript é uma linguagem de script, o que significa que o código é interpretado em tempo de execução, sem necessidade de compilação prévia. Isso permite um ciclo de desenvolvimento rápido e iterativo.

2. Tipagem Dinâmica

Em JavaScript, as variáveis não são associadas a um tipo específico. O tipo de uma variável é determinado em tempo de execução e pode mudar durante o ciclo de vida do programa.

let variavel = 42;        // número
variavel = "Olá, mundo!"; // agora é uma string
variavel = true;          // agora é um booleano

3. MultiparadigmaJavaScript suporta múltiplos paradigmas de programação, incluindo:

  • Programação Imperativa: Baseada em comandos que alteram o estado do programa
  • Programação Funcional: Tratando funções como cidadãos de primeira classe
  • Programação Orientada a Objetos: Baseada em protótipos e, mais recentemente, em classes
  • Programação Assíncrona: Utilizando callbacks, promises e async/await

4. Execução em Diferentes Ambientes

JavaScript pode ser executado em diversos ambientes:

  • Navegadores: Ambiente tradicional para JavaScript
  • Node.js: Ambiente de execução server-side
  • Deno: Runtime JavaScript/TypeScript mais recente
  • Aplicativos móveis: Através de frameworks como React Native
  • Aplicativos desktop: Com Electron ou similares

Sintaxe Básica

Variáveis e Constantes

// Declaração de variáveis
var x = 10;       // Escopo de função (legado)
let y = 20;       // Escopo de bloco (ES6+)
const z = 30;     // Constante (ES6+)

Tipos de Dados

JavaScript possui os seguintes tipos de dados primitivos:

  • Number: Representa números inteiros e de ponto flutuante
  • String: Sequência de caracteres
  • Boolean: Valores lógicos (true/false)
  • Null: Representa a ausência intencional de valor
  • Undefined: Representa uma variável declarada mas não inicializada
  • Symbol: Tipo de dado cujas instâncias são únicas e imutáveis (ES6+)
  • BigInt: Representa inteiros de precisão arbitrária (ES2020)

E um tipo de dado complexo:

  • Object: Coleção de propriedades
// Exemplos de tipos de dados
let numero = 42;
let texto = "JavaScript";
let booleano = true;
let nulo = null;
let indefinido = undefined;
let simbolo = Symbol("descrição");
let numeroGrande = 9007199254740991n;
let objeto = { chave: "valor" };
let array = [1, 2, 3]; // Arrays são objetos em JavaScript

Estruturas de Controle

Condicionais

// If-else
if (condicao) {
    // código se verdadeiro
} else if (outraCondicao) {
    // código se a primeira condição for falsa e a segunda verdadeira
} else {
    // código se ambas as condições forem falsas
}

// Operador ternário
let resultado = condicao ? valorSeVerdadeiro : valorSeFalso;

// Switch
switch (variavel) {
    case valor1:
        // código para valor1
        break;
    case valor2:
        // código para valor2
        break;
    default:
        // código padrão
}

Loops

// For
for (let i = 0; i < 10; i++) {
    // código a ser repetido
}

// While
while (condicao) {
    // código a ser repetido enquanto a condição for verdadeira
}

// Do-While
do {
    // código a ser executado pelo menos uma vez
} while (condicao);

// For...of (para iterar sobre valores de objetos iteráveis)
for (const elemento of array) {
    // código para processar cada elemento
}

// For...in (para iterar sobre propriedades enumeráveis de um objeto)
for (const chave in objeto) {
    // código para processar cada chave
}

Funções

// Declaração de função
function soma(a, b) {
    return a + b;
}

// Expressão de função
const multiplicacao = function(a, b) {
    return a * b;
};

// Arrow function (ES6+)
const divisao = (a, b) => a / b;

// Função com parâmetros padrão (ES6+)
function saudacao(nome = "Visitante") {
    return `Olá, ${nome}!`;
}

// Rest parameters (ES6+)
function somarTodos(...numeros) {
    return numeros.reduce((total, num) => total + num, 0);
}

Programação Orientada a Objetos

Objetos Literais

// Objeto literal
const pessoa = {
    nome: "João",
    idade: 30,
    profissao: "Desenvolvedor",
    apresentar() {
        return `Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`;
    }
};

// Acessando propriedades
console.log(pessoa.nome);        // Notação de ponto
console.log(pessoa["profissao"]); // Notação de colchetes

Protótipos

JavaScript é baseado em protótipos, onde objetos podem herdar propriedades e métodos de outros objetos.

// Função construtora
function Pessoa(nome, idade) {
    this.nome = nome;
    this.idade = idade;
}

// Adicionando método ao protótipo
Pessoa.prototype.apresentar = function() {
    return `Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`;
};

// Criando instâncias
const pessoa1 = new Pessoa("Maria", 25);
const pessoa2 = new Pessoa("Carlos", 35);

console.log(pessoa1.apresentar()); // "Olá, meu nome é Maria e tenho 25 anos."

Classes (ES6+)

// Declaração de classe
class Animal {
    constructor(nome) {
        this.nome = nome;
    }

    emitirSom() {
        return "Som genérico de animal";
    }
}

// Herança
class Cachorro extends Animal {
    constructor(nome, raca) {
        super(nome);
        this.raca = raca;
    }

    emitirSom() {
        return "Au au!";
    }

    abanarRabo() {
        return `${this.nome} está abanando o rabo`;
    }
}

const rex = new Cachorro("Rex", "Labrador");
console.log(rex.emitirSom());   // "Au au!"
console.log(rex.abanarRabo());  // "Rex está abanando o rabo"

Programação Assíncrona

Callbacks

function buscarDados(callback) {
    setTimeout(() => {
        const dados = { id: 1, nome: "Produto" };
        callback(null, dados);
    }, 1000);
}

buscarDados((erro, dados) => {
    if (erro) {
        console.error("Erro:", erro);
    } else {
        console.log("Dados:", dados);
    }
});

Promises

function buscarDados() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const dados = { id: 1, nome: "Produto" };
            // Simulando sucesso
            resolve(dados);
            // Simulando erro
            // reject(new Error("Falha ao buscar dados"));
        }, 1000);
    });
}

buscarDados()
    .then(dados => console.log("Dados:", dados))
    .catch(erro => console.error("Erro:", erro));

Async/Await

async function buscarEProcessarDados() {
    try {
        const dados = await buscarDados();
        console.log("Dados:", dados);
        return dados;
    } catch (erro) {
        console.error("Erro:", erro);
        throw erro;
    }
}

buscarEProcessarDados();

Recursos Modernos (ES6+)

Desestruturação

// Desestruturação de objetos
const pessoa = { nome: "Ana", idade: 28, profissao: "Designer" };
const { nome, idade } = pessoa;

// Desestruturação de arrays
const cores = ["vermelho", "verde", "azul"];
const [primeiraCor, segundaCor] = cores;

Spread Operator

// Spread com arrays
const numeros1 = [1, 2, 3];
const numeros2 = [4, 5, 6];
const todosNumeros = [...numeros1, ...numeros2];

// Spread com objetos
const dadosPessoais = { nome: "Pedro", idade: 32 };
const dadosProfissionais = { profissao: "Engenheiro", empresa: "ABC" };
const perfilCompleto = { ...dadosPessoais, ...dadosProfissionais };

Template Literals

const nome = "Maria";
const idade = 30;
const mensagem = `Olá, meu nome é ${nome} e tenho ${idade} anos.`;

Módulos

// Exportando (arquivo: modulo.js)
export const PI = 3.14159;
export function calcularArea(raio) {
    return PI * raio * raio;
}
export default class Circulo {
    constructor(raio) {
        this.raio = raio;
    }

    area() {
        return calcularArea(this.raio);
    }
}

// Importando (arquivo: app.js)
import Circulo, { PI, calcularArea } from './modulo.js';