Javascript (Essencial para Frameworks)

Arrays (map, filter, reduce)

map, reduce e filter são métodos nativos de arrays do JavaScript que permitem manipular os dados de um array de forma eficiente. A seguir, explico como cada um deles funciona:

map: O método map cria um novo array a partir de um array existente, aplicando uma função de transformação em cada elemento. A função de transformação recebe como argumento cada elemento do array original e deve retornar um novo valor que será incluído no novo array. O novo array gerado terá o mesmo número de elementos que o array original. Exemplo:

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

const dobrados = numeros.map(function(numero) {
  return numero * 2;
});

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

Nesse exemplo, o método map é aplicado ao array numeros, e para cada elemento é aplicada a função de transformação que multiplica o elemento por 2. O resultado é um novo array com os valores dobrados.

reduce: O método reduce aplica uma função de acumulação em cada elemento do array, a partir do primeiro elemento até o último. A função de acumulação recebe dois argumentos: um acumulador e um valor atual. O acumulador é o valor retornado pela função de acumulação na iteração anterior, ou o valor inicial especificado como segundo argumento do método reduce. O valor atual é o valor do elemento atual do array. A função de acumulação deve retornar o valor que será usado como acumulador na próxima iteração. Ao final do processo, o valor retornado pela última iteração é o valor final do método reduce. Exemplo:

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

const soma = numeros.reduce(function(acumulador, numero) {
  return acumulador + numero;
}, 0);

console.log(soma); // 15

Nesse exemplo, o método reduce é aplicado ao array numeros, e a função de acumulação é uma simples soma dos valores. O valor inicial do acumulador é zero, e na primeira iteração o valor atual é 1. A função de acumulação retorna a soma do acumulador (zero) com o valor atual (1), que é 1. Na próxima iteração, o acumulador é 1 e o valor atual é 2, resultando em um acumulador de valor 3. O processo continua até a última iteração, quando o acumulador tem valor 15.

filter: O método filter cria um novo array a partir de um array existente, incluindo apenas os elementos que atendem a uma determinada condição. A condição é especificada por uma função que é aplicada em cada elemento do array. A função deve retornar um valor booleano: true para incluir o elemento no novo array ou false para excluí-lo. Exemplo:

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

const pares = numeros.filter(function(numero) {
  return numero % 2 === 0;
});

console.log(pares); // [2, 4]

Nesse exemplo, o método filter é aplicado ao array numeros, e a função de filtro é uma verificação se o número é par (o resto da divisão por 2 é zero).

Objetos

Objetos são estruturas de dados complexas em JavaScript que podem armazenar múltiplos valores e métodos em uma única variável. Eles são usados para modelar entidades do mundo real ou para agrupar dados relacionados.

Em JavaScript, objetos são criados usando a sintaxe de chaves ({}) e podem ter várias propriedades e valores. Por exemplo:

let pessoa = {
  nome: "João",
  idade: 30,
  cidade: "São Paulo"
};

Nesse exemplo, pessoa é um objeto com três propriedades: nome, idade e cidade.

Para acessar ou modificar as propriedades de um objeto, podemos usar a notação de ponto ou a notação de colchetes. Por exemplo:

console.log(pessoa.nome); // "João"
pessoa.idade = 31;
console.log(pessoa["cidade"]); // "São Paulo"

Também é possível adicionar ou remover propriedades de um objeto dinamicamente usando a mesma notação de ponto ou colchetes. Por exemplo:

pessoa.profissao = "Programador";
delete pessoa.cidade;

Os objetos também podem ter métodos, que são funções que são armazenadas como propriedades. Por exemplo:

let pessoa = {
  nome: "João",
  idade: 30,
  cidade: "São Paulo",
  saudacao: function() {
    console.log("Olá, meu nome é " + this.nome + " e tenho " + this.idade + " anos.");
  }
};

pessoa.saudacao(); // "Olá, meu nome é João e tenho 30 anos."

Em resumo, os objetos são estruturas de dados fundamentais em JavaScript que permitem agrupar e manipular dados relacionados. Eles podem ter propriedades e métodos, e podem ser criados, acessados e modificados usando a notação de ponto ou colchetes.

Arrow Functions

Arrow functions são uma forma mais curta e concisa de escrever funções no JavaScript. Elas foram introduzidas no ECMAScript 6 e são uma alternativa para a sintaxe tradicional de declaração de funções.

A principal diferença entre as arrow functions e as funções tradicionais é a sintaxe. Em vez de usar a palavra-chave "function", as arrow functions são definidas usando uma seta (=>). Além disso, as arrow functions não criam um novo contexto de "this" quando são chamadas, o que pode ser útil em algumas situações.

Aqui está um exemplo de uma função tradicional e sua equivalente como arrow function:

// Função tradicional
function soma(a, b) {
  return a + b;
}

// Arrow function equivalente
const soma = (a, b) => a + b;

As arrow functions podem ter diferentes formas dependendo do número de parâmetros e do que é retornado. Veja alguns exemplos:

// Arrow function sem parâmetros
const hello = () => console.log("Olá!");

// Arrow function com um parâmetro
const dobro = (x) => x * 2;

// Arrow function com mais de um parâmetro
const soma = (a, b) => a + b;

// Arrow function com bloco de código
const isPositive = (number) => {
  if (number > 0) {
    return true;
  } else {
    return false;
  }
};

Callbacks

Callbacks são funções que são passadas como argumentos para outras funções em JavaScript. Essas funções são chamadas de volta (daí o nome "callback") após a execução da função principal.

Com o uso de callbacks, é possível escrever código mais flexível e modular, separando as tarefas em funções específicas que podem ser reutilizadas em diferentes partes do código. As callbacks também são uma maneira de lidar com erros em funções assíncronas, permitindo que o código se adapte a diferentes cenários de erro.

Um exemplo prático e comum de uso de callbacks é a utilização de funções como parâmetros em outras funções.

Vamos imaginar uma função chamada somar, que recebe dois números como parâmetros e retorna a soma entre eles:

function somar(a, b) {
  return a + b;
}

Agora, vamos criar uma outra função chamada calcular que recebe três parâmetros: dois números e uma função. Essa função será usada para realizar um cálculo entre os dois números passados como parâmetro.

function calcular(a, b, operacao) {
  return operacao(a, b);
}

Note que o terceiro parâmetro é uma função, que será usada para realizar a operação entre a e b. Essa função é chamada de callback.

Agora, vamos criar algumas funções que serão usadas como callbacks na função calcular:

function multiplicar(a, b) {
  return a * b;
}

function subtrair(a, b) {
  return a - b;
}

Agora, podemos chamar a função calcular passando como terceiro parâmetro uma das funções que acabamos de criar:

calcular(5, 3, somar); // retorna 8
calcular(5, 3, multiplicar); // retorna 15
calcular(5, 3, subtrair); // retorna 2

Repare que estamos passando as funções somar, multiplicar e subtrair como parâmetro para a função calcular, e cada uma delas será usada como callback para realizar uma operação específica. Esse é um exemplo simples e prático de como utilizar callbacks em funções do JavaScript.

Destructuring

Destructuring em português seria "Destruturação". É uma técnica que permite extrair dados de uma estrutura de dados complexa, como um objeto ou array, e atribuí-los a variáveis individuais de forma mais fácil e concisa.

Destructuring é uma funcionalidade do JavaScript que permite extrair valores de objetos ou arrays em variáveis distintas, de maneira mais concisa e legível. Com ele, podemos atribuir valores a variáveis de forma mais simples, sem a necessidade de escrever várias linhas de código.

Por exemplo, considerando o objeto:

const pessoa = {
  nome: 'João',
  idade: 25,
  cidade: 'São Paulo'
}

Podemos extrair os valores das propriedades em variáveis distintas usando o Destructuring:

const { nome, idade, cidade } = pessoa;

Dessa forma, a variável nome receberá o valor 'João', a variável idade receberá o valor 25 e a variável cidade receberá o valor 'São Paulo'.

Além disso, é possível utilizar o Destructuring em arrays também:

const numeros = [1, 2, 3, 4, 5];
const [primeiro, segundo, ...resto] = numeros;

Neste exemplo, a variável primeiro receberá o valor 1, a variável segundo receberá o valor 2, e a variável resto será um array contendo os valores [3, 4, 5].

O Destructuring é uma funcionalidade muito útil para simplificar o código e torná-lo mais legível, principalmente em situações em que é necessário acessar muitas propriedades de um objeto ou muitos elementos de um array. Outro exemplo mais simples seria:

const produtos = ['Agua', 'Refri', 'Cerveja', 'Suco', 'Limonada']
const [p4] = produtos;
console.log(p4);

Modules

Modules, em JavaScript, são uma forma de organizar o código em módulos separados e reutilizáveis. Eles permitem dividir o código em partes menores, facilitando a manutenção, o desenvolvimento colaborativo e a legibilidade do código.

O suporte a módulos foi adicionado ao JavaScript no ECMAScript 6, e a maneira padrão de criar um módulo é usar a sintaxe export e import. O export é usado para exportar um valor de um módulo, enquanto o import é usado para importar um valor de outro módulo.

Por exemplo, considere o seguinte módulo que define uma função saudacao e exporta essa função:

// módulo de saudação
export function saudacao(nome) {
  console.log(`Olá, ${nome}!`);
}

Agora, para usar essa função em outro módulo, podemos importá-la usando a seguinte sintaxe:

import { saudacao } from './saudacao.js';

saudacao('João'); // output: Olá, João!

Neste exemplo, o módulo saudacao exporta a função saudacao usando a palavra-chave export. O módulo saudacao é importado no outro módulo usando a palavra-chave import.

É importante notar que os módulos no JavaScript são carregados de forma assíncrona, o que significa que a execução do código não é bloqueada enquanto o módulo é carregado. Isso é diferente do carregamento de scripts no HTML, onde o carregamento é síncrono e pode bloquear a execução do código.

Além disso, os módulos no JavaScript possuem escopo próprio, o que significa que as variáveis e funções definidas em um módulo não são acessíveis em outros módulos, a menos que sejam exportadas. Isso ajuda a evitar conflitos de nomes e a manter a integridade do código.

Em resumo, os módulos no JavaScript são uma forma de organizar e compartilhar código de forma clara e reutilizável. Eles ajudam a tornar o código mais modular, legível e fácil de manter.

Fetch

O fetch é uma função nativa do JavaScript para fazer requisições HTTP assíncronas. Ela é usada para buscar recursos de um servidor, como dados em formato JSON ou imagens, e obter a resposta em formato de objeto Response. O fetch é uma alternativa moderna ao antigo objeto XMLHttpRequest.

Para utilizar o fetch, basta chamar a função passando a URL do recurso desejado como parâmetro. É possível também passar um segundo parâmetro opcional, um objeto de opções para configurar a requisição, como o método HTTP a ser utilizado, os cabeçalhos da requisição, o corpo da requisição, entre outras opções.

Um exemplo simples de uso do fetch seria o seguinte:

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

Nesse exemplo, a função fetch é usada para buscar os dados da API em formato JSON, e depois os dados são convertidos em objeto JavaScript com o método json() da resposta. Em seguida, é feito o log dos dados no console. O método catch() é usado para capturar erros na requisição.

O fetch retorna uma promessa (promise), o que permite o uso do método then() para manipular a resposta da requisição quando ela estiver disponível. Isso torna a requisição assíncrona e evita bloquear a thread principal do JavaScript, permitindo que o usuário continue a interagir com a página enquanto a requisição está sendo processada.

Uma Promise em JavaScript é um objeto que representa um valor que pode estar disponível agora, no futuro ou nunca. Ela é utilizada para trabalhar com operações assíncronas, como requisições HTTP ou operações que levam tempo para serem concluídas.

Uma Promise tem três estados possíveis:

• Pending: quando ainda está sendo processada;
• Fulfilled: quando a operação assíncrona foi concluída com sucesso e o valor resultante está disponível;
• Rejected: quando ocorre um erro durante o processamento da operação assíncrona.

O uso de Promises permite que o código assíncrono seja tratado de forma mais elegante, com uma sintaxe mais simples e fácil de entender. Além disso, permite o encadeamento de várias operações assíncronas de forma mais clara, através do uso de métodos como then() e catch().

Por exemplo, ao realizar uma requisição HTTP utilizando fetch, é retornada uma Promise que pode ser tratada utilizando os métodos then() e catch().

Referencias:

https://www.alura.com.br/artigos/manipulacao-de-array-com-map-filter-e-reduce?gclid=EAIaIQobChMIlJaV_Jbu_gIVPS-tBh2kdgW-EAAYASAAEgJJZ_D_BwE

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/JSON

https://medium.com/trainingcenter/objetos-em-javascript-parte-1-24a377dff76a