Logo

dev-resources.site

for different kinds of informations.

Recriando o método lodash inRange() em vanilla JS

Published at
12/2/2023
Categories
javascript
programming
portugues
Author
dougsource
Categories
3 categories in total
javascript
open
programming
open
portugues
open
Author
10 person written this
dougsource
open
Recriando o método lodash inRange() em vanilla JS

Nota: apenas traduzi o texto abaixo e postei aqui.

Hoje vamos recriar o método inRange() com vanilla JS.

O que _.inRange() faz

O método lodash _.inRange() pega um number e verifica se está entre dois outros numbers.

Você passa o number, o start do range e o end do range como arguments.

_.inRange(number, start, end);

// Retorna true
_.inRange(2, 1, 4);

// Retorna false
_.inRange(2, 3, 5);
Enter fullscreen mode Exit fullscreen mode

Você também pode pular o start e passar apenas o end. O método usará 0 como start por padrão.

// Retorna true
_.inRange(2, 4);
Enter fullscreen mode Exit fullscreen mode

Se o number for igual ao start do range, ele passa. Se for igual ao end, ele falha. Pessoalmente, isso me parece estranho.

// Retorna true
_.inRange(2, 2, 4);

// Retorna false
// Porque?????
_.inRange(4, 2, 4);
Enter fullscreen mode Exit fullscreen mode

Tudo bem, vamos fazer isso.

Recriando _.inRange() com vanilla JS

Primeiro, vamos configurar nossa helper function.

var inRange = function (num, start, end) {
    // Faça as coisas...
};
Enter fullscreen mode Exit fullscreen mode

A seguir, vamos verificar se nosso number está no range.

Acho que o end deve ser inclusivo, assim como o start, então faremos as coisas de maneira um pouco diferente do que lodash faz aqui. Verificaremos se num é maior ou igual ao start e menor ou igual ao end. Então, retornaremos o resultado.

var inRange = function (num, start, end) {
    return num >= start && num <= end;
};
Enter fullscreen mode Exit fullscreen mode

A versão lodash permite "drop" o start, se desejar, e o default é 0. Vamos adicionar essa feature.

Verificaremos se end existe. Caso contrário, atribuiremos start como seu valor. Então, definiremos o start como 0.

var inRange = function (num, start, end) {
    // Se não houver o end number, use start como end
    if (!end) {
        end = start;
        start = 0;
    }
    return num >= start && num <= end;
};
Enter fullscreen mode Exit fullscreen mode

Uma última coisa que lodash faz é "flip" os valores de start e end se o start for maior que o end. Isso é feito para suportar valores negativos.

// Retorna false
inRange(-2, -1, -4);
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, -1 é na verdade maior que -4, porque são números negativos. O número -2 está dentro do range, mas se os números não fossem "flipped", ele falharia.

Pessoalmente, acho que os usuários deveriam passar isso da maneira certa, então não vou apoiar essa feature.

// Retorna true
inRange(-2, -4, -1);
Enter fullscreen mode Exit fullscreen mode

Então, com isso, terminamos.

Fonte

Newsletter de Go Make Things

portugues Article's
30 articles in total
Favicon
Validação e Sanitização em Aplicações Web
Favicon
Golang básico - Comparação de Igualdade
Favicon
Guia de React re-render: tudo, tudo de uma vez
Favicon
Go + hot reload
Favicon
Como animar o scrolling para anchor links com CSS
Favicon
Como criar uma sticky navigation apenas com CSS
Favicon
Como usar requestAnimationFrame() com vanilla JS
Favicon
Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API
Favicon
Por que utilizar um elemento form quando submit campos com JavaScript?
Favicon
Quando um framework é melhor que a manipulação nativa do DOM
Favicon
Recursão com vanilla JavaScript
Favicon
Como usar async e await com vanilla JavaScript
Favicon
Construindo um show/hide disclosure component acessível com vanilla JS
Favicon
Eu <3 cascade!
Favicon
Você provavelmente não precisa de um DOMContentLoaded event em seu Javacript
Favicon
Formas de escrever Immediately Invoked Function Expression (IIFE) no JavaScript
Favicon
Event delegation e múltiplos seletores com vanilla JS
Favicon
Usando a propriedade CSS currentColor para contruir componentes extensíveis
Favicon
CurrentColor e SVGs
Favicon
WTF é gzipping (e como é diferente da minificação)?
Favicon
Como eu estruturo meus projetos vanilla JS
Favicon
Uma alternativa vanilla JS para o método moment.js timeFromNow()
Favicon
Recriando o método lodash partition() em vanilla JS
Favicon
Recriando o método lodash inRange() em vanilla JS
Favicon
Recriando o método lodash pull() em vanilla JS
Favicon
Como converter segundos para minutos e horas em vanila JS
Favicon
Gerando números randômicos com vanila JS
Favicon
Obtendo os meses formatados com vanila JS
Favicon
Como ser um desenvolvedor mais produtivo
Favicon
Como construir um site que carregue em menos de um segundo

Featured ones: