revisão de javascript

Revise os conceitos abaixo para se preparar para o próximo exame preparatório.

Trabalhando com HTML, CSS e JavaScript

Enquanto HTML e CSS fornecem a estrutura do site, o JavaScript traz interatividade aos sites ao permitir funcionalidades complexas, como lidar com entrada do usuário, animar elementos e até construir aplicações web completas.

Tipos de dados em JavaScript

Os tipos de dados ajudam o programa a entender o tipo de dado com que está trabalhando, seja um número, texto ou outra coisa.

Number: Um número representa tanto inteiros quanto valores de ponto flutuante. Exemplos de inteiros incluem 7, 19 e 90.
Ponto flutuante: Um número de ponto flutuante é um número com ponto decimal. Exemplos incluem 3.14, 0.5 e 0.0001.
String: Uma string é uma sequência de caracteres, ou texto, entre aspas. "I like coding" e 'JavaScript is fun' são exemplos de strings.
Booleano: Um booleano representa um dos dois valores possíveis: true ou false. Você pode usar um booleano para representar uma condição, como isLoggedIn = true.
Undefined e Null: Um valor undefined é uma variável que foi declarada mas não recebeu um valor. Um valor null é um valor vazio, ou uma variável que foi intencionalmente atribuída ao valor null.
Objeto: Um objeto é uma coleção de pares chave-valor. A chave é o nome da propriedade e o valor é o valor da propriedade.

Aqui, o objeto pet tem três propriedades ou chaves: name, age e type. Os valores são Fluffy, 3 e dog, respectivamente.

let pet = {
  name: "Fluffy",
  age: 3,
  type: "dog"
};

Symbol: O tipo de dado Symbol é um valor único e imutável que pode ser usado como identificador para propriedades de objetos.

No exemplo abaixo, dois símbolos são criados com a mesma descrição, mas não são iguais.

const crypticKey1= Symbol("saltNpepper");
const crypticKey2= Symbol("saltNpepper");
console.log(crypticKey1 === crypticKey2); // false

BigInt: Quando o número é muito grande para o tipo de dado Number, você pode usar o tipo BigInt para representar inteiros de comprimento arbitrário.

Adicionando um n ao final do número, você pode criar um BigInt.

const veryBigNumber = 1234567890123456789012345678901234567890n;

Variáveis em JavaScript

Variáveis podem ser declaradas usando a palavra-chave let.

let cityName;

Para atribuir um valor a uma variável, você pode usar o operador de atribuição =.

cityName = "New York";

Variáveis declaradas usando let podem ser reatribuídas com um novo valor.

let cityName = "New York";
cityName = "Los Angeles";
console.log(cityName); // Los Angeles

Além de let, você também pode usar const para declarar uma variável. No entanto, uma variável const não pode ser reatribuída com um novo valor.

const cityName = "New York";
cityName = "Los Angeles"; // TypeError: Assignment to constant variable.

Variáveis declaradas usando const são usadas para declarar constantes, que não podem mudar durante o código, como PI ou MAX_SIZE.

Convenções para nomear variáveis

Os nomes das variáveis devem ser descritivos e significativos.
Os nomes das variáveis devem ser camelCase como cityName, isLoggedIn e veryBigNumber.
Os nomes das variáveis não devem começar com um número. Devem começar com uma letra, _ ou $.
Os nomes das variáveis não devem conter espaços ou caracteres especiais, exceto _ e $.
Os nomes das variáveis não devem ser palavras-chave reservadas.
Os nomes das variáveis são sensíveis a maiúsculas e minúsculas. age e Age são variáveis diferentes.

Strings e imutabilidade de strings em JavaScript

Strings são sequências de caracteres entre aspas. Podem ser criadas usando aspas simples e aspas duplas.

let correctWay = 'This is a string';
let alsoCorrect = "This is also a string";

Strings são imutáveis em JavaScript. Isso significa que, uma vez criada uma string, você não pode mudar os caracteres nela. No entanto, você ainda pode reatribuir strings a um novo valor.

let firstName = "John";
firstName = "Jane"; // Reassigning the string to a new value

Concatenação de strings em JavaScript

Concatenação é o processo de juntar múltiplas strings ou combinar strings com variáveis que contêm texto. O operador + é um dos métodos mais simples e usados com frequência para concatenar strings.

let studentName = "Asad";
let studentAge = 25;
let studentInfo = studentName + " is " + studentAge + " years old.";
console.log(studentInfo); // Asad is 25 years old.

Se você precisa adicionar ou anexar a uma string existente, pode usar o operador +=. Isso é útil quando você quer construir uma string adicionando mais texto ao longo do tempo.

let message = "Welcome to programming, ";
message += "Asad!";
console.log(message); // Welcome to programming, Asad!

Outra forma de concatenar strings é usar o método concat(). Esse método junta duas ou mais strings.

let firstName = "John";
let lastName = "Doe";
let fullName = firstName.concat(" ", lastName);
console.log(fullName); // John Doe

Registrando mensagens com `console.log()`

O método console.log() é usado para registrar mensagens no console. É uma ferramenta útil para depuração e teste do seu código.

console.log("Hello, World!");
// Output: Hello, World!

Ponto e vírgula em JavaScript

Pontos e vírgulas são usados principalmente para marcar o fim de uma declaração. Isso ajuda o motor JavaScript a entender a separação das instruções individuais, o que é crucial para a execução correta.

let message = "Hello, World!"; // first statement ends here
let number = 42; // second statement starts here

Pontos e vírgulas ajudam a evitar ambiguidades na execução do código e garantem que as declarações sejam terminadas corretamente.

Comentários em JavaScript

Qualquer linha de código comentada é ignorada pelo motor JavaScript. Comentários são usados para explicar o código, fazer anotações ou desabilitar temporariamente o código.
Comentários de uma linha são criados usando //.

// This is a single-line comment and will be ignored by the JavaScript engine

Comentários multilinha são criados usando /* para iniciar o comentário e */ para terminar o comentário.

/*
This is a multi-line comment.
It can span multiple lines.
*/

JavaScript como linguagem de tipagem dinâmica

JavaScript é uma linguagem de tipagem dinâmica, o que significa que você não precisa especificar o tipo de dado de uma variável quando a declara. O motor JavaScript determina automaticamente o tipo de dado com base no valor atribuído à variável.

let error = 404; // JavaScript treats error as a number
error = "Not Found"; // JavaScript now treats error as a string

Outras linguagens, como C#, que não são de tipagem dinâmica, resultariam em erro:

int error = 404; // value must always be an integer
error = "Not Found"; // This would cause an error in C#

Usando o operador `typeof`

O operador typeof é usado para verificar o tipo de dado de uma variável. Ele retorna uma string indicando o tipo da variável.

let age = 25;
console.log(typeof age); // "number"

let isLoggedIn = true;
console.log(typeof isLoggedIn); // "boolean"

No entanto, há uma peculiaridade conhecida em JavaScript quando se trata de null. O operador typeof retorna "object" para valores null.

let user = null;
console.log(typeof user); // "object"

Noções básicas sobre strings

Definição: Uma string é uma sequência de caracteres envolvida por aspas simples, aspas duplas ou ticks. Strings são tipos primitivos de dados e são imutáveis. Imutabilidade significa que, uma vez criada uma string, ela não pode ser alterada.
Acessando caracteres de uma string: Para acessar um caractere de uma string, você pode usar a notação por colchetes e passar o número do índice. Um índice é a posição de um caractere dentro de uma string, e é de base zero.

const developer = "Jessica";
console.log(developer[0]); // J

\n (caractere de nova linha): Você pode criar uma nova linha em uma string usando o caractere de nova linha \n.

const poem = "Roses are red,\nViolets are blue,\nJavaScript is fun,\nAnd so are you.";
console.log(poem);

Escape de strings: Você pode escapar caracteres em uma string colocando barras invertidas (\) antes das aspas.

const statement = "She said, \"Hello!\"";
console.log(statement); // She said, "Hello!"

Template literals (strings template) e interpolação de strings

Definição: Template literals são definidos com ticks (`). Eles permitem manipulação mais fácil de strings, incluindo incorporar variáveis diretamente dentro de uma string, um recurso conhecido como interpolação de strings.

const name = "Jessica";
const greeting = Hello, ${name}!; 
console.log(greeting); // "Hello, Jessica!"

ASCII, o método `charCodeAt()` e o método `fromCharCode()`

ASCII: ASCII, abreviação de American Standard Code for Information Interchange, é um padrão de codificação de caracteres usado em computadores para representar texto. Ele atribui um valor numérico a cada caractere, que é universalmente reconhecido pelas máquinas.
O método charCodeAt(): Esse método é chamado em uma string e retorna o código ASCII do caractere em um índice especificado.

const letter = "A";
console.log(letter.charCodeAt(0));  // 65

O método fromCharCode(): Esse método converte um código ASCII em seu caractere correspondente.

const char = String.fromCharCode(65);
console.log(char);  // A

Outros métodos comuns de string

O método indexOf: Esse método é usado para buscar uma substring dentro de uma string. Se a substring for encontrada, indexOf retorna o índice (ou posição) da primeira ocorrência dessa substring. Se a substring não for encontrada, indexOf retorna -1, indicando que a busca foi malsucedida.

const text = "The quick brown fox jumps over the lazy dog.";
console.log(text.indexOf("fox")); // 16
console.log(text.indexOf("cat")); // -1

O método includes(): Esse método é usado para verificar se uma string contém uma substring específica. Se a substring for encontrada dentro da string, o método retorna true. Caso contrário, retorna false.

const text = "The quick brown fox jumps over the lazy dog.";
console.log(text.includes("fox")); // true
console.log(text.includes("cat")); // false

O método slice(): Esse método retorna uma nova string contendo uma parte da string original, determinada pelos índices inicial e final especificados. Ele não modifica a string original. O índice inicial é incluído, enquanto o índice final é excluído.

const text = "G.E.A.R ACADEMY";
console.log(text.slice(0, 4));  // "free"
console.log(text.slice(4, 8));  // "Code"
console.log(text.slice(8, 12)); // "Camp"

O método toUpperCase(): Esse método converte todos os caracteres para letras maiúsculas e retorna uma nova string com todos os caracteres em maiúsculas.

const text = "Hello, world!";
console.log(text.toUpperCase()); // "HELLO, WORLD!"

O método toLowerCase(): Esse método converte todos os caracteres de uma string para minúsculas.

const text = "HELLO, WORLD!"
console.log(text.toLowerCase()); // "hello, world!"

O método replace(): Esse método permite encontrar um valor especificado (como uma palavra ou caractere) em uma string e substituí-lo por outro valor. O método retorna uma nova string com a substituição e deixa a original inalterada porque strings em JavaScript são imutáveis.

const text = "I like cats";
console.log(text.replace("cats", "dogs")); // "I like dogs"

O método repeat(): Esse método é usado para repetir uma string um número especificado de vezes.

const text = "Hello";
console.log(text.repeat(3)); // "HelloHelloHello"

O método trim(): Esse método é usado para remover espaços em branco do início e do fim de uma string.

const text = "  Hello, world!  ";
console.log(text.trim()); // "Hello, world!"

O método trimStart(): Esse método remove espaços em branco do início (ou "começo") da string.

const text = "  Hello, world!  ";
console.log(text.trimStart()); // "Hello, world!  "

O método trimEnd(): Esse método remove espaços em branco do fim da string.

const text = " Hello, world! ";
console.log(text.trimEnd()); // " Hello, world!"

O método prompt(): Esse método do window é usado para obter informações do usuário por meio de uma caixa de diálogo. Esse método recebe dois argumentos. O primeiro argumento é a mensagem que aparecerá dentro da caixa de diálogo, normalmente solicitando que o usuário insira informações. O segundo é um valor padrão, que é opcional e preencherá inicialmente o campo de entrada.

const answer = window.prompt("What's your favorite animal?"); // This will change depending on what the user answers

Trabalhando com o tipo de dado Number

Definição: O tipo Number do JavaScript inclui inteiros, números de ponto flutuante, Infinity e NaN. Números de ponto flutuante são números com ponto decimal. Infinity positivo é um número maior que qualquer outro número enquanto -Infinity é um número menor que qualquer outro número. NaN (Not a Number) representa um valor numérico inválido como a string "Jessica".

Operações aritméticas comuns

Operador de adição: Esse operador (+) é usado para calcular a soma de dois ou mais números.
Operador de subtração: Esse operador (-) é usado para calcular a diferença entre dois números.
Operador de multiplicação: Esse operador (*) é usado para calcular o produto de dois ou mais números.
Operador de divisão: Esse operador (/) é usado para calcular o quociente entre dois números
Divisão por zero: Se você tentar dividir por zero, o JavaScript retornará Infinity.
Operador de resto: Esse operador (%) retorna o resto de uma divisão.
Operador de exponenciação: Esse operador (**) eleva um número à potência de outro.

Cálculos com números e strings

Explicação: Quando você usa o operador + com um número e uma string, o JavaScript coerce o número para uma string e concatena os dois valores. Quando você usa os operadores -, * ou / com uma string e um número, o JavaScript coerce a string para um número e o resultado será um número. Para null e undefined, o JavaScript trata null como 0 e undefined como NaN em operações matemáticas.

const result = 5 + '10';

console.log(result); // "510"
console.log(typeof result); // string

const subtractionResult = '10' - 5;
console.log(subtractionResult); // 5
console.log(typeof subtractionResult); // number

const multiplicationResult = '10' * 2;
console.log(multiplicationResult); // 20
console.log(typeof multiplicationResult); // number

const divisionResult = '20' / 2;
console.log(divisionResult); // 10
console.log(typeof divisionResult); // number

const result1 = null + 5;
console.log(result1); // 5
console.log(typeof result1); // number

const result2 = undefined + 5;
console.log(result2); // NaN
console.log(typeof result2); // number

Precedência de operadores

Definição: A precedência de operadores determina a ordem em que as operações são avaliadas em uma expressão. Operadores com maior precedência são avaliados antes dos de menor precedência. Valores dentro de parênteses são avaliados primeiro e multiplicação/divisão têm precedência maior que adição/subtração. Se os operadores têm a mesma precedência, o JavaScript usa associatividade. Associatividade indica se o JavaScript avalia os operadores da esquerda para a direita ou da direita para a esquerda. Por exemplo, o operador de exponenciação é associativo da direita para a esquerda:

const result = (2 + 3) * 4;

console.log(result); // 20

const result2 = 10 - 2 + 3;

console.log(result2); // 11

const result3 = 2  3  2;

console.log(result3); // 512

Operadores de incremento e decremento

Operador de incremento: Esse operador é usado para aumentar o valor em um. A notação prefixa ++num aumenta o valor da variável primeiro, depois retorna o novo valor. A notação posfixa num++ retorna o valor atual da variável primeiro, depois o aumenta.

let x = 5;

console.log(++x); // 6
console.log(x); // 6


let y = 5;

console.log(y++); // 5
console.log(y); // 6

Operador de decremento: Esse operador é usado para diminuir o valor em um. A notação prefixa e posfixa funcionam da mesma forma que no operador de incremento.

let num = 5;

console.log(--num); // 4
console.log(num--); // 4
console.log(num); // 3

Operadores de atribuição composta

Operador de atribuição de adição (+=): Esse operador realiza a adição dos valores e atribui o resultado à variável.
Operador de atribuição de subtração (-=): Esse operador realiza a subtração dos valores e atribui o resultado à variável.
Operador de atribuição de multiplicação (*=): Esse operador realiza a multiplicação dos valores e atribui o resultado à variável.
Operador de atribuição de divisão (/=): Esse operador realiza a divisão dos valores e atribui o resultado à variável.
Operador de atribuição de resto (%=): Esse operador divide uma variável pelo número especificado e atribui o resto à variável.
Operador de atribuição de exponenciação (=)**: Esse operador eleva uma variável à potência do número especificado e reatribui o resultado à variável.

Booleanos e igualdade

Definição de booleano: Um booleano é um tipo de dado que pode ter apenas dois valores: true ou false.
Operador de igualdade (==): Esse operador usa coerção de tipo antes de verificar se os valores são iguais.

console.log(5 == '5'); // true

Operador de igualdade estrita (===): Esse operador não realiza coerção de tipo e verifica se tanto os tipos quanto os valores são iguais.

console.log(5 === '5'); // false

Operador de desigualdade (!=): Esse operador usa coerção de tipo antes de verificar se os valores não são iguais.
Operador de desigualdade estrita (!==): Esse operador não realiza coerção de tipo e verifica se tanto os tipos quanto os valores não são iguais.

Operadores de comparação

Operador maior que (>): Esse operador verifica se o valor à esquerda é maior que o da direita.
Operador maior ou igual (>=): Esse operador verifica se o valor à esquerda é maior ou igual ao da direita.
Operador menor que (<): Esse operador verifica se o valor à esquerda é menor que o da direita.
Operador menor ou igual (<=): Esse operador verifica se o valor à esquerda é menor ou igual ao da direita.

Operadores unários

Operador unário de adição: Esse operador converte seu operando em um número. Se o operando já for um número, permanece inalterado.

const str = '42';
const num = +str;

console.log(num); // 42
console.log(typeof num); // number

Operador unário de negação (-): Esse operador nega o operando.

const num = 4;
console.log(-num); // -4

Operador lógico NOT (!): Esse operador inverte o valor booleano do seu operando. Então, se o operando for true, ele se torna false, e se for false, ele se torna true.

Operadores bit a bit

Operador bit a bit AND (&): Esse operador retorna 1 em cada posição de bit para a qual os bits correspondentes de ambos os operandos são 1.
Operador de atribuição bit a bit AND (&=): Esse operador realiza uma operação bitwise AND com o número especificado e reatribui o resultado à variável.
Operador bit a bit OR (|): Esse operador retorna 1 em cada posição de bit para a qual os bits correspondentes de um ou ambos os operandos são 1.
Operador de atribuição bit a bit OR (|=): Esse operador realiza uma operação bitwise OR com o número especificado e reatribui o resultado à variável.
Operador bit a bit XOR (^): Esse operador retorna 1 em cada posição de bit para a qual os bits correspondentes de um, mas não ambos, os operandos são 1.
Operador bit a bit NOT (~): Esse operador inverte a representação binária de um número.
Operador de deslocamento à esquerda (<<): Esse operador desloca todos os bits para a esquerda por um número especificado de posições.
Operador de deslocamento à direita (>>): Esse operador desloca todos os bits para a direita.

Declarações condicionais, valores truthy, valores falsy e o operador ternário

if/else if/else: Uma declaração if recebe uma condição e executa um bloco de código se essa condição for truthy. Se a condição for false, então passa para o bloco else if. Se nenhuma dessas condições for true, então executa a cláusula else. Valores Truthy são quaisquer valores que resultam em true quando avaliados em um contexto booleano como uma declaração if. Valores Falsy são valores que avaliam para false em um contexto booleano.

const score = 87;

if (score >= 90) {
 console.log('You got an A'); 
} else if (score >= 80) {
 console.log('You got a B'); // You got a B
} else if (score >= 70) {
 console.log('You got a C');
} else {
 console.log('You failed! You need to study more!');
}

Operador ternário: Esse operador é frequentemente usado como uma forma mais curta de escrever declarações if else.

const temperature = 30;
const weather = temperature > 25 ? 'sunny' : 'cool';

console.log(It's a ${weather} day!); // It's a sunny day!

Operadores lógicos binários

Operador lógico AND (&&): Esse operador verifica se ambos os operandos são truthy. Se o primeiro valor for truthy, então retorna o segundo valor. Se o primeiro valor for falsy, então retorna o primeiro valor.

const result = true && 'hello';

console.log(result); // hello

Operador lógico OR (||): Esse operador verifica se pelo menos um dos operandos é truthy. Se o primeiro valor for truthy, então ele é retornado. Se o primeiro valor for falsy, então o segundo valor é retornado.
Operador de coalescência nula (??): Esse operador retorna um valor somente se o primeiro for null ou undefined.

const userSettings = {
 theme: null,
 volume: 0,
 notifications: false,
};

let theme = userSettings.theme ?? 'light';
console.log(theme); // light

O objeto `Math`

O método Math.random(): Esse método gera um número de ponto flutuante aleatório entre 0 (inclusivo) e 1 (exclusivo). Isso significa que a saída possível pode ser 0, mas nunca chegará a 1.
O método Math.max(): Esse método recebe um conjunto de números e retorna o valor máximo.
O método Math.min(): Esse método recebe um conjunto de números e retorna o valor mínimo.
O método Math.ceil(): Esse método arredonda um valor para cima até o inteiro mais próximo.
O método Math.floor(): Esse método arredonda um valor para baixo até o inteiro mais próximo.
O método Math.round(): Esse método arredonda um valor para o inteiro mais próximo.

console.log(Math.round(2.3)); // 2
console.log(Math.round(4.5)); // 5
console.log(Math.round(4.8)); // 5

O método Math.trunc(): Esse método remove a parte decimal de um número, retornando apenas a parte inteira, sem arredondar.
O método Math.sqrt(): Esse método retorna a raiz quadrada de um número.
O método Math.cbrt(): Esse método retorna a raiz cúbica de um número.
O método Math.abs(): Esse método retorna o valor absoluto de um número.
O método Math.pow(): Esse método recebe dois números e eleva o primeiro à potência do segundo.

Métodos comuns para números

isNaN(): NaN significa "Not-a-Number". É um valor especial que representa um resultado numérico indefinido ou que não pode ser representado. A propriedade de função isNaN() é usada para determinar se um valor é NaN ou não. Number.isNaN() oferece uma forma mais confiável de verificar valores NaN, especialmente em casos onde a coerção de tipo pode levar a resultados inesperados com a função global isNaN().

console.log(isNaN(NaN));       // true
console.log(isNaN(undefined)); // true
console.log(isNaN({}));        // true

console.log(isNaN(true));      // false
console.log(isNaN(null));      // false
console.log(isNaN(37));        // false


console.log(Number.isNaN(NaN));        // true
console.log(Number.isNaN(Number.NaN)); // true
console.log(Number.isNaN(0 / 0));      // true

console.log(Number.isNaN("NaN"));      // false
console.log(Number.isNaN(undefined));  // false

O método parseFloat(): Este método analisa um argumento string e retorna um número de ponto flutuante. Ele foi projetado para extrair um número do início de uma string, mesmo que a string contenha caracteres não numéricos depois.
O método parseInt(): Este método analisa um argumento string e retorna um inteiro. parseInt() para a análise no primeiro caractere que não for dígito. Para números de ponto flutuante, ele retorna apenas a parte inteira. Se não encontrar um inteiro válido no início da string, retorna NaN.
O método toFixed(): Este método é chamado em um número e recebe um argumento opcional, que é o número de dígitos que devem aparecer após o ponto decimal. Ele retorna uma representação em string do número com o número especificado de casas decimais.

Comparações e os tipos de dados `null` e `undefined`

Comparações e undefined: Uma variável é undefined quando foi declarada mas não recebeu um valor. É o valor padrão de variáveis não inicializadas e parâmetros de função que não receberam argumento. undefined é convertido para NaN em contextos numéricos, o que faz com que todas as comparações numéricas com undefined retornem false.

console.log(undefined < 0); // false (NaN < 0 is false)
console.log(undefined >= 0); // false (NaN >= 0 is false)

Comparações e null: O tipo null representa a ausência intencional de valor. null é convertido para 0 em contextos numéricos, o que pode resultar em comportamento inesperado em comparações numéricas:

console.log(null < 0); // false (0 < 0 is false)
console.log(null >= 0); // true (0 >= 0 is true)

Ao usar o operador de igualdade (==), null e undefined são iguais apenas entre si e a si mesmos:

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

Porém, ao usar o operador de igualdade estrita (===), que verifica valor e tipo sem realizar coerção de tipo, null e undefined não são iguais:

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

Declarações `switch`

Definição: Uma declaração switch avalia uma expressão e compara seu valor com uma série de cláusulas case. Quando uma correspondência é encontrada, o bloco de código associado a esse caso é executado.

const dayOfWeek = 3; 

switch (dayOfWeek) {
  case 1:
    console.log("It's Monday! Time to start the week strong.");
    break;
  case 2:
    console.log("It's Tuesday! Keep the momentum going.");
    break;
  case 3:
    console.log("It's Wednesday! We're halfway there.");
    break;
  case 4:
    console.log("It's Thursday! Almost the weekend.");
    break;
  case 5:
    console.log("It's Friday! The weekend is near.");
    break;
  case 6:
    console.log("It's Saturday! Enjoy your weekend.");
    break;
  case 7:
    console.log("It's Sunday! Rest and recharge.");
    break;
  default:
    console.log("Invalid day! Please enter a number between 1 and 7.");
}

Funções JavaScript

Funções são blocos reutilizáveis de código que executam uma tarefa específica.
Funções podem ser definidas usando a palavra-chave function seguida de um nome, uma lista de parâmetros e um bloco de código que realiza a tarefa.
Argumentos são valores passados para uma função quando ela é chamada.
Quando uma função termina sua execução, ela sempre retorna um valor.
Por padrão, o valor de retorno de uma função é undefined.
A palavra-chave return é usada para especificar o valor a ser retornado da função e encerra a execução da função.

Arrow functions

Arrow functions são uma forma mais concisa de escrever funções em JavaScript.
Arrow functions são definidas usando a sintaxe => entre os parâmetros e o corpo da função.
Ao definir uma arrow function, você não precisa da palavra-chave function.
Se estiver usando um único parâmetro, pode omitir os parênteses ao redor da lista de parâmetros.
Se o corpo da função consistir em uma única expressão, você pode omitir as chaves e a palavra-chave return.

Escopo em programação

Escopo global: É o escopo mais externo em JavaScript. Variáveis declaradas no escopo global são acessíveis de qualquer lugar no código e são chamadas de variáveis globais.
Escopo local: Refere-se a variáveis declaradas dentro de uma função. Essas variáveis são acessíveis apenas dentro da função onde foram declaradas e são chamadas de variáveis locais.
Escopo de bloco: Um bloco é um conjunto de declarações delimitadas por chaves {}, como em declarações if ou loops.
O escopo de bloco com let e const oferece controle ainda mais preciso sobre a acessibilidade das variáveis, ajudando a evitar erros e tornando seu código mais previsível.

Noções básicas sobre arrays em JavaScript

Definição: Um array em JavaScript é uma coleção ordenada de valores, cada um identificado por um índice numérico. Os valores em um array podem ser de diferentes tipos de dados, incluindo números, strings, booleanos, objetos e até outros arrays. Arrays são contíguos na memória, o que significa que todos os elementos são armazenados em um único bloco contínuo de locais de memória, permitindo indexação eficiente e acesso rápido aos elementos pelo índice.

const developers = ["Jessica", "Naomi", "Tom"];

Acessando elementos de arrays: Para acessar elementos de um array, você precisa referenciar o array seguido do número do índice entre colchetes. Arrays em JavaScript são indexados a partir do zero, o que significa que o primeiro elemento está no índice 0, o segundo no índice 1, e assim por diante. Se você tentar acessar um índice que não existe no array, o JavaScript retornará undefined.

const developers = ["Jessica", "Naomi", "Tom"];
console.log(developers[0]) // "Jessica"
console.log(developers[1]) // "Naomi"

console.log(developers[10]) // undefined

Propriedade length: Essa propriedade é usada para retornar o número de itens em um array.

const developers = ["Jessica", "Naomi", "Tom"];
console.log(developers.length) // 3

Atualizando elementos em um array: Para atualizar um elemento em um array, você usa o operador de atribuição (=) para atribuir um novo valor ao elemento em um índice específico.

const fruits = ['apple', 'banana', 'cherry'];
fruits[1] = 'blueberry';

console.log(fruits); // ['apple', 'blueberry', 'cherry']

Arrays bidimensionais

Definição: Um array bidimensional é essencialmente um array de arrays. Ele é usado para representar dados que têm uma estrutura natural em grade, como um tabuleiro de xadrez, uma planilha ou pixels em uma imagem. Para acessar um elemento em um array bidimensional, você precisa de dois índices: um para a linha e outro para a coluna.

const chessboard = [
    ['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'],
    ['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
    [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
    [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
    [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
    [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
    ['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
    ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r']
];

console.log(chessboard[0][3]); // "Q"

Desestruturação de arrays

Definição: A desestruturação de arrays é um recurso em JavaScript que permite extrair valores de arrays e atribuí-los a variáveis de forma mais concisa e legível. Ela fornece uma sintaxe conveniente para desempacotar elementos de um array em variáveis distintas.

const fruits = ["apple", "banana", "orange"];

const [first, second, third] = fruits;

console.log(first); // "apple"
console.log(second); // "banana"
console.log(third); // "orange"

Sintaxe rest: Isso permite capturar os elementos restantes de um array que não foram desestruturados em um novo array.

const fruits = ["apple", "banana", "orange", "mango", "kiwi"];
const [first, second, ...rest] = fruits;

console.log(first); // "apple"
console.log(second); // "banana"
console.log(rest); // ["orange", "mango", "kiwi"]

Métodos comuns de arrays

Método push(): Este método é usado para adicionar elementos ao final do array e retorna o novo comprimento.

const desserts = ["cake", "cookies", "pie"];
desserts.push("ice cream");

console.log(desserts); // ["cake", "cookies", "pie", "ice cream"];

Método pop(): Este método é usado para remover o último elemento de um array e retorna esse elemento removido. Se o array estiver vazio, o valor retornado será undefined.

const desserts = ["cake", "cookies", "pie"];
desserts.pop();

console.log(desserts); // ["cake", "cookies"];

Método shift(): Este método é usado para remover o primeiro elemento de um array e retorna esse elemento removido. Se o array estiver vazio, o valor retornado será undefined.

const desserts = ["cake", "cookies", "pie"];
desserts.shift();

console.log(desserts); // ["cookies", "pie"];

Método unshift(): Este método é usado para adicionar elementos ao início do array e retorna o novo comprimento.

const desserts = ["cake", "cookies", "pie"];
desserts.unshift("ice cream");

console.log(desserts); // ["ice cream", "cake", "cookies", "pie"];

Método indexOf(): Este método é útil para encontrar o primeiro índice de um elemento específico dentro de um array. Se o elemento não for encontrado, ele retorna -1.

const fruits = ["apple", "banana", "orange", "banana"];
const index = fruits.indexOf("banana");

console.log(index); // 1
console.log(fruits.indexOf("not found")); // -1

Método splice(): Este método é usado para adicionar ou remover elementos de qualquer posição em um array. O valor retornado pelo método splice() será um array dos itens removidos do array. Se nada for removido, um array vazio será retornado. Este método modifica o array original, alterando-o no local em vez de criar um novo array. O primeiro argumento especifica o índice onde começar a modificar o array. O segundo argumento é o número de elementos que você deseja remover. Os argumentos seguintes são os elementos que você deseja adicionar.

const colors = ["red", "green", "blue"];
colors.splice(1, 0, "yellow", "purple");

console.log(colors); // ["red", "yellow", "purple", "green", "blue"]

Método includes(): Este método é usado para verificar se um array contém um valor específico. Ele retorna true se o array contiver o elemento especificado, e false caso contrário.

const programmingLanguages = ["JavaScript", "Python", "C++"];

console.log(programmingLanguages.includes("Python")); // true
console.log(programmingLanguages.includes("Perl")); // false

Método concat(): Este método cria um novo array mesclando dois ou mais arrays.

const programmingLanguages = ["JavaScript", "Python", "C++"];
const newList = programmingLanguages.concat("Perl");

console.log(newList); // ["JavaScript", "Python", "C++", "Perl"]

Método slice(): Este método retorna uma cópia superficial de uma parte do array, começando de um índice especificado ou do array inteiro. Uma cópia superficial copia a referência ao array em vez de duplicá-lo.

const programmingLanguages = ["JavaScript", "Python", "C++"];
const newList = programmingLanguages.slice(1);

console.log(newList); // ["Python", "C++"]

Sintaxe spread: A sintaxe spread é usada para criar cópias superficiais de um array.

const originalArray = [1, 2, 3];
const shallowCopiedArray = [...originalArray];

shallowCopiedArray.push(4);

console.log(originalArray); // [1, 2, 3]
console.log(shallowCopiedArray); // [1, 2, 3, 4]

Método split(): Este método divide uma string em um array de substrings e especifica onde cada divisão deve acontecer com base em um separador dado. Se nenhum separador for fornecido, o método retorna um array contendo a string original como um único elemento.

const str = "hello";
const charArray = str.split("");

console.log(charArray); // ["h", "e", "l", "l", "o"]

Método reverse(): Este método inverte um array no local.

const desserts = ["cake", "cookies", "pie"];
console.log(desserts.reverse()); // ["pie", "cookies", "cake"]

Método join(): Este método concatena todos os elementos de um array em uma única string, com cada elemento separado por um separador especificado. Se nenhum separador for fornecido, ou uma string vazia ("") for usada, os elementos serão unidos sem nenhum separador.

const reversedArray = ["o", "l", "l", "e", "h"];
const reversedString = reversedArray.join("");

console.log(reversedString); // "olleh"

Noções básicas sobre objetos

Definição: Um objeto é uma estrutura de dados composta por propriedades. Uma propriedade consiste em uma chave e um valor. Para acessar dados de um objeto, você pode usar a notação de ponto ou a notação por colchetes.

const person = {
  name: "Alice",
  age: 30,
  city: "New York"
};

console.log(person.name);  // Alice
console.log(person["name"]); // Alice

Para definir uma propriedade de um objeto existente, você pode usar a notação de ponto ou a notação por colchetes junto com o operador de atribuição.

const person = {
  name: "Alice",
  age: 30
};

person.job = "Engineer"
person["hobby"] = "Knitting"
console.log(person);  // {name: 'Alice', age: 30, job: 'Engineer', hobby: 'Knitting'}

Removendo propriedades de um objeto

Operador delete: Este operador é usado para remover uma propriedade de um objeto.

const person = {
  name: "Alice",
  age: 30,
  job: "Engineer"
};

delete person.job;

console.log(person.job); // undefined

Verificando se um objeto tem uma propriedade

Método hasOwnProperty(): Este método retorna um booleano indicando se o objeto possui a propriedade especificada como sua própria propriedade.

const person = {
  name: "Alice",
  age: 30
};

console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("job")); // false

Método Object.hasOwn(): Esta é a forma moderna e recomendada para verificar se um objeto tem uma propriedade como sua própria (não herdada). A sintaxe é Object.hasOwn(object, propertyName). Retorna true se a propriedade existir no objeto e false se não existir — independentemente do valor que a propriedade contenha. Isso o torna mais seguro do que verificar if (obj.prop) quando valores podem ser 0, false, null ou undefined.

const person = {
  name: "Alice",
  age: 30
};

console.log(Object.hasOwn(person, "name")); // true
console.log(Object.hasOwn(person, "job")); // false

Usar Object.hasOwn() dentro de uma declaração if antes de acessar um valor previne bugs:

const cart = {
  item: "Headphones",
  quantity: 1,
  discount: 0
};

// Safe: Object.hasOwn() checks existence, not value
if (Object.hasOwn(cart, "discount")) {
  console.log("Discount value:", cart.discount); // Discount value: 0
}

// Unsafe: if() misses the property because 0 is falsy
if (cart.discount) {
  console.log("This will NOT print even though discount exists");
}

Operador in: Este operador retornará true se a propriedade existir no objeto.

const person = {
  name: "Bob",
  age: 25
};

console.log("name" in person);  // true

Acessando propriedades de objetos aninhados

Acessando dados: Acessar propriedades de objetos aninhados envolve usar a notação de ponto ou a notação por colchetes, assim como acessar propriedades de objetos simples. No entanto, você precisará encadear esses acessos para aprofundar na estrutura aninhada.

const person = {
  name: "Alice",
  age: 30,
  contact: {
    email: "alice@example.com",
    phone: {
      home: "123-456-7890",
      work: "098-765-4321"
    }
  }
};

console.log(person.contact.phone.work); // "098-765-4321"

Tipos de dados primitivos e não primitivos

Tipos de dados primitivos: Esses tipos incluem números, strings, booleanos, null, undefined e símbolos. Esses tipos são chamados de "primitivos" porque representam valores únicos e não são objetos. Valores primitivos são imutáveis, o que significa que, uma vez criados, seu valor não pode ser alterado.
Tipos de dados não primitivos: Em JavaScript, esses são objetos, que incluem objetos regulares, arrays e funções. Diferente dos primitivos, tipos não primitivos podem conter múltiplos valores como propriedades ou elementos.

Métodos de objetos

Definição: Métodos de objetos são funções associadas a um objeto. Eles são definidos como propriedades de um objeto e podem acessar e manipular os dados do objeto. A palavra-chave this dentro do método se refere ao próprio objeto, permitindo acesso às suas propriedades.

const person = {
  name: "Bob",
  age: 30,
  sayHello: function() {
    return "Hello, my name is " + this.name;
  }
};

console.log(person.sayHello()); // "Hello, my name is Bob"

Construtor de objetos

Definição: Em JavaScript, um construtor é um tipo especial de função usada para criar e inicializar objetos. Ele é invocado com a palavra-chave new e pode inicializar propriedades e métodos no objeto recém-criado. O construtor Object() cria um novo objeto vazio.

new Object()

Trabalhando com o operador de encadeamento opcional (`?.`)

Definição: Este operador permite acessar propriedades de objetos ou chamar métodos com segurança, sem se preocupar se eles existem.

const user = {
  name: "John",
  profile: {
    email: "john@example.com",
    address: {
      street: "123 Main St",
      city: "Somewhere"
    }
  }
};

console.log(user.profile?.address?.street); // "123 Main St"
console.log(user.profile?.phone?.number);   // undefined

Desestruturação de objetos

Definição: A desestruturação de objetos permite extrair valores de objetos e atribuí-los a variáveis de forma mais concisa e legível.

const person = { name: "Alice", age: 30, city: "New York" };

const { name, age } = person;

console.log(name); // Alice
console.log(age);  // 30

Trabalhando com JSON

Definição: JSON significa JavaScript Object Notation. É um formato leve de dados baseado em texto, comumente usado para trocar dados entre um servidor e uma aplicação web.

{
  "name": "Alice",
  "age": 30,
  "isStudent": false,
  "list of courses": ["Mathematics", "Physics", "Computer Science"]
}

Método JSON.stringify(): Este método é usado para converter um objeto JavaScript em uma string JSON. Isso é útil quando você quer armazenar ou transmitir dados em um formato que pode ser facilmente compartilhado ou transferido entre sistemas.

const user = {
  name: "John",
  age: 30,
  isAdmin: true
};

const jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"John","age":30,"isAdmin":true}'

Método JSON.parse(): Este método converte uma string JSON de volta em um objeto JavaScript. Isso é útil quando você recupera dados JSON de um servidor web ou do localStorage e precisa manipular os dados na sua aplicação.

const jsonString = '{"name":"John","age":30,"isAdmin":true}';
const userObject = JSON.parse(jsonString);

// result: { name: 'John', age: 30, isAdmin: true }
console.log(userObject);

Trabalhando com loops

Loop for: Este tipo de loop é usado para repetir um bloco de código um certo número de vezes. Este loop é dividido em três partes: a declaração de inicialização, a condição e a declaração de incremento/decremento. A declaração de inicialização é executada antes do início do loop. Geralmente é usada para inicializar uma variável contador. A condição é avaliada antes de cada iteração do loop. Uma iteração é uma passagem única pelo loop. Se a condição for true, o bloco de código dentro do loop é executado. Se a condição for false, o loop para e você passa para o próximo bloco de código. A declaração de incremento/decremento é executada após cada iteração do loop. Geralmente é usada para incrementar ou decrementar a variável contador.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Loop for...of: Este tipo de loop é usado quando você precisa iterar sobre valores de um iterável. Exemplos de iteráveis são arrays e strings.

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}

Loop for...in: Este tipo de loop é melhor usado quando você precisa iterar sobre as propriedades de um objeto. Este loop irá iterar sobre todas as propriedades enumeráveis de um objeto, incluindo propriedades herdadas e propriedades não numéricas.

const fruit = {
  name: 'apple',
  color: 'red',
  price: 0.99
};

for (const prop in fruit) {
  console.log(fruit[prop]);
}

Loop while: Este tipo de loop executa um bloco de código enquanto a condição for true.

let i = 5;

while (i > 0) {
  console.log(i);
  i--;
}

Loop do...while: Este tipo de loop executa o bloco de código pelo menos uma vez antes de verificar a condição.

let userInput;

do {
  userInput = prompt("Please enter a number between 1 and 10");
} while (Number(userInput) < 1 || Number(userInput) > 10);

alert("You entered a valid number!");

Declarações `break` e `continue`

Definição: Uma declaração break é usada para sair de um loop antecipadamente, enquanto uma declaração continue é usada para pular a iteração atual de um loop e passar para a próxima.

// Example of break statement
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

// Output: 0, 1, 2, 3, and 4

// Example of continue statement 
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

// Output: 0, 1, 2, 3, 4, 6, 7, 8, and 9

Construtor String e método `toString()`

Definição: Um objeto string é usado para representar uma sequência de caracteres. Objetos string são criados usando a função construtora String, que envolve o valor primitivo em um objeto.

const greetingObject = new String("Hello, world!");

console.log(typeof greetingObject); // "object"

Método toString(): Este método converte um valor para sua representação em string. É um método que você pode usar para números, booleanos, arrays e objetos.

const num = 10;
console.log(num.toString()); // "10"

const arr = [1, 2, 3];
console.log(arr.toString()); // "1,2,3"

Este método aceita um radix opcional que é um número de 2 a 36. Esse radix representa a base, como base 2 para binário ou base 8 para octal. Se o radix não for especificado, o padrão é base 10, que é decimal.

const num = 10;
console.log(num.toString(2)); // "1010"(binary)

Construtor Number

Definição: O construtor Number é usado para criar um objeto número. O objeto número contém algumas propriedades e métodos úteis como o método isNaN e o método toFixed. Na maioria das vezes, você usará o construtor Number para converter outros tipos de dados para o tipo número.

const myNum = new Number("34");
console.log(typeof myNum); // "object"

const num = Number('100');
console.log(num); // 100

console.log(typeof num); // number

Melhores práticas para nomear variáveis e funções

camelCasing: Por convenção, desenvolvedores JavaScript usam camel casing para nomear variáveis e funções. Camel casing é quando a primeira palavra é toda em minúsculas e as palavras seguintes começam com letra maiúscula. Ex. isLoading.
Nomeando booleanos: Para variáveis booleanas, é prática comum usar prefixos como "is", "has" ou "can".

let isLoading = true;
let hasPermission = false;
let canEdit = true;

Nomeando funções: Para funções, o nome deve indicar claramente o que a função faz. Para funções que retornam booleano (frequentemente chamadas de predicados), você pode usar os mesmos prefixos "is", "has" ou "can". Quando você tem funções que recuperam dados, é comum começar com a palavra "get". Quando você tem funções que definem dados, é comum começar com a palavra "set". Para funções manipuladoras de eventos, você pode usar o prefixo "handle" ou o sufixo "Handler".

function getUserData() { /* ... */ }

function isValidEmail(email) { /* ... */ }

function getProductDetails(productId) { /* ... */ }

function setUserPreferences(preferences) { /* ... */ }

function handleClick() { /* ... */ }

Nomeando variáveis dentro de loops: Ao nomear variáveis iteradoras em loops, é comum usar letras únicas como i, j ou k.

for (let i = 0; i < array.length; i++) { /* ... */ }

Trabalhando com arrays esparsos

Definição: É possível ter arrays com espaços vazios. Espaços vazios são definidos como posições sem nada nelas. Isso é diferente de posições de array com o valor undefined. Esses tipos de arrays são conhecidos como arrays esparsos.

const sparseArray = [1, , , 4];
console.log(sparseArray.length); // 4

Linters e formatadores

Linters: Um linter é uma ferramenta de análise estática de código que sinaliza erros de programação, bugs, erros de estilo e construções suspeitas. Um exemplo comum de linter é o ESLint.
Formatadores: Formatadores são ferramentas que formatam automaticamente seu código para aderir a um guia de estilo específico. Um exemplo comum de formatador é o Prettier.

Gerenciamento de memória

Definição: Gerenciamento de memória é o processo de controlar a memória, alocando-a quando necessário e liberando-a quando não é mais necessária. JavaScript usa gerenciamento automático de memória. Isso significa que o JavaScript (mais especificamente, o motor JavaScript no seu navegador) cuida da alocação e desalocação de memória para você. Você não precisa liberar explicitamente a memória no seu código. Esse processo automático é frequentemente chamado de "coleta de lixo".

Closures

Definição: Um closure é uma função que tem acesso a variáveis em seu escopo léxico externo (envolvente), mesmo depois que a função externa retornou.

function outerFunction(x) {
  let y = 10;
  function innerFunction() {
    console.log(x + y);
  }
  return innerFunction;
}

let closure = outerFunction(5);
closure(); // 15

Palavra-chave `var` e hoisting

Definição: var foi a forma original de declarar variáveis antes de 2015. Mas havia alguns problemas com var em termos de escopo, redeclaração e mais. Por isso, a programação moderna em JavaScript usa let e const em vez disso.
Redeclarando variáveis com var: Se você tentar redeclarar uma variável usando let, receberá um SyntaxError. Mas com var, você pode redeclarar uma variável.

// Uncaught SyntaxError: Identifier 'num' has already been declared 
let num = 19;
let num = 18;

var myNum = 5;
var myNum = 10; // This is allowed and doesn't throw an error

console.log(myNum) // 10

var e escopo: Variáveis declaradas com var dentro de um bloco (como uma declaração if ou um loop for) ainda são acessíveis fora desse bloco.

if (true) {
  var num = 5;
}
console.log(num); // 5

Hoisting: Este é o comportamento padrão do JavaScript de mover declarações para o topo de seus respectivos escopos durante a fase de compilação, antes da execução do código. Quando você declara uma variável usando a palavra-chave var, o JavaScript eleva a declaração para o topo do seu escopo.

console.log(num); // undefined
var num = 5;
console.log(num); // 5

Quando você declara uma função usando a sintaxe de declaração de função, tanto o nome da função quanto o corpo da função são elevados. Isso significa que você pode chamar uma função antes de declará-la no seu código.

sayHello(); // "Hello, World!"

function sayHello() {
  console.log("Hello, World!");
}

Declarações de variáveis feitas com let ou const são elevadas, mas não inicializadas, e você não pode acessá-las antes da declaração real no seu código. Esse comportamento é frequentemente chamado de "zona morta temporal".

console.log(num); // Throws a ReferenceError
let num = 10;

Trabalhando com imports, exports e módulos

Módulo: É uma unidade de código autocontida que encapsula funções, classes ou variáveis relacionadas. Para criar um módulo, você escreve seu código JavaScript em um arquivo separado.
Exports: Quaisquer variáveis, funções ou classes que você queira disponibilizar para outras partes da sua aplicação precisam ser explicitamente exportadas usando a palavra-chave export. Existem dois tipos de exportação: exportação nomeada e exportação padrão.
Imports: Para usar os itens exportados em outra parte da sua aplicação, você precisa importá-los usando a palavra-chave import. Os tipos podem ser importação nomeada, importação padrão e importação de namespace.

// Within a file called math.js, we export the following functions:

// Named export
export function add(num1, num2) {
  return num1 + num2;
}

// Default export
export default function subtract(num1, num2) {
  return num1 - num2;
}

// Within another file, we can import the functions from math.js.

// Named import - This line imports the add function.
// The name of the function must exactly match the one exported from math.js.
import { add } from './math.js';

// Default import - This line imports the subtract function.
// The name of the function can be anything.
import subtractFunc from './math.js';

// Namespace import - This line imports everything from the file.
import * as Math from './math.js';

console.log(add(5, 3)); // 8
console.log(subtractFunc(5, 3)); // 2
console.log(Math.add(5, 3)); // 8
console.log(Math.subtract(5, 3)); // 2

Funções de callback e o método `forEach`

Definição: Em JavaScript, uma função de callback é uma função que é passada como argumento para outra função e é executada depois que a função principal termina sua execução.
Método forEach(): Este método é usado para iterar sobre cada elemento de um array e realizar uma operação em cada elemento. A função de callback em forEach pode receber até três argumentos: o elemento atual, o índice do elemento atual e o array no qual forEach foi chamado.

const numbers = [1, 2, 3, 4, 5];

// Result: 2 4 6 8 10
numbers.forEach((number) => {
  console.log(number * 2);
});

Funções de ordem superior

Definição: Uma função de ordem superior recebe uma ou mais funções como argumentos e retorna uma função ou valor como resultado.

function operateOnArray(arr, operation) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    result.push(operation(arr[i]));
  }
  return result;
}

function double(x) {
  return x * 2;
}

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = operateOnArray(numbers, double);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

Método map(): Este método é usado para criar um novo array aplicando uma função dada a cada elemento do array original. A função de callback pode aceitar até três argumentos: o elemento atual, o índice do elemento atual e o array no qual map foi chamado.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((num) => num * 2);

console.log(numbers); // [1, 2, 3, 4, 5]
console.log(doubled); // [2, 4, 6, 8, 10]

Método filter(): Este método é usado para criar um novo array com elementos que passam em um teste especificado, sendo útil para extrair itens seletivamente com base em critérios. Assim como o método map, a função de callback para o método filter aceita os mesmos três argumentos: o elemento atual sendo processado, o índice e o array.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

Método reduce(): Este método é usado para processar um array e condensá-lo em um único valor. Esse valor único pode ser um número, uma string, um objeto ou até mesmo outro array. O método reduce() funciona aplicando uma função a cada elemento do array, em ordem, passando o resultado de cada cálculo para o próximo. Essa função é frequentemente chamada de função redutora. A função redutora recebe dois parâmetros principais: um acumulador e o valor atual. O acumulador é onde você armazena o resultado acumulado das suas operações, e o valor atual é o elemento do array que está sendo processado.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
);

console.log(sum); // 15

Encadeamento de métodos

Definição: O encadeamento de métodos é uma técnica de programação que permite chamar múltiplos métodos no mesmo objeto em uma única linha de código. Essa técnica pode tornar seu código mais legível e conciso, especialmente ao realizar uma série de operações no mesmo objeto.

const result = "  Hello, World!  "
  .trim()
  .toLowerCase()
  .replace("world", "JavaScript");

console.log(result); // "hello, JavaScript!"

Trabalhando com o método `sort`

Definição: O método sort é usado para ordenar os elementos de um array e retornar uma referência para o array ordenado. Nenhuma cópia é feita nesse caso porque os elementos são ordenados no próprio array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

console.log(fruits); // ["Apple", "Banana", "Mango", "Orange"]

Se você precisar ordenar números, será necessário passar uma função de comparação. O método sort converte os elementos em strings e depois compara suas sequências de valores de unidades de código UTF-16. Unidades de código UTF-16 são os valores numéricos que representam os caracteres na string. Exemplos de unidades de código UTF-16 são os números 65, 66 e 67, que representam os caracteres "A", "B" e "C", respectivamente. Então, o número 200 aparece antes do número 3 em um array, porque a string "200" vem antes da string "3" ao comparar suas unidades de código UTF-16.

const numbers = [414, 200, 5, 10, 3];

numbers.sort((a, b) => a - b);

console.log(numbers); // [3, 5, 10, 200, 414]

Os parâmetros a e b são os dois elementos sendo comparados. A função de comparação deve retornar um valor negativo se a deve vir antes de b, um valor positivo se a deve vir depois de b, e zero se a e b forem iguais.

Trabalhando com os métodos `every` e `some`

Método every(): Este método testa se todos os elementos em um array passam em um teste implementado por uma função fornecida. O método every() retorna true se a função fornecida retornar true para todos os elementos do array. Se algum elemento falhar no teste, o método retorna imediatamente false e para de verificar os elementos restantes.

const numbers = [2, 4, 6, 8, 10];
const hasAllEvenNumbers = numbers.every((num) => num % 2 === 0);

console.log(hasAllEvenNumbers); // true

Método some(): Este método verifica se pelo menos um elemento passa no teste. O método some() retorna true assim que encontra um elemento que passa no teste. Se nenhum elemento passar no teste, ele retorna false.

const numbers = [1, 3, 5, 7, 8, 9];
const hasSomeEvenNumbers = numbers.some((num) => num % 2 === 0);

console.log(hasSomeEvenNumbers); // true

Trabalhando com o DOM e APIs web

API: Uma API (Interface de Programação de Aplicações) é um conjunto de regras e protocolos que permitem que aplicações de software se comuniquem entre si e troquem dados de forma eficiente.
API web: APIs web são especificamente projetadas para aplicações web. Esses tipos de APIs são frequentemente divididos em duas categorias principais: APIs do navegador e APIs de terceiros.
APIs do navegador: Essas APIs expõem dados do navegador. Como desenvolvedor web, você pode acessar e manipular esses dados usando JavaScript.
APIs de terceiros: Essas não são embutidas no navegador por padrão. Você precisa obter seu código de alguma forma. Normalmente, elas terão documentação detalhada explicando como usar seus serviços. Um exemplo é a API do Google Maps, que você pode usar para exibir mapas interativos no seu site.
DOM: O DOM significa Document Object Model. É uma interface de programação que permite interagir com documentos HTML. Com o DOM, você pode adicionar, modificar ou excluir elementos em uma página web. A raiz da árvore DOM é o elemento html. É o container de nível superior para todo o conteúdo de um documento HTML. Todos os outros nós são descendentes desse nó raiz. Abaixo do nó raiz, encontramos outros nós na hierarquia. Um nó pai é um elemento que contém outros elementos. Um nó filho é um elemento que está contido dentro de outro elemento.
Interface navigator: Fornece informações sobre o ambiente do navegador, como a string do agente do usuário, a plataforma e a versão do navegador. Uma string de agente do usuário é uma string de texto que identifica o navegador e o sistema operacional em uso.
Interface window: Representa a janela do navegador que contém o documento DOM. Ela fornece métodos e propriedades para interagir com a janela do navegador, como redimensionar a janela, abrir novas janelas e navegar para URLs diferentes.

Trabalhando com os métodos `querySelector()`, `querySelectorAll()` e `getElementById()`

Método getElementById(): Este método é usado para obter um objeto que representa o elemento HTML com o id especificado. Lembre-se que ids devem ser únicos em todo documento HTML, então este método retornará apenas um objeto Element.

<div id="container"></div>
<script src="./index.js"></script>

const container = document.getElementById("container");
console.log(container)

Método querySelector(): Este método é usado para obter o primeiro elemento no documento HTML que corresponde ao seletor CSS passado como argumento.

<section class="section"></section>
<script src="./index.js"></script>

const section = document.querySelector(".section");
console.log(section)

Método querySelectorAll(): Você pode usar este método para obter uma lista de todos os elementos DOM que correspondem a um seletor CSS específico.

<ul class="ingredients">
  <li>Sugar</li>
  <li>Milk</li>
  <li>Eggs</li>
</ul>
<script src="./index.js"></script>

const ingredients = document.querySelectorAll('ul.ingredients li');
console.log(ingredients)

Trabalhando com os métodos `innerText()`, `innerHTML()`, `createElement()` e `textContent()`

Propriedade innerHTML: Esta é uma propriedade do Element usada para definir ou atualizar partes do markup HTML.

<div id="container">
  <!-- Add new elements here -->
</div>
<script src="./index.js"></script>

const container = document.getElementById("container");
container.innerHTML = '<ul><li>Cheese</li><li>Tomato</li></ul>';

Método createElement: Este método é usado para criar um elemento HTML.

const img = document.createElement("img");

innerText: Representa o conteúdo de texto visível do elemento HTML e seus descendentes.

<div id="container">
  <p>Hello, World!</p>
  <p>I'm learning JavaScript</p>
</div>
<script src="./index.js"></script>

const container = document.getElementById("container");
console.log(container.innerText);

textContent: Retorna o conteúdo de texto simples de um elemento, incluindo todo o texto dentro de seus descendentes.

<div id="container">
  <p>Hello, World!</p>
  <p>I'm learning JavaScript</p>
</div>
<script src="./index.js"></script>

const container = document.getElementById("container");
console.log(container.textContent);

Trabalhando com os métodos `appendChild()` e `removeChild()`

Método appendChild(): Este método é usado para adicionar um nó ao final da lista de filhos de um nó pai especificado.

<ul id="desserts">
  <li>Cake</li>
  <li>Pie</li>
</ul>
<script src="./index.js"></script>

const dessertsList = document.getElementById("desserts");
const listItem = document.createElement("li");

listItem.textContent = "Cookies";
dessertsList.appendChild(listItem);

Método removeChild(): Este método é usado para remover um nó do DOM.

<section id="example-section">
  <h2>Example sub heading</h2>
  <p>first paragraph</p>
  <p>second paragraph</p>
</section>
<script src="./index.js"></script>

const sectionEl = document.getElementById("example-section");
const lastParagraph = document.querySelector("#example-section p:last-of-type");

sectionEl.removeChild(lastParagraph);

Trabalhando com o método `setAttribute()`

Definição: Este método é usado para definir o atributo de um dado elemento. Se o atributo já existir, o valor é atualizado. Caso contrário, um novo atributo é adicionado com um valor.

<p id="para">I am a paragraph</p>
<script src="./index.js"></script>

const para = document.getElementById("para");
para.setAttribute("class", "my-class");

Objeto evento

Definição: O objeto Event é um payload que é disparado quando um usuário interage com sua página web de alguma forma. Essas interações podem ser desde clicar em um botão ou focar uma entrada até sacudir o dispositivo móvel. Todos os objetos Event terão a propriedade type. Essa propriedade revela o tipo de evento que disparou o payload, como keydown ou click. Esses valores corresponderão aos mesmos valores que você pode passar para addEventListener(), onde pode capturar e utilizar o objeto Event.

Métodos `addEventListener()` e `removeEventListener()`

Método addEventListener: Este método é usado para escutar eventos. Ele recebe dois argumentos: o evento que você quer escutar e uma função que será chamada quando o evento ocorrer. Alguns exemplos comuns de eventos são eventos de clique, eventos de entrada e eventos de mudança.

<button id="btn">Click Me</button>
<script src="./index.js"></script>

const btn = document.getElementById("btn");

btn.addEventListener("click", () => alert("You clicked the button"));

Método removeEventListener(): Este método é usado para remover um listener de evento que foi previamente adicionado a um elemento usando o método addEventListener(). Isso é útil quando você quer parar de escutar um evento específico em um elemento.

<body>
  <p id="para">Hover over me to disable the button's click event</p>
  <button id="btn">Toggle Background Color</button>
</body>
<script src="./index.js"></script>

const bodyEl = document.querySelector("body");
const para = document.getElementById("para");
const btn = document.getElementById("btn");

let isBgColorGrey = true;

function toggleBgColor() {
  bodyEl.style.backgroundColor = isBgColorGrey ? "blue" : "grey";
  isBgColorGrey = !isBgColorGrey;
}

btn.addEventListener("click", toggleBgColor);

para.addEventListener("mouseover", () => {
  btn.removeEventListener("click", toggleBgColor);
});

Manipuladores de evento inline: Manipuladores de evento inline são atributos especiais em um elemento HTML usados para executar código JavaScript quando um evento ocorre. No JavaScript moderno, manipuladores de evento inline não são considerados melhor prática. É preferível usar o método addEventListener.

<button onclick="alert('Hello World!')">Show alert</button>

DOMContentLoaded

Definição: O evento DOMContentLoaded é disparado quando tudo no documento HTML foi carregado e analisado. Se você tiver folhas de estilo externas ou imagens, o evento DOMContentLoaded não esperará que elas sejam carregadas. Ele só espera o carregamento do HTML.

Trabalhando com `style` e `classList`

Propriedade Element.style: Esta propriedade é somente leitura e representa o estilo inline de um elemento. Você pode usar essa propriedade para obter ou definir o estilo de um elemento.

<p id="para">This paragraph will turn red.</p>
<script src="./index.js"></script>

const paraEl = document.getElementById("para");
paraEl.style.color = "red";

Propriedade Element.classList: Esta propriedade é somente leitura e pode ser usada para adicionar, remover ou alternar classes em um elemento.

<link rel="stylesheet" href="./styles.css"/>
<p id="para" class="blue-background">This paragraph will have classes added and removed.</p>
<div id="menu" class="menu">Menu Content</div>
<button id="toggle-btn">Toggle Menu</button>
<script src="./index.js"></script>

.highlight {
  background-color: yellow;
}

.blue-background {
  background-color: lightblue;
}

.menu {
  display: none;
  padding: 10px;
  background-color: #f0f0f0;
}

.menu.show {
  display: block;
}

// Example adding a class
const paraEl = document.getElementById("para");
paraEl.classList.add("highlight");

// Example removing a class
paraEl.classList.remove("blue-background");

// Example toggling a class
const menu = document.getElementById("menu");
const toggleBtn = document.getElementById("toggle-btn");

toggleBtn.addEventListener("click", () => menu.classList.toggle("show"));

Trabalhando com os métodos `setTimeout()` e `setInterval()`

Método setTimeout(): Este método permite atrasar uma ação por um tempo especificado.

setTimeout(() => {
 console.log('This runs after 3 seconds'); 
}, 3000);

Método setInterval(): Este método mantém a execução repetida de um trecho de código em um intervalo definido. Como setInterval() continua executando a função fornecida no intervalo especificado, você pode querer pará-lo. Para isso, deve usar o método clearInterval().

setInterval(() => {
 console.log('This runs every 2 seconds');
}, 2000);

// Example using clearInterval
const intervalID = setInterval(() => {
 console.log('This will stop after 5 seconds');
}, 1000);

setTimeout(() => {
 clearInterval(intervalID);
}, 5000);

O método `requestAnimationFrame()`

Definição: Este método permite agendar o próximo passo da sua animação antes da próxima repintura da tela, resultando em uma experiência fluida e visualmente agradável. A próxima repintura da tela refere-se ao momento em que o navegador atualiza a exibição visual da página web. Isso acontece várias vezes por segundo, tipicamente cerca de 60 vezes (ou 60 quadros por segundo) na maioria dos displays.

function animate() {
 // Update the animation...
 // for example, move an element, change a style, and more.
 update();
 // Request the next frame
 requestAnimationFrame(animate);
}

Web Animations API

Definição: A Web Animations API permite criar e controlar animações diretamente dentro do JavaScript.

<link rel="stylesheet" href="./styles.css"/>
<div id="square"></div>
<script src="./index.js"></script>

#square {
  width: 100px;
  height: 100px;
  background: red;
}

const square = document.querySelector('#square');

const animation = square.animate(
 [{ transform: 'translateX(0px)' }, { transform: 'translateX(100px)' }],
 {
   duration: 2000, // makes animation lasts 2 seconds
   iterations: Infinity, // loops indefinitely
   direction: 'alternate', // moves back and forth
   easing: 'ease-in-out', // smooth easing
 }
);

A Canvas API

Definição: A Canvas API é uma ferramenta poderosa que permite manipular gráficos diretamente dentro do seu arquivo JavaScript. Para trabalhar com a Canvas API, você primeiro precisa fornecer um elemento canvas em HTML. Esse elemento atua como uma superfície de desenho que você pode manipular com os métodos e propriedades das interfaces da Canvas API. Essa API possui interfaces como HTMLCanvasElement, CanvasRenderingContext2D, CanvasGradient, CanvasPattern e TextMetrics, que contêm métodos e propriedades que você pode usar para criar gráficos no seu arquivo JavaScript.

<canvas id="my-canvas" width="400" height="400"></canvas>
<script src="./index.js"></script>

const canvas = document.getElementById('my-canvas');

// Access the drawing context of the canvas. 
// "2d" allows you to draw in two dimensions 
const ctx = canvas.getContext('2d');

// Set the background color
ctx.fillStyle = 'crimson';

// Draw a rectangle
ctx.fillRect(1, 1, 150, 100);

Abrindo e fechando diálogos e modais com JavaScript

Definições de modal e diálogo: Diálogos permitem exibir informações importantes ou ações para os usuários. Com o elemento dialog embutido no HTML, você pode criar facilmente esses diálogos (tanto modais quanto não modais) em seus apps web. Um diálogo modal é um tipo de diálogo que obriga o usuário a interagir com ele antes de acessar o restante da aplicação ou página web. Em contraste, um diálogo não modal permite que o usuário continue interagindo com outras partes da página ou aplicação mesmo quando o diálogo está aberto. Ele não impede o acesso ao restante do conteúdo.
Método showModal(): Este método é usado para abrir um modal.

<dialog id="my-modal">
   <p>This is a modal dialog.</p>
</dialog>
<button id="open-modal">Open Modal Dialog</button>
<script src="./index.js"></script>

const dialog = document.getElementById('my-modal');
const openButton = document.getElementById('open-modal');

openButton.addEventListener('click', () => {
  dialog.showModal();
});

Método close(): Este método é usado para fechar o modal.

<dialog id="my-modal">
   <p>This is a modal dialog.</p>
   <button id="close-modal">Close Modal</button>
</dialog>
<button id="open-modal">Open Modal Dialog</button>
<script src="./index.js"></script>

const dialog = document.getElementById('my-modal');
const openButton = document.getElementById('open-modal');
const closeButton = document.getElementById('close-modal');

openButton.addEventListener('click', () => {
  dialog.show();
});

closeButton.addEventListener('click', () => {
  dialog.close();
});

O evento change

Definição: O evento change é um evento especial que é disparado quando o usuário modifica o valor de certos elementos de entrada. Exemplos incluem quando uma caixa de seleção ou um botão de rádio é marcado. Ou quando o usuário faz uma seleção em algo como um seletor de data ou menu suspenso.

<label>
  Choose a programming language:
  <select class="language" name="language">
    <option value="">---Select One---</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Python">Python</option>
    <option value="C++">C++</option>
  </select>
</label>

<p class="result"></p>
<script src="./index.js"></script>

```js const selectEl = document.querySelector(".language"); const result = document.querySelector(".result"); selectEl.addEventListener("change", (e) => { result.textContent = You enjoy programming in ${e.target.value}.; });

:::

Propagação de eventos (event bubbling)


Definição: Propagação de eventos, ou bubbling, refere-se a como um evento "borbulha" para objetos pais quando disparado.

Delegação de eventos


Definição: Delegação de eventos é o processo de escutar eventos que borbulharam até um pai, em vez de tratá-los diretamente no elemento que os disparou.

JavaScript e acessibilidade

Atributos ARIA comuns para acessibilidade


Atributo aria-expanded: Usado para transmitir o estado de um recurso de alternância (ou divulgação) para usuários de leitores de tela.
Atributo aria-haspopup: Este estado é usado para indicar que um elemento interativo acionará um elemento pop-up quando ativado. Você só pode usar o atributo aria-haspopup quando o pop-up tiver um dos seguintes papéis: menu, listbox, tree, grid ou dialog. O valor de aria-haspopup deve ser um desses papéis ou true, que é o mesmo que menu.
Atributo aria-checked: Este atributo é usado para indicar se um elemento está no estado marcado. É mais comumente usado ao criar caixas de seleção, botões de rádio, interruptores e listboxes personalizados.
Atributo aria-disabled: Este estado é usado para indicar que um elemento está desabilitado apenas para pessoas que usam tecnologias assistivas, como leitores de tela.
Atributo aria-selected: Este estado é usado para indicar que um elemento está selecionado. Você pode usar esse estado em controles personalizados como uma interface com abas, uma listbox ou uma grade.
Atributo aria-controls: Usado para associar um elemento a outro elemento que ele controla. Isso ajuda pessoas que usam tecnologias assistivas a entender a relação entre os elementos.
Atributo hidden: Oculta painéis inativos tanto para usuários visuais quanto para usuários de tecnologia assistiva.

Trabalhando com regiões dinâmicas e conteúdo dinâmico


Atributo aria-live: Torna parte de uma página web uma região dinâmica, significando que quaisquer atualizações dentro dessa área serão anunciadas por um leitor de tela para que os usuários não percam mudanças importantes.
Valor polite: A maioria das regiões dinâmicas usa esse valor. Esse valor significa que a atualização não é urgente, então o leitor de tela pode esperar até terminar qualquer anúncio atual ou o usuário completar sua ação atual antes de anunciar a atualização.

Aqui está um exemplo de uma região dinâmica que é atualizada dinamicamente por JavaScript:

:::interactive_editor

html <div aria-live="polite" id="status"></div> <button id="updateStatus">Update Status</button> <script> const statusEl = document.getElementById("status"); const btn = document.getElementById("updateStatus"); btn.addEventListener("click", () => { statusEl.textContent = "Your file has been successfully uploaded."; }); </script>

:::


Atributo contenteditable: Transforma o elemento em um editor dinâmico, permitindo que os usuários atualizem seu conteúdo como se fosse um campo de texto. Quando não há um rótulo ou título visível para uma região contenteditable, adicione um nome acessível usando o atributo aria-label para ajudar usuários de leitores de tela a entender o propósito da área editável.

:::interactive_editor

html <div contenteditable="true" aria-label="Note editor" id="editor" style="border: 1px solid #ccc; padding: 8px;" > Editable content goes here </div> <p id="status" aria-live="polite"></p> <script> const editor = document.getElementById("editor"); const status = document.getElementById("status"); editor.addEventListener("input", () => { status.textContent = "Content updated"; }); </script>

:::

Eventos focus e blur


Evento blur: Disparado quando um elemento perde o foco.

:::interactive_editor

html <input id="nameInput" type="text" placeholder="Type here and click outside" aria-label="Name input" /> <p id="status" aria-live="polite"></p> <script> const input = document.getElementById("nameInput"); const status = document.getElementById("status"); input.addEventListener("blur", () => { status.textContent = "Input lost focus"; }); </script>

:::


Evento focus: Disparado quando um elemento recebe o foco.

:::interactive_editor

html <input id="emailInput" type="email" placeholder="Click or tab into this field" aria-label="Email input" /> <p id="status" aria-live="polite"></p> <script> const input = document.getElementById("emailInput"); const status = document.getElementById("status"); input.addEventListener("focus", () => { status.textContent = "Input received focus"; }); </script>

:::

Tipos comuns de mensagens de erro


SyntaxError: Esses erros acontecem quando você escreve algo incorretamente no seu código, como esquecer um parêntese ou um colchete. Pense nisso como um erro gramatical em uma frase.

js const arr = ["Beau", "Quincy" "Tom"]

- ReferenceError: Existem vários tipos de Reference Errors, disparados de diferentes formas. O primeiro tipo de erro de referência seria variáveis não definidas. Outro exemplo de ReferenceError é tentar acessar uma variável declarada com let ou const antes de ela ter sido definida.

:::interactive_editor

js console.log(num); const num = 50;

:::


TypeError: Esses erros ocorrem quando você tenta realizar uma operação em um tipo errado.

js const developerObj = { name: "Jessica", country: "USA", isEmployed: true }; developerObj.map()

- RangeError: Esses erros acontecem quando seu código tenta usar um valor que está fora do intervalo que o JavaScript pode manipular.

js const arr = []; arr.length = -1;

## A declaração throw


Definição: A declaração throw em JavaScript é usada para lançar uma exceção definida pelo usuário. Uma exceção em programação é quando um evento inesperado acontece e interrompe o fluxo normal do programa.

:::interactive_editor

js function validateNumber(input) { if (typeof input !== "number") { throw new TypeError("Expected a number, but received " + typeof input); } return input * 2; }

:::

try...catch...finally


Definição: O bloco try é usado para envolver código que pode lançar um erro. Ele atua como um espaço seguro para tentar algo que pode falhar. O bloco catch captura e trata erros que ocorrem no bloco try. Você pode usar o objeto de erro dentro do catch para inspecionar o que deu errado. O bloco finally é executado após os blocos try e catch, independentemente de um erro ter ocorrido ou não. É comumente usado para tarefas de limpeza, como fechar arquivos ou liberar recursos.

:::interactive_editor

js function processInput(input) { if (typeof input !== "string") { throw new TypeError("Input must be a string."); } return input.toUpperCase(); } try { console.log("Starting to process input..."); const result1 = processInput("hello"); console.log("Processed result:", result1); // HELLO const result2 = processInput(9); // throws TypeError console.log("Processed result:", result2); // not executed } catch (error) { console.error("Error occurred:", error.message); }

:::

Técnicas de depuração


Declaração debugger: Essa declaração permite pausar seu código em uma linha específica para investigar o que está acontecendo no programa.

:::interactive_editor

js let firstNumber = 5; let secondNumber = 10; debugger; // Code execution pauses here let sum = firstNumber + secondNumber; console.log(sum);

:::


Breakpoints: Breakpoints permitem pausar a execução do seu código em uma linha específica de sua escolha. Após a pausa, você pode inspecionar variáveis, avaliar expressões e examinar a pilha de chamadas.
Watchers: Watch expressions permitem monitorar os valores de variáveis ou expressões enquanto o código roda, mesmo que estejam fora do escopo atual.
Profiling: Profiling ajuda a identificar gargalos de desempenho permitindo capturar screenshots e registrar uso da CPU, chamadas de função e tempo de execução.
console.dir(): Este método é usado para exibir uma lista interativa das propriedades de um objeto JavaScript especificado. Ele gera uma listagem hierárquica que pode ser expandida para ver todas as propriedades aninhadas.

js console.dir(document);

- console.table(): Este método exibe dados tabulares como uma tabela no console. Ele recebe um argumento obrigatório, que deve ser um array ou um objeto, e um argumento opcional para especificar quais propriedades (colunas) exibir.

Expressões regulares e métodos comuns


Definição: Expressões regulares, ou regex, são usadas para criar um "padrão", que você pode usar para verificar uma string, extrair texto e muito mais.

js const regex = /G.E.A.R ACADEMY/;

- Método test(): Este método aceita uma string, que é a string a ser testada para correspondências com a expressão regular. Este método retornará um booleano se a string corresponder ao regex.

:::interactive_editor

js const regex = /G.E.A.R ACADEMY/; const test = regex.test("e"); console.log(test); // false

:::


Método match(): Este método aceita uma expressão regular, embora você também possa passar uma string que será convertida em uma expressão regular. O método match retorna o array de correspondências para a string.

js const regex = /G.E.A.R ACADEMY/; const match = "G.E.A.R ACADEMY".match(regex); console.log(match); // ['G.E.A.R ACADEMY', index: 0, input: 'G.E.A.R ACADEMY', groups: undefined]

- Método replace(): Este método aceita dois argumentos: a expressão regular para corresponder (ou uma string) e a string para substituir a correspondência (ou uma função para executar em cada correspondência).

:::interactive_editor

js const regex = /Jessica/; const str = "Jessica is rly kewl"; const replaced = str.replace(regex, "G.E.A.R ACADEMY"); console.log(replaced); // "G.E.A.R ACADEMY is rly kewl"

:::


Método replaceAll: Este método é usado para substituir todas as ocorrências de um padrão especificado por uma nova string. Este método lançará um erro se você passar uma expressão regular sem o modificador global.

:::interactive_editor

js const text = "I hate JavaScript! I hate programming!"; const newText = text.replaceAll("hate", "love"); console.log(newText); // "I love JavaScript! I love programming!"

:::


Método matchAll: Este método é usado para recuperar todas as correspondências de uma dada expressão regular em uma string, incluindo grupos de captura, e as retorna como um iterador. Um iterador é um objeto que permite percorrer (ou "iterar sobre") uma coleção de itens.

:::interactive_editor

js const str = "JavaScript, Python, JavaScript, Swift, JavaScript"; const regex = /JavaScript/g; const iterator = str.matchAll(regex); for (let match of iterator) { console.log(match[0]); // "JavaScript" for each match }

:::

Modificadores de expressões regulares


Definição: Modificadores, frequentemente chamados de "flags", modificam o comportamento de uma expressão regular.
Flag i: Esta flag faz com que um regex ignore maiúsculas e minúsculas.

:::interactive_editor

js const regex = /G.E.A.R ACADEMY/i; console.log(regex.test("G.E.A.R ACADEMY")); // true console.log(regex.test("G.E.A.R ACADEMY")); // true

:::


Flag g: Esta flag, ou modificador global, permite que sua expressão regular corresponda a um padrão mais de uma vez.

:::interactive_editor

js const regex = /G.E.A.R ACADEMY/gi; console.log(regex.test("G.E.A.R ACADEMY")); // true console.log(regex.test("G.E.A.R ACADEMY is great")); // false

:::


Definição de âncora: A âncora ^, no início da expressão regular, indica "corresponder ao início da string". A âncora $, no final da expressão regular, indica "corresponder ao final da string".

:::interactive_editor

js const start = /^G.E.A.R ACADEMY/i; const end = /G.E.A.R ACADEMY$/i; console.log(start.test("G.E.A.R ACADEMY")); // true console.log(end.test("G.E.A.R ACADEMY")); // true

:::


Flag m: As âncoras procuram o início e o fim da string inteira. Mas você pode fazer um regex lidar com múltiplas linhas com a flag m, ou modificador multilinha.

:::interactive_editor

js const start = /^G.E.A.R ACADEMY/im; const end = /G.E.A.R ACADEMY$/im; const str = `I love G.E.A.R ACADEMY it's my favorite `; console.log(start.test(str)); // true console.log(end.test(str)); // true

:::


Flag d: Esta flag expande as informações que você obtém em um objeto de correspondência.

js const regex = /G.E.A.R ACADEMY/di; const string = "we love G.E.A.R ACADEMY isn't G.E.A.R ACADEMY great?"; console.log(string.match(regex));

E o resultado é:

js // [ // 'G.E.A.R ACADEMY', // index: 8, // input: "we love G.E.A.R ACADEMY isn't G.E.A.R ACADEMY great?", // groups: undefined, // indices: [ // 0: [8, 20], // groups: undefined // ] // ]

- Flag u: Isso expande a funcionalidade de uma expressão regular para permitir que ela corresponda a caracteres unicode especiais. A flag u dá acesso a classes especiais como a Extended_Pictographic para corresponder à maioria dos emojis. Também existe a flag v, que expande ainda mais a funcionalidade da correspondência unicode.

Flag y: O modificador sticky se comporta de forma muito semelhante ao modificador global, mas com algumas exceções. A maior delas é que uma expressão regular global começará a busca a partir do lastIndex e procurará em todo o restante da string por outra correspondência, mas uma expressão regular sticky retornará null e resetará o lastIndex para 0 se não houver uma correspondência imediatamente no lastIndex anterior.
Flag s: O modificador single-line permite que um caractere curinga, representado por um . em regex, corresponda a quebras de linha — tratando efetivamente a string como uma única linha de texto.

Classes de caracteres


Curinga .: Classes de caracteres são uma sintaxe especial que você pode usar para corresponder a conjuntos ou subconjuntos de caracteres. A primeira classe de caracteres que você deve aprender é a classe curinga. O curinga é representado por um ponto, ou dot, e corresponde a QUALQUER caractere único EXCETO quebras de linha. Para permitir que a classe curinga corresponda a quebras de linha, lembre-se que você precisaria usar a flag s.

js const regex = /a./;

- \d: Isso corresponderá a todos os dígitos (0-9) em uma string.

js const regex = /\d/;

- \w: Isso é usado para corresponder a qualquer caractere de palavra (a-z0-9_) em uma string. Um caractere de palavra é definido como qualquer letra, de a a z, ou um número de 0 a 9, ou o caractere underscore.

js const regex = /\w/;

- \s: A classe de espaço em branco \s, representada por uma barra invertida seguida de um s. Esta classe de caracteres corresponderá a qualquer espaço em branco, incluindo novas linhas, espaços, tabs e caracteres especiais de espaço unicode.

Negando classes de caracteres especiais: Para negar uma dessas classes de caracteres, em vez de usar uma letra minúscula após a barra invertida, você pode usar a equivalente maiúscula. O exemplo a seguir não corresponde a um caractere numérico. Em vez disso, corresponde a qualquer caractere único que NÃO seja numérico.

js const regex = /\D/;

- Classes de caracteres personalizadas: Você pode criar classes de caracteres personalizadas colocando os caracteres que deseja corresponder dentro de um conjunto de colchetes.

js const regex = /[abcdf]/;

## Assertivas lookahead e lookbehind


Definição: Assertivas lookahead e lookbehind permitem que você corresponda a padrões específicos com base na presença ou ausência de padrões ao redor.
Assertiva lookahead positiva: Esta assertiva corresponderá a um padrão quando o padrão for seguido por outro padrão. Para construir um lookahead positivo, você precisa começar com o padrão que deseja corresponder. Depois, use parênteses para envolver o padrão que deseja usar como condição. Após o parêntese de abertura, use ?= para definir esse padrão como um lookahead positivo.

js const regex = /free(?=code)/i;

- Assertiva lookahead negativa: Este é um tipo de condição usada em expressões regulares para verificar que um certo padrão não ocorre à frente na string.

js const regex = /free(?!code)/i;

- Assertiva lookbehind positiva: Esta assertiva corresponderá a um padrão somente se ele for precedido por outro padrão específico, sem incluir o padrão precedente na correspondência.

js const regex = /(?<=free)code/i;

- Assertiva lookbehind negativa: Esta assertiva garante que um padrão não seja precedido por outro padrão específico. Ela corresponde somente se o padrão especificado não for imediatamente precedido pela sequência dada, sem incluir a sequência precedente na correspondência.

js const regex = /(?<!free)code/i;

## Quantificadores em regex


Definição: Quantificadores em expressões regulares especificam quantas vezes um padrão (ou parte de um padrão) deve aparecer. Eles ajudam a controlar o número de ocorrências de caracteres ou grupos em uma correspondência. O exemplo a seguir é usado para corresponder ao caractere anterior exatamente quatro vezes.

js const regex = /^\d{4}$/;

- *: Corresponde a 0 ou mais ocorrências do elemento anterior.

+: Corresponde a 1 ou mais ocorrências do elemento anterior.
?: Corresponde a 0 ou 1 ocorrência do elemento anterior.
{n}: Corresponde exatamente a n ocorrências do elemento anterior.
{n,}: Corresponde a n ou mais ocorrências do elemento anterior.
{n,m}: Corresponde a entre n e m ocorrências do elemento anterior.

Grupos de captura e backreferences


Grupos de captura: Um grupo de captura permite que você "capture" uma parte da string correspondida para usar como precisar. Grupos de captura são definidos por parênteses contendo o padrão a capturar, sem caracteres iniciais como um lookahead.

js const regex = /free(code)camp/i;

- Backreferences: Uma backreference em expressões regulares refere-se a uma forma de reutilizar uma parte do padrão que foi correspondida anteriormente na mesma expressão. Ela permite que você se refira a um grupo capturado (uma parte do padrão entre parênteses) pelo seu número. Por exemplo, $1 refere-se ao primeiro grupo capturado.

:::interactive_editor

js const regex = /free(co+de)camp/i; console.log("freecoooooooodecamp".replace(regex, "paid$1world"));

:::

Validando formulários com JavaScript


Constraint Validation API: Certos elementos HTML, como os elementos textarea e input, expõem uma API de validação de restrições. Essa API permite que você assegure que o valor fornecido pelo usuário para aquele elemento passe por qualquer validação em nível HTML que você tenha escrito, como comprimento mínimo ou correspondência de padrão.
Método checkValidity(): Este método retorna true se o elemento corresponder a toda a validação HTML (baseada em seus atributos), e false se falhar.

:::interactive_editor

html <form> <label> Email: <input id="email" type="email" required pattern=".+\.com$" placeholder="example@site.com" /> </label> </form> <script> const input = document.getElementById("email"); input.addEventListener("input", (e) => { if (!e.target.checkValidity()) { e.target.setCustomValidity("You must use a .com email."); } else { e.target.setCustomValidity(""); } }); </script>

:::


Método reportValidity(): Este método informa ao navegador que o input é inválido.

:::interactive_editor

html <form> <label> Email: <input id="email2" type="email" required pattern=".+\.com$" placeholder="example@site.com" /> </label> </form> <script> const input = document.getElementById("email2"); input.addEventListener("input", (e) => { if (!e.target.checkValidity()) { e.target.reportValidity(); } }); </script>

:::


Propriedade validity: Esta propriedade é usada para obter ou definir o estado de validade dos controles de formulário (como <input>, <select>, etc.) e fornece informações sobre se a entrada do usuário atende às restrições definidas para aquele elemento (por exemplo, campos required, restrições de padrão, comprimento máximo, etc.).

:::interactive_editor

html <input id="age" type="number" min="18" placeholder="Enter age (18+)" /> <script> const input = document.getElementById("age"); input.addEventListener("input", (e) => { console.log(e.target.validity); }); </script>

:::


Propriedade patternMismatch: Isso será true se o valor não corresponder ao padrão de expressão regular especificado.

Método preventDefault()


Definição: Todo evento que é disparado no DOM tem algum tipo de comportamento padrão. O evento click em uma caixa de seleção alterna o estado dessa caixa, por padrão. Pressionar a barra de espaço em um botão com foco ativa o botão. O método preventDefault() nesses objetos Event impede que esse comportamento aconteça.

:::interactive_editor

html <form id="form"> <input type="text" placeholder="Try to submit" /> <button type="submit">Submit</button> </form> <p id="status"></p> <script> const form = document.getElementById("form"); const status = document.getElementById("status"); form.addEventListener("submit", (event) => { event.preventDefault(); status.textContent = "Form submission prevented."; }); </script>

:::

Enviando formulários


Definição: Existem três formas de um formulário ser enviado. A primeira é quando o usuário clica em um botão no formulário que tem o atributo type definido como submit. A segunda é quando o usuário pressiona a tecla Enter em qualquer campo input editável no formulário. A terceira é por meio de uma chamada JavaScript aos métodos requestSubmit() ou submit() do elemento form.
Atributo action: O atributo action deve conter uma URL ou um caminho relativo para o domínio atual. Esse valor determina para onde o formulário tenta enviar os dados — se você não definir um atributo action, o formulário enviará os dados para a URL da página atual.

html <form action="https://G.E.A.R ACADEMY.org"> <input type="number" id="input" placeholder="Enter a number" name="number" /> <button type="submit">Submit</button> </form>

- Atributo method: Este atributo aceita um método HTTP padrão, como GET ou POST, e usa esse método ao fazer a requisição para a URL de ação. Quando um método não é definido, o formulário usará por padrão uma requisição GET. Os dados do formulário serão codificados em URL como pares name=value e anexados à URL de ação como parâmetros de consulta.

html <form action="/data" method="POST"> <input type="number" id="input" placeholder="Enter a number" name="number" /> <button type="submit">Submit</button> </form>

- Atributo enctype: O elemento form aceita um atributo enctype, que representa o tipo de codificação a ser usado para os dados. Este atributo aceita apenas três valores: application/x-www-form-urlencoded (que é o padrão, enviando os dados como corpo de formulário codificado em URL), text/plain (que envia os dados em texto simples, em pares name=value separados por novas linhas), ou multipart/form-data, que é especificamente para lidar com formulários com upload de arquivo.

O objeto Date() e métodos comuns


Definição: O objeto Date() é usado para criar, manipular e formatar datas e horas em JavaScript. No exemplo a seguir, a palavra-chave new é usada para criar uma nova instância do objeto Date, e o objeto Date é então atribuído à variável now. Se você registrasse o valor de now no console, veria a data e hora atuais baseadas no relógio do sistema do computador que executa o código.

:::interactive_editor

js const now = new Date(); console.log(now); // prints the current date and time

:::


Método Date.now(): Este método é usado para obter a data e hora atuais. Date.now() retorna o número de milissegundos desde 1º de janeiro de 1970, 00:00:00 UTC. Isso é conhecido como tempo epoch Unix. O tempo epoch Unix é uma forma comum de representar datas e horas em sistemas computacionais porque é um inteiro que pode ser facilmente armazenado e manipulado. UTC significa Tempo Universal Coordenado, que é o padrão de tempo principal pelo qual o mundo regula relógios e tempo.
Método getDate(): Este método é usado para obter o dia do mês baseado na data atual. getDate() retornará um valor inteiro entre 1 e 31, dependendo do dia do mês. Se a data for inválida, retornará NaN (Not a Number).

:::interactive_editor

js const now = new Date("2014-10-15"); const date = now.getDate(); console.log(date); // 15

:::


Método getMonth(): Este método é usado para obter o mês. O mês é de base zero, então janeiro é 0, fevereiro é 1, e assim por diante. Neste exemplo, a saída é 2, que corresponde a março. Se o mês for inválido, retornará NaN.

:::interactive_editor

js const now = new Date("2014-03-15"); const month = now.getMonth(); console.log(month); // 2

:::


Método getFullYear(): Este método é usado para obter o ano completo. Se o ano for inválido, retornará NaN.

:::interactive_editor

js const now = new Date("2014-10-15"); const year = now.getFullYear(); console.log(year); // 2014

:::

Diferentes formas de formatar datas


Método toISOString(): Este método é usado para formatar a data em um formato ISO estendido (ISO 8601). ISO 8601 é um padrão internacional para representar datas e horas. O formato é YYYY-MM-DDTHH:mm:ss.sssZ.

:::interactive_editor

js const date = new Date("2014-10-15"); console.log(date.toISOString()); // "2014-10-15T00:00:00.000Z"

:::


Método toLocaleDateString(): Este método é usado para formatar a data com base na localidade do usuário.

:::interactive_editor

js const date = new Date("2014-10-15"); console.log(date.toLocaleDateString("en-US")); // "10/15/2014"

:::

O método toLocaleDateString() aceita dois parâmetros opcionais: locales e options.

O parâmetro locales é uma string que representa a localidade a ser usada. Por exemplo, você pode passar "en-US" para inglês (Estados Unidos) ou "fr-FR" para francês (França). Se você não passar o parâmetro locales, a localidade padrão será usada. O segundo parâmetro opcional é o parâmetro options. Este parâmetro é um objeto que permite especificar o formato da string de data.

:::interactive_editor

js const date = new Date("2014-10-15"); const options = { weekday: "long", year: "numeric", month: "long", day: "numeric", }; console.log(date.toLocaleDateString("en-GB", options)); // "Wednesday, 15 October 2014"

:::

Construtor Audio e métodos comuns


Definição: O construtor Audio, como outros construtores, é uma função especial chamada com a palavra-chave new. Ele retorna um HTMLAudioElement, que você pode usar para reproduzir áudio para o usuário, ou anexar ao DOM para que o usuário controle por conta própria. Quando você chama o construtor, pode opcionalmente passar uma URL como o único argumento. Essa URL deve apontar para a fonte do arquivo de áudio que você deseja reproduzir. Ou, se precisar alterar a fonte dinamicamente, pode atribuir a URL à propriedade src do elemento de áudio retornado.
Método play(): Este método é usado com os elementos audio ou video para iniciar a reprodução da mídia.

:::interactive_editor

html <audio id="audio" controls> <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> </audio> <button id="playBtn">Play Audio</button> <script> const audio = document.getElementById("audio"); const playBtn = document.getElementById("playBtn"); playBtn.addEventListener("click", () => { audio.play(); }); </script>

:::


Método pause(): Este método é usado com os elementos audio ou video para pausar a reprodução da mídia.

:::interactive_editor

html <audio id="myAudio" controls> <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> </audio> <br> <button id="pauseBtn">Pause Audio</button> <script> document.addEventListener("DOMContentLoaded", () => { const audio = document.getElementById("myAudio"); const pauseBtn = document.getElementById("pauseBtn"); pauseBtn.addEventListener("click", () => { audio.pause(); }); }); </script>

:::


Método addTextTrack(): Este método permite especificar uma faixa de texto para associar ao elemento de mídia — o que é especialmente útil para adicionar legendas a um vídeo.
Método fastSeek(): Este método permite mover a posição da reprodução para um tempo específico dentro da mídia.

Diferentes formatos de áudio e vídeo


Tipo MIME: Um tipo MIME, que significa Multipurpose Internet Mail Extensions, é uma forma padronizada de indicar programaticamente um tipo de arquivo. O tipo MIME pode informar a uma aplicação, como seu navegador, como lidar com um arquivo específico. No caso de áudio e vídeo, o tipo MIME indica que é um formato multimídia que pode ser incorporado na página web.
Elemento source: Este é usado para especificar um tipo de arquivo e fonte — e pode incluir múltiplos tipos diferentes usando múltiplos elementos source. Quando você faz isso, o navegador determinará o melhor formato para usar no ambiente atual do usuário.
MP3: Este é um tipo de formato de arquivo digital usado para armazenar música, áudio ou som. É uma versão comprimida de uma gravação sonora que torna o tamanho do arquivo menor, facilitando o armazenamento e compartilhamento. Um arquivo MP3 tem o tipo MIME audio/mpeg.
MP4: Um MP4 é um tipo de formato de arquivo digital usado para armazenar vídeo e áudio. Ele serve como um container que contém tanto o vídeo (imagens) quanto o som (música ou fala) em um único arquivo. Um MP4 pode ter o tipo MIME audio/mp4 OU video/mp4, dependendo se é um arquivo de vídeo ou apenas áudio.

codecs


Definição: Um codec, abreviação de "encoder/decoder", é um algoritmo ou software que pode converter áudio e vídeo entre formatos analógicos e digitais. Codecs podem ser especificados como parte do tipo MIME. A sintaxe básica para definir um codec é adicionar um ponto e vírgula após o tipo de mídia, depois codecs= e o codec.

API HTMLMediaElement


Definição: A API HTMLMediaElement é usada para controlar o comportamento dos elementos de áudio e vídeo na sua página. Ela estende a interface base HTMLElement, então você tem acesso às propriedades básicas assim como a esses métodos úteis. Exemplos desses métodos incluem play(), fastSeek() e pause().

API Media Capture and Streams


Definição: A API Media Capture and Streams, ou API MediaStream, é usada para capturar áudio e vídeo do seu dispositivo. Para usar a API, você precisa criar o objeto MediaStream. Você poderia fazer isso com o construtor, mas ele não estaria ligado ao hardware do usuário. Em vez disso, a propriedade mediaDevices do objeto global navigator tem um método getUserMedia() para você usar.

js window.navigator.mediaDevices.getUserMedia({ audio: true, video: { width: { min: 1280, ideal: 1920, max: 3840 }, height: { min: 720, ideal: 1080, max: 2160 } } });

## API Screen Capture


Definição: A API Screen Capture é usada para gravar a tela do usuário. Essa API é exposta ao chamar o método getDisplayMedia() do objeto mediaDevices e consumir o stream de mídia retornado.

API MediaStream Recording


Definição: A API MediaStream Recording funciona em conjunto com as APIs MediaStreams, permitindo que você grave um MediaStream (ou até mesmo um HTMLMediaElement diretamente).

API Media Source Extensions


Tópico: A API Media Source Extensions é o que permite que você passe diretamente o feed da webcam do usuário para um elemento de vídeo com a propriedade srcObject.

API Web Audio


Definição: A API Web Audio que alimenta tudo que é audível na web. Essa API inclui objetos importantes como um AudioBuffer (representando um Buffer especificamente contendo dados de áudio) ou o AudioContext.

Sets em JavaScript


Um Set é uma opção embutida para gerenciar coleções de dados.
Sets garantem que cada valor nele apareça apenas uma vez, tornando-o útil para eliminar duplicatas de um array ou lidar com coleções de valores distintos.
Você pode criar um Set usando o construtor Set():

:::interactive_editor

js const set = new Set([1, 2, 3, 4, 5]); console.log(set); // Set { 1, 2, 3, 4, 5 }

:::


Sets podem ser manipulados usando estes métodos:
add(): Adiciona um novo elemento ao Set.
delete(): Remove um elemento do Set.
has(): Verifica se um elemento existe no Set.
clear(): Remove todos os elementos do Set.

Weaksets em JavaScript


WeakSet é uma coleção de objetos que permite armazenar objetos com referência fraca.

Sets vs WeakSets


Diferente dos Sets, um WeakSet não suporta tipos primitivos como números ou strings.
Um WeakSet armazena apenas objetos, e as referências a esses objetos são "fracas", o que significa que se o objeto não estiver sendo usado em nenhum outro lugar do seu código, ele é removido automaticamente para liberar memória.

Maps em JavaScript


Um Map é um objeto embutido que mantém pares chave-valor assim como um objeto.
Maps diferem dos objetos JavaScript padrão por permitirem chaves de qualquer tipo, incluindo objetos e funções.
Um Map oferece melhor desempenho que o objeto padrão quando se trata de adições e remoções frequentes de pares chave-valor.
Você pode criar um Map usando o construtor Map():

:::interactive_editor

js const map = new Map([ ['flower', 'rose'], ['fruit', 'apple'], ['vegetable', 'carrot'] ]); console.log(map); // Map(3) { 'flower' => 'rose', 'fruit' => 'apple', 'vegetable' => 'carrot' }

:::


Maps podem ser manipulados usando estes métodos:
set(): Adiciona um novo par chave-valor ao Map.
get(): Recupera o valor de uma chave no Map.
delete(): Remove um par chave-valor do Map.
has(): Verifica se uma chave existe no Map.
clear(): Remove todos os pares chave-valor do Map.

WeakMaps em JavaScript


Um WeakMap é uma coleção de pares chave-valor assim como Map, mas com referências fracas para as chaves. As chaves devem ser objetos e os valores podem ser qualquer coisa que você quiser.

Maps vs WeakMaps


WeakMaps são semelhantes aos WeakSets no sentido de que armazenam apenas objetos e as referências a esses objetos são "fracas".

Armazenamento persistente


Definição: Armazenamento persistente refere-se a uma forma de salvar dados de modo que eles permaneçam disponíveis mesmo após a energia ser desligada ou o dispositivo ser reiniciado.

Criar, ler, atualizar, excluir (CRUD)


Criar: Refere-se ao processo de criar novos dados. Por exemplo, em um app web, isso pode ser quando um usuário adiciona uma nova postagem em um blog.
Ler: É a operação onde os dados são recuperados de um banco de dados. Por exemplo, quando você visita uma postagem de blog ou visualiza seu perfil em um site, você está realizando uma operação de leitura para buscar e exibir dados armazenados no banco de dados.
Atualizar: Envolve modificar dados existentes no banco de dados. Um exemplo seria editar uma postagem de blog ou atualizar as informações do seu perfil.
Excluir: É a operação que remove dados de um banco de dados. Por exemplo, quando você exclui uma postagem de blog ou uma conta, está realizando uma operação de exclusão.

Métodos HTTP


Definição: HTTP significa Hypertext Transfer Protocol e é a base para a comunicação de dados na web. Existem métodos HTTP que definem as ações que podem ser realizadas sobre recursos na web. Os métodos comuns são GET, POST, PUT, PATCH, DELETE.
Método GET: Usado para buscar dados de um servidor.
Método POST: Usado para enviar dados a um servidor que cria um novo recurso.
Método PUT: Usado para atualizar um recurso substituindo-o completamente.
Método PATCH: Usado para atualizar parcialmente um recurso.
Método DELETE: Usado para remover registros de um banco de dados.

Propriedades localStorage e sessionStorage


Web Storage API: Essa API fornece um mecanismo para navegadores armazenarem pares chave-valor diretamente no navegador, permitindo que desenvolvedores guardem informações que podem ser usadas em diferentes recarregamentos de página e sessões. Os dois principais componentes da Web Storage API são as propriedades localStorage e sessionStorage.
Propriedade localStorage: localStorage é a parte da Web Storage API que permite que os dados persistam mesmo após a janela do navegador ser fechada ou a página ser atualizada. Esses dados permanecem disponíveis até serem explicitamente removidos pela aplicação ou pelo usuário.
Método localStorage.setItem(): Esse método é usado para armazenar um par chave-valor em localStorage.

js localStorage.setItem('username', 'Jessica');

- Método localStorage.getItem(): Esse método é usado para recuperar o valor de uma chave específica em localStorage.

js localStorage.setItem('username', 'codingRules'); let username = localStorage.getItem('username'); console.log(username); // codingRules

- Método localStorage.removeItem(): Esse método é usado para remover um item específico de localStorage usando sua chave.

js localStorage.removeItem('username');

- Método localStorage.clear(): Esse método é usado para limpar todos os dados armazenados em localStorage.

js localStorage.clear();

- Propriedade sessionStorage: Armazena dados que duram apenas para a sessão atual e são apagados quando a aba ou janela do navegador é fechada.

Método sessionStorage.setItem(): Esse método é usado para armazenar um par chave-valor em sessionStorage.

js sessionStorage.setItem('cart', '3 items');

- Método sessionStorage.getItem(): Esse método é usado para recuperar o valor de uma chave específica em sessionStorage.

js sessionStorage.setItem('cart', '3 items'); let cart = sessionStorage.getItem('cart'); console.log(cart); // '3 items'

- Método sessionStorage.removeItem(): Esse método é usado para remover um item específico de sessionStorage usando sua chave.

js sessionStorage.removeItem('cart');

- Método sessionStorage.clear(): Esse método é usado para limpar todos os dados armazenados em sessionStorage.

js sessionStorage.clear();

## Trabalhando com cookies


Definição: Cookies, também conhecidos como web cookies ou cookies de navegador, são pequenos pedaços de dados que um servidor envia para o navegador web do usuário. Esses cookies são armazenados no dispositivo do usuário e enviados de volta ao servidor em requisições subsequentes. Cookies são essenciais para ajudar aplicações web a manter estado e lembrar informações do usuário, o que é especialmente importante já que HTTP é um protocolo sem estado.
Cookies de sessão: Esses cookies duram apenas durante a sessão do usuário no site. Quando o usuário fecha o navegador ou a aba, o cookie de sessão é excluído. Eles são usados tipicamente para tarefas como manter o usuário logado durante a visita.
Cookies seguros: Esses cookies são enviados apenas via HTTPS, garantindo que não possam ser interceptados por um atacante durante o trânsito.
Cookies HttpOnly: Esses cookies não podem ser acessados ou modificados por JavaScript rodando no navegador, tornando-os mais seguros contra ataques de cross-site scripting (XSS).
Cabeçalho Set-Cookie: Quando você visita um site, o servidor pode enviar um cabeçalho Set-Cookie na resposta HTTP. Esse cabeçalho instrui seu navegador a salvar um cookie com informações específicas. Por exemplo, pode armazenar um ID único que ajuda o site a reconhecê-lo na próxima visita.

Você pode definir manualmente um cookie em JavaScript usando document.cookie:

js document.cookie = "organization=G.E.A.R ACADEMY; expires=Fri, 31 Dec 2021 23:59:59 GMT; path=/";

Para excluir um cookie, você pode definir sua data de expiração para um momento no passado.

js document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

## Cache API


Definição: Cachear é o processo de armazenar cópias de arquivos em um local de armazenamento temporário para que possam ser acessados mais rapidamente. A Cache API é usada para armazenar requisições e respostas de rede, tornando as aplicações web mais eficientes e até funcionando offline. Ela faz parte da API mais ampla de Service Worker e é crucial para criar Progressive Web Apps (PWAs) que funcionam em condições de rede lentas ou instáveis.

A Cache API é um mecanismo de armazenamento que guarda objetos Request e Response. Quando uma requisição é feita a um servidor, a aplicação pode armazenar a resposta e recuperá-la depois do cache em vez de fazer uma nova requisição de rede. Isso reduz o tempo de carregamento, economiza banda e melhora a experiência do usuário.

Armazenamento de cache: Usado para armazenar pares chave-valor de requisições HTTP e suas respostas correspondentes. Isso permite a recuperação eficiente de recursos previamente solicitados, reduzindo a necessidade de buscá-los na rede em visitas subsequentes e melhorando o desempenho.
Cache-Control: Desenvolvedores podem definir por quanto tempo um recurso em cache deve ser mantido e se deve ser revalidado ou servido diretamente do cache.
Suporte offline: Usando a Cache API, você pode criar aplicações web com foco offline. Por exemplo, uma PWA pode servir assets em cache quando o usuário estiver desconectado da rede.

Padrões negativos e armazenamento no lado do cliente


Rastreamento excessivo: Refere-se à prática de coletar e armazenar uma quantidade excessiva de dados do usuário no armazenamento do lado do cliente (como cookies, local storage ou session storage) sem consentimento claro, informado ou necessidade legítima. Isso geralmente envolve rastrear o comportamento, preferências e interações do usuário em múltiplos sites ou sessões, o que pode infringir a privacidade do usuário.
Fingerprinting do navegador: Técnica usada para rastrear e identificar usuários individuais com base em características únicas do dispositivo e navegador, em vez de depender de cookies ou outros métodos tradicionais de rastreamento. Diferente dos cookies, que são armazenados localmente no dispositivo do usuário, o fingerprinting coleta uma variedade de informações que podem ser usadas para criar uma "impressão digital" distinta da sessão do navegador do usuário.
Armazenar senhas no LocalStorage: Pode parecer um padrão negativo óbvio, mas armazenar qualquer dado sensível como senhas no local storage representa um risco de segurança. O Local Storage não é criptografado e pode ser acessado facilmente. Portanto, nunca armazene dados sensíveis nele.

IndexedDB


Definição: IndexedDB é usado para armazenar dados estruturados no navegador. Está embutido nos navegadores modernos, permitindo que apps web armazenem e busquem objetos JavaScript de forma eficiente.

Cache/Service Workers


Definição: Um Service Worker é um script que roda em segundo plano, separado da sua página web. Ele pode interceptar requisições de rede, acessar o cache e fazer o app web funcionar offline. É um componente chave das Progressive Web Apps.

Noções básicas de trabalhar com classes


Definição: Classes em JavaScript são usadas para definir modelos para criar objetos e encapsular dados. Classes incluem um construtor, que é um método especial chamado automaticamente quando um novo objeto é criado a partir da classe. Ele é usado para inicializar as propriedades do objeto. A palavra-chave this é usada aqui para se referir à instância atual da classe. Abaixo do construtor, você pode ter o que chamamos de métodos. Métodos são funções definidas dentro de uma classe que realizam ações ou operações nos dados ou estado da classe. Eles definem comportamentos que as instâncias da classe podem executar.

:::interactive_editor

js class Dog { constructor(name) { this.name = name; } bark() { console.log(${this.name} says woof!); } } const dog = new Dog("Gino"); console.log(dog.name); // Gino

:::

Para criar uma nova instância da classe, você usará a palavra-chave new seguida do nome da classe:

js const dog = new Dog("Gino");

Você também pode criar classes como expressões de classe. Isso é quando a classe é anônima e atribuída a uma variável.

:::interactive_editor

js const Dog = class { constructor(name) { this.name = name; } bark() { console.log(${this.name} says woof!); } }; const dog = new Dog("Gino"); console.log(dog.name); // Gino dog.bark(); // Gino says woof!

:::

Herança de classes


Definição: Em programação, herança permite definir classes que herdam propriedades e métodos de classes pai. Isso promove reutilização de código e estabelece uma relação hierárquica entre classes. Uma classe pai é uma classe que atua como modelo para outras classes. Ela define propriedades e métodos que são herdados por outras classes. Uma classe filho é uma classe que herda as propriedades e métodos de outra classe. Classes filho também podem estender a funcionalidade das classes pai adicionando novas propriedades e métodos. Em JavaScript, usamos a palavra-chave extends para implementar herança. Essa palavra-chave indica que uma classe é filha de outra classe.

:::interactive_editor

js class Vehicle { constructor(brand, year) { this.brand = brand; this.year = year; } } class Car extends Vehicle { honk() { console.log("Honk! Honk!"); } } const myCar = new Car("G.E.A.R ACADEMY Motors", 2019); console.log(myCar.brand); // G.E.A.R ACADEMY Motors console.log(myCar.year); // 2019 myCar.honk(); // Honk! Honk!

:::

A palavra-chave super é usada para acessar os métodos, construtores e campos da classe pai.

:::interactive_editor

js class Vehicle { constructor(brand, year) { this.brand = brand; this.year = year; } } class Car extends Vehicle { constructor(brand, year, numDoors) { super(brand, year); this.numDoors = numDoors; } } const myCar = new Car("G.E.A.R ACADEMY Motors", 2019, 4); console.log(myCar.brand); // G.E.A.R ACADEMY Motors console.log(myCar.year); // 2019 console.log(myCar.numDoors); // 4

:::

Trabalhando com métodos e propriedades estáticas


Métodos estáticos: Esses métodos são frequentemente usados para funções utilitárias que não precisam acessar o estado específico de um objeto. Eles são definidos dentro das classes para encapsular funcionalidades relacionadas.

:::interactive_editor

js class Movie { constructor(title, rating) { this.title = title; this.rating = rating; } static compareMovies(movieA, movieB) { if (movieA.rating > movieB.rating) { console.log(${movieA.title} has a higher rating.); } else if (movieA.rating < movieB.rating) { console.log(${movieB.title} has a higher rating.); } else { console.log("These movies have the same rating."); } } } let movieA = new Movie("Movie A", 80); let movieB = new Movie("Movie B", 45); Movie.compareMovies(movieA, movieB); // Movie A has a higher rating.

:::

Métodos estáticos também são úteis para implementar métodos "factory". Um método factory é um método que você define além do construtor para criar objetos baseados em critérios específicos.

js class Pizza { constructor(type, price) { this.type = type; this.price = price; } static createMargherita() { return new this("Margherita", 6.99); } } let myPizza = Pizza.createMargherita(); console.log(myPizza); // Pizza { type: "Margherita", price: 6.99 } console.log(myPizza.type); // Margherita

- Propriedades estáticas: Essas propriedades são usadas para definir valores ou atributos associados à própria classe, e não às instâncias da classe. Propriedades estáticas são compartilhadas entre todas as instâncias da classe e podem ser acessadas sem criar uma instância da classe.

:::interactive_editor

ts class Car { // Static property static numberOfWheels = 4; constructor(make, model) { this.make = make; this.model = model; } // Instance method getCarInfo() { return ${this.make} ${this.model}; } // Static method static getNumberOfWheels() { return Car.numberOfWheels; } } // Accessing static property directly from the class console.log(Car.numberOfWheels); // 4

:::

Recursão


Recursão é um conceito de programação que permite chamar uma função repetidamente até que um caso base seja alcançado.

Aqui está um exemplo de uma função recursiva que calcula o fatorial de um número:

js function findFactorial(n) { if (n === 0) { return 1; } return n * findFactorial(n - 1); }

No exemplo acima, a função findFactorial é chamada recursivamente até que n alcance 0. Quando n é 0, o caso base é alcançado e a função retorna 1. A função então retorna o produto de n e o resultado da chamada recursiva para findFactorial(n - 1).


Recursão permite lidar com algo de profundidade desconhecida, como objetos/arrays profundamente aninhados ou uma árvore de arquivos.
Uma pilha de chamadas é usada para acompanhar as chamadas de função em uma função recursiva. Cada vez que uma função é chamada, ela é adicionada à pilha de chamadas. Quando o caso base é alcançado, as chamadas de função são removidas da pilha.
Você deve definir cuidadosamente o caso base, pois chamá-lo indefinidamente pode fazer seu código travar. Isso acontece porque a recursão acumula cada vez mais chamadas de função até o sistema ficar sem memória.
Recursões são usadas para resolver problemas matemáticos como fatorial e Fibonacci, percorrer árvores e grafos, gerar permutações e combinações, entre outros.

Funções puras vs impuras


Uma função pura é aquela que sempre produz a mesma saída para a mesma entrada e não tem efeitos colaterais. Sua saída depende apenas da entrada e ela não modifica nenhum estado externo.
Funções impuras têm efeitos colaterais, que são mudanças no estado do programa observáveis fora da função.

Programação funcional


Programação funcional é uma abordagem ao desenvolvimento de software que enfatiza o uso de funções para resolver problemas, focando no que precisa ser feito em vez de como fazer.
Programação funcional incentiva o uso de técnicas que ajudam a evitar efeitos colaterais, como usar estruturas de dados imutáveis e funções de mais alta ordem.
Quando usada corretamente, a programação funcional leva a um código mais limpo e fácil de manter.

Currying


Currying é uma técnica de programação funcional que transforma uma função com múltiplos argumentos em uma sequência de funções, cada uma recebendo um único argumento.

Aqui está um exemplo de uma função normal vs uma função curried:

:::interactive_editor

js // Regular function function average(a, b, c) { return (a + b + c) / 3; } console.log(average(2, 3, 4)); // 3 // Curried function function curriedAverage(a) { return function(b) { return function(c) { return (a + b + c) / 3; }; }; } console.log(curriedAverage(2)(3)(4)); // 3

:::


Currying pode ser especialmente poderoso ao trabalhar com funções que recebem muitos argumentos.
Currying torna seu código mais flexível e fácil de reutilizar.
Você pode usar arrow functions para criar funções curried de forma mais concisa:

js const curriedAverage = a => b => c => (a + b + c) / 3;

- Embora currying possa levar a um código mais flexível e reutilizável, também pode tornar o código mais difícil de ler se usado em excesso.

JavaScript assíncrono


JavaScript síncrono é executado sequencialmente e espera a operação anterior terminar antes de passar para a próxima.
JavaScript assíncrono permite que múltiplas operações sejam executadas em segundo plano sem bloquear a thread principal.
Thread é uma sequência de instruções que pode ser executada independentemente do fluxo principal do programa.
Funções de callback são funções passadas como argumentos para outras funções e executadas após a conclusão da operação ou como resultado de um evento.

O motor JavaScript e o runtime JavaScript


O motor JavaScript é um programa que executa código JavaScript em um navegador web. Ele funciona como um conversor que pega seu código, transforma em instruções que o computador pode entender e age de acordo.
V8 é um exemplo de motor JavaScript desenvolvido pelo Google.
O runtime JavaScript é o ambiente onde o código JavaScript é executado. Inclui o motor JavaScript que processa e executa o código, além de recursos adicionais como um navegador web ou Node.js.

A Fetch API


A Fetch API permite que apps web façam requisições de rede, tipicamente para recuperar ou enviar dados ao servidor. Ela fornece um método fetch() que você pode usar para fazer essas requisições.
Você pode recuperar texto, imagens, áudio, JSON e outros tipos de dados usando a Fetch API.

Métodos HTTP para a Fetch API

A Fetch API suporta vários métodos HTTP para interagir com o servidor. Os métodos mais comuns são:


GET: Usado para recuperar dados do servidor. Por padrão, a Fetch API usa o método GET para buscar dados.

js fetch('https://api.example.com/data')

Para usar os dados buscados, eles devem ser convertidos para o formato JSON usando o método .json():

js fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data))

Neste código, a resposta vinda da Fetch API é uma promise e o manipulador .then está convertendo a resposta para o formato JSON.


POST: Usado para enviar dados ao servidor. O método POST é usado para criar novos recursos no servidor.

js fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'John Doe', email: 'john@example.com' }) })

Neste exemplo, estamos enviando uma requisição POST para criar um novo usuário. Especificamos o método como POST, definimos os cabeçalhos apropriados e incluímos um corpo com os dados que queremos enviar. O corpo precisa ser uma string, então usamos JSON.stringify() para converter nosso objeto em uma string JSON.


PUT: Usado para atualizar dados no servidor. O método PUT é usado para atualizar recursos existentes no servidor.

js fetch('https://api.example.com/users/45', { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'John Smith', email: 'john@example.com' }) })

Neste exemplo, estamos atualizando o ID 45 que é especificado no final da URL. Usamos o método PUT no código e também especificamos os dados no corpo que serão usados para atualizar os dados identificados.


DELETE: Usado para excluir dados no servidor. O método DELETE é usado para excluir recursos no servidor.

js fetch('https://api.example.com/users/45', { method: 'DELETE' })

Neste exemplo, estamos enviando uma requisição DELETE para remover um usuário com o ID 45.

Promise e encadeamento de promises


Promises são objetos que representam a eventual conclusão ou falha de uma operação assíncrona e seu valor resultante. O valor da promise é conhecido somente quando a operação async é concluída.
Aqui está um exemplo para criar uma promise simples:

js const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('Data received successfully'); }, 2000); });

- O método .then() é usado em uma Promise para especificar o que deve acontecer quando a Promise é cumprida, enquanto .catch() é usado para tratar quaisquer erros que ocorram.

Aqui está um exemplo de uso de .then() e .catch() com uma Promise:

js promise .then(data => { console.log(data); }) .catch(error => { console.error(error); });

No exemplo acima, o método .then() é usado para registrar os dados recebidos da Promise, enquanto o método .catch() é usado para registrar quaisquer erros que ocorram.


Encadeamento de promises: Uma das funcionalidades poderosas das Promises é que podemos encadear múltiplas operações assíncronas. Cada .then() pode retornar uma nova Promise, permitindo realizar uma sequência de operações assíncronas uma após a outra.
Aqui está um exemplo de encadeamento de Promise:

js fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); return fetch('https://api.example.com/other-data'); }) .then(response => response.json()) .then(otherData => { console.log(otherData); }) .catch(error => { console.error(error); });

No exemplo acima, primeiro buscamos dados de uma URL, depois buscamos dados de outra URL com base na primeira resposta, e finalmente registramos os segundos dados recebidos.

O método catch lidaria com quaisquer erros que ocorram durante o processo. Isso significa que você não precisa adicionar tratamento de erros em cada passo, o que pode simplificar muito seu código.

Usando async/await para lidar com promises

Async/await facilita escrever e ler código assíncrono, sendo construído sobre Promises.


async: A palavra-chave async é usada para definir uma função assíncrona. Uma função async retorna uma Promise, que é resolvida com o valor retornado pela função async.
await: A palavra-chave await é usada dentro de uma função async para pausar a execução da função até que a Promise seja resolvida. Só pode ser usada dentro de uma função async.
Aqui está um exemplo de uso de async/await:

:::interactive_editor

js async function delayedGreeting(name) { console.log("A Messenger entered the chat..."); await new Promise(resolve => setTimeout(resolve, 2000)); console.log(Hello, ${name}!); } delayedGreeting("Alice"); console.log("First Printed Message!");

:::

No exemplo acima, a função delayedGreeting é uma função async que pausa por 2 segundos antes de imprimir a mensagem de saudação. A palavra-chave await é usada para pausar a execução da função até que Promise seja resolvida.


Uma das maiores vantagens do async/await é o tratamento de erros via blocos try/catch. Aqui está um exemplo:

js async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } } fetchData();

No exemplo acima, o bloco try contém o código que pode lançar um erro, e o bloco catch trata o erro caso ele ocorra. Isso torna o tratamento de erros mais direto e legível.

O atributo async


O atributo async instrui o navegador a baixar o arquivo de script de forma assíncrona enquanto continua a analisar o documento HTML.
Uma vez que o script é baixado, a análise do HTML é pausada, o script é executado e então a análise do HTML é retomada.
Você deve usar async para scripts independentes onde a ordem de execução não importa.

O atributo defer


O atributo defer também baixa o script de forma assíncrona, mas adia a execução do script até que o documento HTML tenha sido completamente analisado.
Os scripts defer mantêm a ordem de execução conforme aparecem no documento HTML.
É importante notar que ambos os atributos async e defer são ignorados para scripts inline e funcionam apenas para arquivos de script externos.
Quando ambos os atributos async e defer estão presentes, o atributo async tem precedência.

Geolocation API


A Geolocation API fornece uma forma para sites solicitarem a localização do usuário.
O exemplo abaixo demonstra o método getCurrentPosition() da API, que é usado para obter a localização atual do usuário.

js navigator.geolocation.getCurrentPosition( (position) => { console.log("Latitude: " + position.coords.latitude); console.log("Longitude: " + position.coords.longitude); }, (error) => { console.log("Error: " + error.message); } ); ``` Neste código, estamos chamando getCurrentPosition e passando uma função que será chamada quando a posição for obtida com sucesso. O objeto position contém uma variedade de informações, mas aqui selecionamos apenas latitude e longitude. Se houver um problema ao obter o position, o erro será registrado no console. É importante respeitar a privacidade do usuário e solicitar a localização apenas quando necessário.