Encerrar um loop forEach usando exceções em JavaScript

A linguagem de programação JavaScript vem com várias variações do loop for, ao contrário de outras linguagens de programação, só conseguimos ver o loop for tradicional, que consiste em 3 coisas - inicialização, condição e incremento ou decremento. Temos que seguir estes 3 elementos para fazer um loop tradicional for funcionar. Pode parecer muito confuso, especialmente se você for novo em programação.

JavaScript nos forneceu uma nova maneira de escrever o loop for, que é o loop forEach. O loop forEach é usado para iterar sobre um array. Muitos desenvolvedores preferem usar o loop forEach em vez do loop for tradicional para iterar em um array porque é muito mais fácil de escrever e muito mais legível.

Qualquer loop, seja um loop for ou um loop while, pode ser encerrado com a ajuda de uma instrução break. A única desvantagem de usar o loop forEach para iterar em um array é que ele não pode ser encerrado com a palavra-chave break. Há momentos em que queremos terminar um loop forEach quando alguma condição particular se mantém (verdadeira ou falsa) durante a execução do programa. Então, para isso, podemos usar o tratamento de exceções.

Terminar um loop forEach usando o bloco try...catch em JavaScript

Para alcançar a funcionalidade fornecida pela instrução break dentro do loop array.forEach, podemos usar o conceito de tratamento de exceção, que está disponível em JavaScript. O tratamento de exceção nada mais é do que tratar condições anormais se ocorrer algum erro durante a execução de um programa e evitar travamentos desnecessários do programa. Isso é feito com a ajuda de um bloco try...catch.

O bloco try é onde você escreverá todo o código. E o bloco catch conterá o código que será usado para tratar a exceção.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <p id="errorMsg"></p>

    <script>
        var arr = [1, 2, 3, 4, 5]
        try {
        arr.forEach((element)=> {
            if (element === 4) throw "number is equal to four";
            console.log(element);
        });
        } 
        catch (e) {
            errorMsg = document.getElementById('errorMsg');
            errorMsg.innerHTML = "Error: " + e + ".";
        }
    </script>
</body>
</html>

Resultado:

// The below output will be printed on the screen.
Error: number is equal to four.

// The below output will be printed inside the web browser console
1
2
3

Este é o nosso documento HTML 5. Dentro da tag <body>. Temos uma tag de parágrafo e o id é errorMsg. Esta tag de parágrafo será usada para mostrar a mensagem de erro que será lançada pelo nosso programa JavaScript.

Dentro da tag <script>, temos nosso programa real. Aqui, primeiro, declaramos uma matriz chamada arr, que contém elementos de 1 a 5. O objetivo principal aqui é iterar sobre essa matriz usando o loop forEach e, em seguida, interromper o loop quando atingir o elemento 4 Dentro da matriz arr.

No bloco try, usamos um loop forEach para iterar sobre este array. Dentro desse loop, passamos uma função anônima (também conhecida como função de seta). Dentro dessa função, temos uma instrução if para verificar se o elemento em uma posição particular em um array é 4 ou não. Se não for 4, ele imprimirá esse elemento no console do navegador da web; caso contrário, ele lançará uma exceção, dizendo que o number is equal to four.

Esta exceção lançada pelo bloco try será capturada pelo bloco catch e armazenada dentro da variável e. Agora podemos mostrar a mensagem de erro presente na variável e dentro da tag p com a ajuda de uma propriedade HTML chamada innerHTML. Este é um processo completo de implementação de uma funcionalidade break dentro do loop forEach enquanto iterando sobre um array em JavaScript.

Artigo relacionado - JavaScript Loop

  • JavaScript iterando sobre um array