Aula 6

No JavaScript, let, const e var são usados para declarar variáveis. Embora todos sejam utilizados para o mesmo propósito, eles possuem diferenças importantes em como funcionam. Vamos entender cada um deles em detalhe.

var

Características:

• Declarado com a palavra-chave var.
• Escopo de função: A variável existe apenas dentro da função onde foi declarada.
• Suporta hoisting: Variáveis declaradas com var são "movidas" para o topo de seu escopo durante a execução, mas seu valor inicial será undefined.
• Pode ser redeclarada e alterada no mesmo escopo.

Exemplo 1: Escopo com var

function exemploVar() {
    if (true) {
        var mensagem = "Olá, mundo!";
    }
    console.log(mensagem); // Funciona porque o escopo de var é a função
}

exemploVar();

Exemplo 2: Hoisting com var

console.log(nome); // undefined (não dá erro, mas a variável ainda não tem valor)
var nome = "Maria";
console.log(nome); // Maria

let

Características:

• Declarado com a palavra-chave let.
• Escopo de bloco: Existe apenas dentro do bloco {} onde foi definida.
• Não suporta hoisting no mesmo sentido que var: você não pode usar a variável antes de declará-la.
• Não pode ser redeclarada no mesmo escopo, mas seu valor pode ser alterado.

Exemplo 1: Escopo de bloco com let

function exemploLet() {
    if (true) {
        let mensagem = "Olá, mundo!";
        console.log(mensagem); // Funciona aqui
    }
    // console.log(mensagem); // Erro: mensagem não está definida fora do bloco
}

exemploLet();

Exemplo 2: Tentativa de redeclaração

let nome = "Maria";
// let nome = "João"; // Erro: nome já foi declarado
nome = "João"; // Isso funciona porque estamos apenas atualizando o valor
console.log(nome); // João

const

Características:

• Declarado com a palavra-chave const.
• Escopo de bloco: Assim como let, existe apenas dentro do bloco {} onde foi definida.
• Deve ser inicializada na declaração.
• Não pode ter seu valor reatribuído (imutável), mas objetos e arrays podem ser modificados em seus conteúdos internos.

Exemplo 1: Constantes imutáveis

const pi = 3.14;
// pi = 3.15; // Erro: Não é possível reatribuir um valor a uma constante
console.log(pi); // 3.14

Exemplo 2: Modificação de objetos e arrays

const pessoa = { nome: "Maria" };
pessoa.nome = "João"; // Isso é permitido
console.log(pessoa.nome); // João

const numeros = [1, 2, 3];
numeros.push(4); // Isso também é permitido
console.log(numeros); // [1, 2, 3, 4]

• Variáveis declaradas com var são elevadas com valor inicial undefined.
• Variáveis declaradas com let e const também sofrem hoisting, mas ficam em uma "zona morta temporal" (temporal dead zone) até serem inicializadas.
• Funções declaradas com function são completamente elevadas (declaração e corpo).

Exemplo com var

        
console.log(nome); // undefined (a declaração foi elevada, mas não o valor)
var nome = "Maria";
console.log(nome); // Maria
        
    

Exemplo com let e const

        
// console.log(nome); // Erro: Cannot access 'nome' before initialization
let nome = "João";
console.log(nome); // João
        
    

Exemplo com funções

        
saudar(); // Funciona porque a função é elevada
function saudar() {
    console.log("Olá!");
}
        
    

Hoisting é o comportamento do JavaScript de "elevar" declarações de variáveis, funções e classes para o topo do escopo (função ou global) durante a fase de compilação.

No entanto, apenas as declarações são elevadas, e não as atribuições de valor. Isso pode levar a comportamentos inesperados se o hoisting não for bem compreendido.

Módulos permitem dividir o código em arquivos separados, cada um com sua funcionalidade específica. Isso facilita a manutenção e a reutilização do código.

Os módulos foram introduzidos no ES6 (ES2015) e utilizam as palavras-chave export e import.

Exemplo Básico

Arquivo saudacoes.js:

        
export const saudacao = "Olá, mundo!";
export function saudar(nome) {
    return `Olá, ${nome}!`;
}
        
    

Arquivo main.js:

        
import { saudacao, saudar } from './saudacoes.js';

console.log(saudacao); // Olá, mundo!
console.log(saudar("Maria")); // Olá, Maria!
        
    

Tipos de Exportação

Exportação Nomeada

        
export const nome = "João";
export function ola() {
    return "Olá!";
}
        
    

Exportação Default

        
export default function ola() {
    return "Olá!";
}
        
    

No arquivo de importação:

        
import ola from './arquivo.js';
console.log(ola()); // Olá!
        
    

Template literals (ou template strings) são uma maneira de criar strings no JavaScript, introduzidas no ES6. Eles permitem:

• Interpolação de variáveis.
• Quebras de linha mais simples.
• Inclusão de expressões diretamente dentro da string.

Eles utilizam backticks (`) em vez de aspas (' ou ").

Interpolação de Variáveis

        
const nome = "Maria";
const mensagem = `Olá, ${nome}! Como você está?`;
console.log(mensagem); // Olá, Maria! Como você está?
        
    

Quebras de Linha

        
const mensagem = `Essa é uma mensagem
com múltiplas
linhas.`;
console.log(mensagem);
/*
Essa é uma mensagem
com múltiplas
linhas.
*/
        
    

Inclusão de Expressões

        
const a = 5;
const b = 10;
console.log(`A soma de ${a} e ${b} é ${a + b}.`); // A soma de 5 e 10 é 15.