Open in app

Sign in

Write

Sign in

JavaScript Essencial

Milena Furuta Shishito
6 min readAug 11, 2023

--

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();
Programação
JavaScript
Front End Development
Desenvolvimento
Web Development

--

--

Milena Furuta Shishito

Written by Milena Furuta Shishito

6 Followers

Front-end Intern

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams