JavaScript Essencial
Exemplos de uso de Arrays, Classes, Objetos, Funções, Filter, Map, Reduce, Foreach, Métodos Estáticos, Promises, Async / Await e Fetch!
Arrays✨
------ Contruindo um Array ------
const array1 = [];
array1.push(1);
array1.push(2);
array1.push(3);
const array2 = [1, 2, 3, 4, 5];
const array3 = new Array(1, 2, 3);
const array4 = new Array(5);
array4.fill(0);
const stringArray = Array.from('hello');
const sourceArray = [4, 5, 6];
const newArray = [...sourceArray, 7, 8, 9];
const arrayA = [1, 2];
const arrayB = [3, 4];
const combinedArray = arrayA.concat(arrayB);
------ Percorrendo um Array ------
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
for (const element of array) {
console.log(element);
}
array.forEach(function(element) {
console.log(element);
});
array.forEach(element => {
console.log(element);
});
Classes✨
class Animal {
constructor(name, species) {
this.name = name;
this.species = species;
}
getName() {
return this.name;
}
getSpecies() {
return this.species;
}
makeSound() {
console.log('Animal sound');
}
}
const cat = new Animal('Whiskers', 'Cat');
Objects✨
const obj2 = {
name: 'Alice',
age: 30,
};
const obj3 = new Object();
obj3.name = 'Bob';
obj3.age = 25;
function Person(name, age) {
this.name = name;
this.age = age;
}
const person1 = new Person('Carol', 28);
Functions✨
// Função declarativa
function add(a, b) {
return a + b;
}
console.log(add(2, 3));
// Função anônima atribuída a uma variável
const subtract = function(a, b) {
return a - b;
};
console.log(subtract(5, 2));
// Arrow function (introduzida no ES6)
const multiply = (a, b) => a * b;
console.log(multiply(4, 3));
// Função como método de um objeto
const calculator = {
divide: function(a, b) {
return a / b;
}
};
console.log(calculator.divide(10, 2));
// Função como retorno de outra função
function generateMultiplier(factor) {
return function(number) {
return number * factor;
};
}
const double = generateMultiplier(2);
console.log(double(6));
// Função com parâmetros padrão (introduzido no ES6)
function power(base, exponent = 2) {
return Math.pow(base, exponent);
}
console.log(power(3));
// Função com rest parameter (introduzido no ES6)
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4));
// Função com desestruturação de parâmetros (introduzido no ES6)
function printPerson({ name, age }) {
console.log(name + ' is ' + age + ' years old.');
}
const person = { name: 'Bob', age: 30 };
printPerson(person);
Filter✨
Retorna um valor booleano (true
ou false
) para determinar se o elemento deve ou não ser incluído no novo array filtrado.
const newArray = originalArray.filter(function(element) {
// Condição de filtragem
return /* condição */;
});
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Filtrar números pares usando uma função de callback
const evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers);
// Filtrar números maiores que 5 usando arrow function
const greaterThanFive = numbers.filter(number => number > 5);
console.log(greaterThanFive);
Map✨
Não altera o array original; em vez disso, ele cria um novo array com os valores resultantes das transformações aplicadas aos elementos do array original.
const newArray = originalArray.map(function(element) {
// Transformação a ser aplicada em cada elemento
return /* novo valor */;
});
const numbers = [1, 2, 3, 4, 5];
// Multiplicar cada número por 2 usando uma função de callback
const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers);
// Usar arrow function para elevar cada número ao quadrado
const squaredNumbers = numbers.map(number => number ** 2);
console.log(squaredNumbers);
Reduce✨
É útil quando você precisa acumular informações de todos os elementos de um array para calcular um único resultado, como a soma, média, concatenação, entre outros.
const result = array.reduce(function(accumulator, currentValue, index, array) {
// Lógica de redução
return /* novo valor do acumulador */;
}, initialValue);
array
é o array que você deseja reduzir.accumulator
é o valor acumulado que é atualizado a cada iteração.currentValue
é o valor do elemento atual sendo processado no array.index
é o índice do elemento atual no array.array
é o próprio array que está sendo percorrido.initialValue
é um valor opcional que especifica o valor inicial do acumulador. Se não for fornecido, o primeiro elemento do array será usado como valor inicial.
const numbers = [1, 2, 3, 4, 5];
// Método 1: Somar todos os números usando uma função de callback
const sum = numbers.reduce(function(accumulator, number) {
return accumulator + number;
}, 0);
console.log(sum);
// Método 2: Calcular o produto de todos os números usando arrow function
const product = numbers.reduce((accumulator, number) => accumulator * number, 1);
console.log(product);
Foreach✨
Frequentemente usado quando o objetivo principal é percorrer um array para executar uma operação em cada elemento.
const array = [1, 2, 3, 4, 5];
// Usar forEach() com uma função de callback
array.forEach(function(element) {
console.log(element);
});
// Usar forEach() com arrow function
array.forEach(element => {
console.log(element);
});
Static Methods✨
Métodos estáticos são aqueles que pertencem à classe ou função, em vez de serem instanciados.
class ArrayUtils {
static contains(array, value) {
return array.includes(value);
}
}
const numbers = [1, 2, 3, 4, 5];
console.log(ArrayUtils.contains(numbers, 3));
// Usar uma função imediatamente invocada (IIFE)
const MathLibrary = (function() {
return {
multiply: function(a, b) {
return a * b;
}
};
})();
console.log(MathLibrary.multiply(4, 5));
Promises✨
Serve para o tratamento de código assíncrono.
Promise.resolve(value)
: Retorna uma Promise resolvida com o valor fornecido.Promise.reject(reason)
: Retorna uma Promise rejeitada com o motivo fornecido.Promise.all(iterable)
: Retorna uma Promise que é resolvida quando todas as Promises no iterável são resolvidas, ou rejeitada se qualquer uma das Promises for rejeitada.Promise.race(iterable)
: Retorna uma Promise que é resolvida ou rejeitada assim que qualquer uma das Promises no iterável for resolvida ou rejeitada.
// Método 1: Criar uma Promise básica
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise resolved');
// ou
// reject(new Error('Promise rejected'));
}, 1000);
});
promise1
.then(result => {
console.log(result);
})
.catch(error => {
console.error(error);
});
// Método 2: Usar Promise.resolve() para criar uma Promise resolvida
const promise2 = Promise.resolve('Resolved value');
promise2.then(result => console.log(result));
// Método 3: Usar Promise.reject() para criar uma Promise rejeitada
const promise3 = Promise.reject(new Error('Rejected promise'));
promise3.catch(error => console.error(error));
// Método 4: Encadear múltiplas Promises usando then()
const promise4 = Promise.resolve(10);
promise4
.then(value => value * 2)
.then(result => result + 5)
.then(finalResult => console.log(finalResult));
// Método 5: Usar Promise.all() para aguardar várias Promises
const promise5 = Promise.resolve(1);
const promise6 = Promise.resolve(2);
const promise7 = Promise.resolve(3);
Promise.all([promise5, promise6, promise7])
.then(values => console.log(values));
// Método 6: Usar Promise.race() para aguardar a primeira Promise a ser resolvida ou rejeitada
const promise8 = new Promise(resolve => setTimeout(() => resolve('Promise 8 resolved'), 2000));
const promise9 = new Promise(resolve => setTimeout(() => resolve('Promise 9 resolved'), 1000));
Promise.race([promise8, promise9])
.then(result => console.log(result));
Async / Await✨
Ajuda o tratamento de código assíncrono.
// Método 1: Função assíncrona com await
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();
// Método 2: Usar async/await com Promise.all() para aguardar várias Promises
async function fetchMultipleData() {
try {
const [data1, data2] = await Promise.all([
fetch('https://api.example.com/data1').then(response => response.json()),
fetch('https://api.example.com/data2').then(response => response.json())
]);
console.log(data1, data2);
} catch (error) {
console.error(error);
}
}
fetchMultipleData();
// Método 3: Usar async/await com loop for...of para iterar sobre Promises
async function fetchMultipleDataWithLoop() {
const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];
const dataArray = [];
for (const url of urls) {
const response = await fetch(url);
const data = await response.json();
dataArray.push(data);
}
console.log(dataArray);
}
fetchMultipleDataWithLoop();
// Método 4: Usar async/await com operadores ternários para tratamento de erro
async function fetchWithFallback() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network request failed');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error.message);
}
}
fetchWithFallback();
Fetch API✨
Serve para fazer solicitações HTTP, tratar respostas, enviar dados e lidar com erros.
// Método 1: Fazer uma solicitação GET básica
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Método 2: Enviar uma solicitação POST com corpo JSON
const postPayload = {
title: 'Sample Post',
body: 'This is a sample post.',
userId: 1
};
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(postPayload)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Método 3: Lidar com cabeçalhos de resposta
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log('Status:', response.status);
console.log('Content-Type:', response.headers.get('content-type'));
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
// Método 4: Lidar com diferentes tipos de erros
fetch('https://jsonplaceholder.typicode.com/invalid-url')
.then(response => {
if (!response.ok) {
throw new Error('Network request failed');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
// Método 5: Usar async/await com Fetch API
async function fetchData() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();