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 um array 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 do array 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.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn