Métodos JavaScript e mais. Parte 9 do curso de JavaScript do Iniciante ao Avançado em 10 postagens de blog

Esta é a parte 9 da série de postagens do blog sobre JavaScript que o levará do nível iniciante ao avançado. Desta vez, exploraremos os seguintes tópicos: métodos JavaScript, valores padrão de parâmetros, o objeto Date em JavaScript e a função de seta. Ao final desta série, você conhecerá todos os conceitos básicos que precisa saber para começar a programar em JavaScript. Se você não leu a postagem anterior do blog sobre objetos JavaScript, pode fazê-lo aqui. Sem mais delongas, vamos começar com o nono tutorial.

Métodos JavaScript e mais – índice:

1. Valores padrão de parâmetros
2. O objeto Date em JavaScript
3. Método Map()
4. Método Filter()
5. Função de seta

Até agora, vimos muitos conceitos e tópicos em JavaScript, mas ainda há alguns comumente usados que não descobrimos. Neste tutorial, veremos do que se tratam. O primeiro é os valores padrão de parâmetros em JavaScript.

Valores padrão de parâmetros

Funções são usadas extremamente comumente na programação, e quando algo é usado com tanta frequência, não existem apenas frameworks como o React que aproveitam as funções JavaScript, mas também existem otimizações adicionais desenvolvidas para extrair ainda mais das funções JavaScript. Uma das principais características que temos nas funções é chamada de valores padrão de parâmetros. Parâmetros padrão nos permitem escrever códigos mais seguros que podem fazer suposições seguras sobre a entrada do usuário. Isso também beneficia o usuário, fornecendo uma configuração padrão que pode facilitar a escolha entre suas opções. Vamos ver alguns exemplos disso.

// suponha que você está desenvolvendo um site para uma cafeteria
// e a maioria das pessoas quer um americano de tamanho médio
// sabendo disso, você quer facilitar para as pessoas
// pedirem seu café com menos complicação
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="médio", numberOfCoffee=1){
    return (numberOfCoffee + " " + sizeOfCoffee + " tamanho " + typeOfCoffee + " está sendo preparado. ");
}
console.log("Pedido padrão:");
console.log(orderCoffee());
// dessa forma, quando um cliente médio faz um pedido online, 
// será muito mais fácil para ele pedir seu café diário
// tanto que ele poderá pedir com um único botão
// alternativamente, as pessoas também podem personalizar seu café
// mudando as entradas
console.log("Pedido personalizado:");
console.log(orderCoffee("latte", "grande", 2));
console.log("Outro pedido personalizado:");
console.log(orderCoffee("macchiato", "pequeno", 1));
// também é possível mudar apenas parte das entradas
// e aproveitar os parâmetros padrão 
// para o restante dos campos de entrada
console.log("Pedido parcialmente personalizado:");
console.log(orderCoffee("iced coffee"));

Executar o código acima nos dá a seguinte saída:

O objeto Date em JavaScript

O objeto Date em JavaScript é bastante comumente usado, especialmente no desenvolvimento web. Podemos usar o objeto Date para realizar funções sensíveis ao tempo, como mudar as configurações de exibição para modo escuro, modo claro ou qualquer outro modo que o usuário possa preferir. Também podemos usar as informações da data conforme necessário dentro do projeto em que estamos trabalhando. Aqui estão alguns exemplos do objeto Date em ação:

// o primeiro passo é criar uma instância do objeto date
// podemos fazer isso escrevendo o seguinte e 
// atribuindo a uma variável ou constante de nossa escolha
let today = new Date();
console.log("Estamos no ano: " + today.getFullYear());
console.log("Também podemos obter o mês em número:");
console.log(today.getMonth());
console.log("Além disso, podemos obter a hora do dia assim:");
console.log(today.getHours());
console.log("Também podemos obter os minutos exatos junto com os segundos");
console.log(today.getMinutes());
console.log(today.getSeconds());
// uma vez que temos esses números, podemos usá-los como quisermos
// se quisermos, podemos exibi-los ou tomar decisões com base neles.
// se quisermos exibir o mês com um nome 
// em vez de um número, também podemos conseguir isso
// com o seguinte
const months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
console.log("Estamos no mês de " + months[today.getMonth()]);
// o que acabamos de fazer foi criar um array para armazenar os nomes dos meses
// e então escolher o mês correto usando um valor de índice
// fornecido pelo método .getMonth().
// se quisermos ativar o modo escuro após as 20h,
// poderíamos fazer isso com o seguinte código
// uma das primeiras coisas que devemos lembrar é que
// as horas são dadas no formato de 24 horas
// isso significa que 20h será 20 como horas
// também podemos usar uma forma abreviada 
// e combinar a criação do novo objeto date
// com o método get hours
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
    console.log("Ativando o Modo Escuro...");
} else {
    console.log("Não ativar o Modo Escuro");
}
// como a hora atual é após as 20h,
// neste caso, esperamos ativar o Modo Escuro.
// que é também o resultado que obtemos, como podemos ver a partir
// da saída do console.

Executar o código acima nos dará os seguintes logs no console:

Método Map()

O método map é um método altamente útil que pode economizar muitas linhas de código e, dependendo de como você o usa, pode deixar seu código muito mais limpo. Ele essencialmente substitui o uso de um loop for quando você o usa para iterar sobre um array. Aqui estão alguns exemplos do método map().

// vamos criar um array que usaremos para mapear
let someNumbers = [1, 2, 3, 4, 5];
// vamos também criar as funções que forneceremos ao método map
function doubleNums(num1){
    return num1 * 2;
}
function squareNums(num1){
    return num1 * num1;
}
function add100(num1){
    return num1 + 100;
}
console.log("Array de números dobrados:");
console.log(someNumbers.map(doubleNums));
console.log("Array de números ao quadrado:");
console.log(someNumbers.map(squareNums));
console.log("100 adicionado a cada um dos elementos no array de números:");
console.log(someNumbers.map(add100));
// o método map() irá iterar sobre cada um dos
// itens em um array dado e aplicar a 
// função fornecida
// note que não incluímos parênteses
// após os nomes das funções, isso chamaria a função
// em vez disso, passamos o nome da função, 
// e o método map() as chama quando precisa

Executar o código acima nos dará os seguintes logs no console:

Método Filter()

O método filter(), junto com o método map() são ambos métodos JavaScript bastante comuns. Eles são muito semelhantes ao método map() que acabamos de ver. Com o método map(), podemos passar qualquer função, e essa função é aplicada a cada um dos elementos em um array. Com o método filter(), passaremos um critério de filtragem e o método filter irá iterar sobre todos os itens em um array e retornará um novo array com apenas os itens que atendem ao critério. Vamos ver alguns exemplos disso:

// vamos primeiro criar um array 
// para aplicar o método filter()
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
function checkEven(num1){
    if (num1 % 2 == 0){
        return num1;
    }
}
function checkOdd(num1){
    if (num1 % 2 == 1){
        return num1;
    }
}
function over13(num1){
    if (num1 > 13){
        return num1;
    }
}
function divisibleByFive(num){
    if (num % 5 == 0){
        return num;
    }
}
console.log("Números pares da lista:");
console.log(someNumbers.filter(checkEven));
console.log("Números ímpares da lista:");
console.log(someNumbers.filter(checkOdd));
console.log("Números acima de 13 do array:");
console.log(someNumbers.filter(over13));
console.log("Números divisíveis por 5 do array:");
console.log(someNumbers.filter(divisibleByFive));

Executar o código acima nos dará os seguintes logs no console:

Função de seta

Lembre-se quando dissemos que funções são extremamente comuns em JavaScript e que muitas otimizações são feitas para que elas sejam ainda mais performáticas ou com código mais limpo? Bem, as funções de seta são uma delas. Funções de seta às vezes também são chamadas de “seta gorda”. Elas essencialmente fornecem uma maneira muito mais curta de escrever suas funções. Elas também são muito comumente usadas com os métodos JavaScript que acabamos de ver. Vamos vê-las com alguns exemplos:

// JavaScript fornece múltiplos níveis de 
// encurtamento de código com funções de seta dependendo do seu código exato
// Essencialmente, a maneira mais longa que podemos escrever uma função é 
// a maneira que sempre escrevemos sem usar as funções de seta
// vamos começar com um array para aplicar as funções de seta
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
console.log("Array Original:");
console.log(someNumbers);
// nos exemplos anteriores, aplicamos muitas funções
// após criá-las como funções nomeadas regulares
// Neste exemplo, aplicaremos as transformações exatas
// para que você possa ver os dois extremos em comprimento de código
// dobre cada número no array:
console.log("Dobre cada número no array:")
console.log(someNumbers.map(num => num * 2));
// eleve ao quadrado cada número no array:
console.log("Eleve ao quadrado cada número no array:")
console.log(someNumbers.map(num => num * num));
// adicione 100 a cada número no array:
console.log("Adicione 100 a cada número no array:")
console.log(someNumbers.map(num => num + 100));
// Mantenha apenas os números pares no array:
console.log("Mantenha apenas os números pares no array:")
console.log(someNumbers.filter(num => num % 2 == 0));
// Mantenha apenas os números ímpares no array:
console.log("Mantenha apenas os números ímpares no array:")
console.log(someNumbers.filter(num => num % 2 == 1));
// Mantenha apenas os números que são divisíveis por 5:
console.log("Mantenha apenas os números que são divisíveis por 5:")
console.log(someNumbers.filter(num => num % 5 == 0));
// Mantenha apenas os números que são maiores que 13:
console.log("Mantenha apenas os números que são maiores que 13:")
console.log(someNumbers.filter(num => num > 13));

Executar o código acima nos dará os seguintes logs no console:

No próximo tutorial, teremos uma visão geral do que vimos e veremos o que vem a seguir.