Arquitetura do JavaScript

O ecossistema JavaScript no navegador web é construído sobre três pilares principais: o padrão ECMAScript (que define a sintaxe e as regras fundamentais da linguagem), o DOM (Document Object Model, responsável pela interação com a estrutura da página) e o BOM (Browser Object Model, utilizado para controlar o ambiente do navegador).

Sintaxe e Integração

Comentários

Comentários são essenciais para a manutenção do código e são ignorados pelo motor de execução.

// Comentário de linha única

/*
 * Bloco de comentário 
 * abrangendo múltiplas linhas
 */

Inclusão de Código

O JavaScript pode ser embutido diretamente no documento HTML ou carregado a partir de arquivos externos:

<!-- Execução interna -->
<script>
    console.log("Código interno executado");
</script>

<!-- Execução externa (o bloco deve permanecer vazio) -->
<script src="aplicacao.js"></script>

Embora o uso de ponto e vírgula (;) ao final das instruções seja opcional devido à Inserção Automática de Ponto e Vírgula (ASI), sua utilização explícita é uma prática recomendada para evitar ambiguidades na interpretação do código.

Declaração de Variáveis e Constantes

A linguagem moderna oferece diferentes palavras-chave para alocação de memória, cada uma com regras específicas de escopo:

• var: Possui escopo de função ou global. Sofre hoisting e pode ser redeclarada.
• let: Introduzido no ES6, possui escopo de bloco. É a escolha padrão para dados mutáveis.
• const: Cria uma referência de somente leitura. O valor atribuído na inicialização não pode ser reatribuído.

let userAge = 25;
const TAX_RATE = 0.08;

// A linha abaixo geraria um erro de atribuição em tempo de execução
// TAX_RATE = 0.10; 

Os identificadores devem iniciar com letras, _ ou $. A convenção de nomenclatura padrão no ecossistema é o formato camelCase.

Tipos de Dados

JavaScript é uma linguagem fracamente e dinamicamente tipada. O operador typeof permite inspecionar o tipo de uma variável durante a execução.

let dynamicValue;
console.log(typeof dynamicValue); // "undefined"

dynamicValue = 42;
console.log(typeof dynamicValue); // "number"

dynamicValue = "Olá Mundo";
console.log(typeof dynamicValue); // "string"

Primitivos e Objetos

• Number: Representa tanto números inteiros quanto de ponto flutuante sob o padrão IEEE 754. O valor especial NaN (Not a Number) é retornado quando uma operação matemática falha.
• String: Sequências de caracteres delimitadas por aspas simples, duplas ou crases. As crases habilitam os template literals, que suportam múltiplas linhas e interpolação de variáveis usando a sintaxe ${}.
• Boolean: Representa estados lógicos, assumindo apenas os valores true ou false.
• Conversão de Tipos: Métodos como parseInt() e parseFloat() tentam extrair valores numéricos do início de uma string. Se a string não iniciar com um número válido, o retorno será NaN.

Manipulação de Strings

const rawText = "   Engenharia de Software   ";
const cleanText = rawText.trim(); // Remove espaços em branco das extremidades
const upperText = cleanText.toUpperCase(); 
const wordsArray = cleanText.split(" "); // Divide a string em um array

const framework = "React";
// Formatação com template literal
const welcomeMessage = `Bem-vindo ao desenvolvimento com ${framework}!`; 

Coleções: Arrays

Arrays são objetos indexados projetados para armazenar listas ordenadas de dados.

const inventory = ["teclado", "mouse", "monitor"];

// Manipulação de extremidades
inventory.push("headset"); // Adiciona ao final
inventory.shift();         // Remove "teclado" do início

// Modificação direta com splice (índice_inicial, qtd_a_remover, ...itens_a_adicionar)
inventory.splice(1, 0, "webcam"); 
console.log(inventory); // ["mouse", "webcam", "monitor", "headset"]

// Iteração com desestruturação de parâmetros
const prices = [150, 200, 800];
prices.forEach((price, index) => {
    console.log(`Produto ${index}: R$ ${price.toFixed(2)}`);
});

Operadores

Aritméticos

A linguagem suporta operações matemáticas padrão (+, -, *, /, %) e operadores unários de incremento e decremento, cuja posição altera o momento da avaliação.

let counter = 10;

// Pós-incremento: atribui o valor atual, depois incrementa
let previousValue = counter++; 
console.log(previousValue); // 10
console.log(counter);       // 11

// Pré-incremento: incrementa primeiro, depois atribui o novo valor
let nextValue = ++counter;   
console.log(nextValue);     // 12
console.log(counter);       // 12

Nota: Qualquer operação aritmética envolvendo NaN resultará em NaN. Em contextos matemáticos, null é convertido para 0, enquanto undefined torna-se NaN.

Comparação e Igualdade

JavaScript possui dois níveis de verificação de igualdade:

• == (Igualdade fraca): Executa coerção de tipo implícita antes de comparar os valores.
• === (Igualdade estrita): Avalia tanto o valor quanto o tipo de dado. É o padrão recomendado para evitar bugs sutis.

const stringValue = "42";
const numberValue = 42;

console.log(stringValue == numberValue);  // true (conversão automática de string para number)
console.log(stringValue === numberValue); // false (os tipos 'string' e 'number' são diferentes)

console.log(null == undefined);  // true
console.log(null === undefined); // false

Lógicos

Operadores lógicos permitem a construção de condições complexas:

• && (E lógico): Retorna o primeiro operando falso ou o último verdadeiro.
• || (OU lógico): Retorna o primeiro operando verdadeiro ou o último falso.
• ! (Negação): Inverte o valor booleano da expressão.

Na avaliação de contexto booleano, os valores 0, "" (string vazia), null, undefined e NaN são classificados como falsy (avaliam como falso). Todos os demais valores, incluindo objetos vazios e arrrays vazios, são considerados truthy.