DEV Community

Cover image for Hoje iremos falar sobre a velocidade em percorrer um elemento em JavaScript
William Koller
William Koller

Posted on

1

Hoje iremos falar sobre a velocidade em percorrer um elemento em JavaScript

Quando precisamos buscar uma lista de elementos em JavaScript sempre usamos .find(), mas o .find() usa o paradigma declarativo ou seja o paradigma declarativo em JavaScript se refere a uma abordagem de programação na qual você descreve o que deseja alcançar e deixa a linguagem cuidar da implementação dos detalhes.

Exemplo:

const numbers = [10, 20, 30, 40, 50];

  function findGreaterThan30(element) {
    return element > 30;
  }

  const result = numbers.find(findGreaterThan30);

  console.log(result); // 40
Enter fullscreen mode Exit fullscreen mode

No paradigma imperativo em JavaScript, você fornece instruções detalhadas sobre como realizar uma tarefa. Nesse estilo de programação, você se concentra em especificar passo a passo como um programa deve executar as ações desejadas.

Examplo:

const numbers = [10, 20, 30, 40, 50];
  let result;

  function findGreaterThan30Imperative(array) {
    for (let i of Object.keys(array)) {
      if (array[i] > 30) {
        result = array[i];
        break;
      }
    }
  }

  findGreaterThan30Imperative(numbers);

  console.log(result); // 40
Enter fullscreen mode Exit fullscreen mode

Ambos trazem o mesmo resultado, mas qual sera o mais rapido.

Vamos passar para duas functions uma declarative() e a outra imperative()

Exemplo:

function declarative() {
  console.time('declarative');

  const numbers = [10, 20, 30, 40, 50];

  function findGreaterThan30(element) {
    return element > 30;
  }

  const result = numbers.find(findGreaterThan30);

  console.log(result); // 40

  console.timeEnd('declarative');
}

declarative();

function imperative() {
  console.time('imperative');

  const numbers = [10, 20, 30, 40, 50];
  let result;

  function findGreaterThan30Imperative(array) {
    for (let i of Object.keys(array)) {
      if (array[i] > 30) {
        result = array[i];
        break;
      }
    }
  }

  findGreaterThan30Imperative(numbers);

  console.log(result); // 40
  console.timeEnd('imperative');
}

imperative();
Enter fullscreen mode Exit fullscreen mode

Executando e olhe a diferença:

Image description

Espero ter ajudado <3 e cuidado ao usar .find() em JavaScript.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more