Controle de Fluxo e Manipulação de Erro
O JavaScript suporta um conjunto compacto de declarações, especificamente de fluxo de controle, que você pode utilizar para atribuir uma grande interatividade a páginas web. Este capítulo fornece uma visão geral destas declarações.
Veja aReferência do JavaScript para detalhes sobre as declarações mostradas neste capítulo. No código em JavaScript, o caractere ponto e vírgula (;
) é utilizado para separar declarações.
Toda expressão também é uma declaração. VejaExpressões e Operadores para informações completas sobre expressões.
Declaração em bloco
Uma declaração em bloco é utilizada para agrupar declarações. O bloco é delimitado por um par de chaves:
{ declaracao_1; declaracao_2; . . . declaracao_n;}
Exemplo
Declarações em bloco são utilizadas geralmente com declarações de fluxo de controle (ex.if
,for
,while
).
while (x < 10) { x++;}
Aqui,{ x++; }
é a declaração de bloco.
Importante: Antes de ECMAScript 6 o JavaScriptnão possuía escopo de bloco. Variáveis introduzidas dentro de um bloco possuem como escopo a função ou o script em que o bloco está contido, e, definir tais variáveis tem efeito muito além do bloco em si. Em outras palavras, declarações de bloco não introduzem um escopo. Embora blocos "padrão" sejam uma sintaxe válida não utilize-os, em JavaScript, pensando que funcionam como em C ou Java porque eles não funcionam da maneira que você acredita. Por exemplo:
var x = 1;{ var x = 2;}console.log(x); // exibe 2
Este código exibe 2 porque a declaraçãovar x
dentro do bloco possui o mesmo escopo que a declaraçãovar x
antes do bloco. Em C ou Java, o código equivalente exibiria 1.
Declarações condicionais
Uma declaração condicional é um conjunto de comandos que são executados caso uma condição especificada seja verdadeira. O JavaScript suporta duas declarações condicionais:if...else
eswitch
.
Declaração if...else
Use a declaraçãoif
para executar alguma declaração caso a condição lógica for verdadeira. Use a cláusula opcionalelse
para executar alguma declaração caso a condição lógica for falsa. Uma declaraçãoif
é declarada da seguinte maneira:
if (condicao) { declaracao_1;} else { declaracao_2;}
ondecondicao
pode ser qualquer expressão que seja avaliada como verdadeira ou falsa. VejaBoolean para uma explicação sobre o que é avaliado comotrue
efalse
. Secondicao
for avaliada como verdadeira, declaracao_1
é executada; caso contrário,declaracao_2
é executada.declaracao_1
edeclaracao_2
podem ser qualquer declaração, incluindo declaraçõesif
aninhadas.
Você pode também combinar declarações utilizandoelse if
para obter várias condições testadas em sequência, como o seguinte:
if (condicao) { declaracao_1;} else if (condicao_2) { declaracao_2;} else if (condicao_n) { declaracao_n;} else { declaracao_final;}
Para executar várias declarações, agrupe-as em uma declaração em bloco ({ ... }
). Em geral, é uma boa prática sempre utilizar declarações em bloco, especialmente ao aninhar declaraçõesif
:
if (condicao) { declaracao_1_executada_se_condicao_for_verdadeira; declaracao_2_executada_se_condicao_for_verdadeira;} else { declaracao_3_executada_se_condicao_for_falsa; declaracao_4_executada_se_condicao_for_falsa;}
Recomenda-se não utilizar atribuições simples em uma expressão condicional porque o símbolo de atribuição poderia ser confundido com o de igualdade ao dar uma olhada no código. Por exemplo, não utilize o seguinte código:
if (x = y) { /* faça a coisa certa */}
Caso tenha que utilizar uma atribuição em uma expressão condicional, uma prática comum é colocar parênteses adicionais em volta da atribuição. Por exemplo:
if ((x = y)) { /* faça a coisa certa */}
Valores avaliados como falsos
Os seguintes valores são avaliados como falsos:
false
undefined
null
0
NaN
- string vazia (
""
)
Todos os outros valores, incluindo todos os objetos, são avaliados como verdadeiros quando passados para uma declaração condicional.
Não confunda os valores booleanos primitivostrue
efalse
com os valores detrue
efalse
do objetoBoolean. Por exemplo:
var b = new Boolean(false);if (b) // esta condição é avaliada como verdadeiraif (b == true) // esta condição é avaliada como falsa
Exemplo
No exemplo a seguir, a funçãoverifiqueDados
retorna verdadeiro se o número de caracteres em um objetoText
for três; caso contrário, exibe um alerta e retornafalso
.
function verifiqueDados() { if (document.form1.tresCaracteres.value.length == 3) { return true; } else { alert( "Informe exatamente três caracteres. " + document.form1.tresCaracteres.value + " não é válido.", ); return false; }}
Declaração switch
Uma declaraçãoswitch
permite que um programa avalie uma expressão e tente associar o valor da expressão ao rótulo de umcase
. Se uma correspondência é encontrada, o programa executa a declaração associada. Uma declaraçãoswitch
se parece com o seguinte:
switch (expressao) { case rotulo_1: declaracoes_1 [break;] case rotulo_2: declaracoes_2 [break;] ... default: declaracoes_padrao [break;]}
O programa primeiramente procura por uma cláusulacase
com um rótulo que corresponda ao valor da expressão e então transfere o controle para aquela cláusula, executando as declaracoes associadas. Se nenhum rótulo correspondente é encontrado, o programa procura pela cláusula opcionaldefault
e, se encontrada, transfere o controle àquela cláusula, executando as declarações associadas. Se nenhuma cláusuladefault
é encontrada, o programa continua a execução a partir da declaracao seguinte aoswitch
. Por convenção, a cláusuladefault
é a última, mas não é necessário que seja assim.
A instruçãobreak
associada a cada cláusulacase
, garante que o programa sairá doswitch
assim que a declaração correspondente for executada e que continuará a execução a partir da declaração seguinte aoswitch
. Se a declaraçãobreak
for omitida, o programa continua a execução a partir da próxima declaração dentro doswitch
.
Exemplo
No exemplo a seguir, setipofruta
for avaliada como"Banana"
, o programa faz a correspondência do valor com case"Banana"
e executa a declaração associada. Quando obreak
é encontrado, o programa termina oswitch
e executa a declaração seguinte ao condicional. Se obreak
fosse omitido, a declaração de case"Cereja"
também seria executada.
switch (tipofruta) { case "Laranja": console.log("O quilo da laranja está R$0,59.<br>"); break; case "Maçã": console.log("O quilo da maçã está R$0,32.<br>"); break; case "Banana": console.log("O quilo da banana está R$0,48.<br>"); break; case "Cereja": console.log("O quilo da cereja está R$3,00.<br>"); break; case "Manga": console.log("O quilo da manga está R$0,56.<br>"); break; case "Mamão": console.log("O quilo do mamão está R$2,23.<br>"); break; default: console.log("Desculpe, não temos " + tipofruta + ".<br>");}console.log("Gostaria de mais alguma coisa?<br>");
Declarações de Manipulação de Error
Você pode chamar uma exceção usando a declaraçãothrow
e manipulá-la usando a declaraçãotry...catch
.
- Declaração throw
- Declaração
try...catch
Tipos de exceções
Praticamente pode-se utilizarthrow
em qualquer objeto de JavaScript. Todavia, nem todos os objetos ativados porthrow
são igualmente criados. Embora seja bastante comum tratar números ou strings como erros usandothrow
, é frequentemente mais eficiente usar alguns tipos de exceções especificamente criadas para esses propósitos:
Declaração throw
Use a declaraçãothrow
para lançar uma exceção. Quando você lança uma exceção, você especifica a expressão contendo o valor a ser lançado:
throw expressão;
Você pode lançar qualquer expressão, não apenas expressões de um tipo específico. O código a seguir lança várias exceções de diferentes tipos:
throw "Error2"; // tipo stringthrow 42; // tipo numéricothrow true; // tipo booleanothrow { toString: function () { return "Eu sou um objeto!"; },};
**Nota:**Você pode especificar um objeto quando você lança uma exceção. Você pode então, referenciar as propriedades de um objeto no bloco catch. O exemplo a seguir cria um objeto myUserException do tipo userException e o usa em uma declaração throw.
// Cria um objeto do tipo UserExceptionfunction UserException(mensagem) { this.mensagem = mensagem; this.nome = "UserException";}// Realiza a conversão da exceção para uma string adequada quando usada como uma string.// (ex. pelo console de erro)UserException.prototype.toString = function () { return this.name + ': "' + this.message + '"';};// Cria uma instância de um tipo de objeto e lança elathrow new UserException("Valor muito alto");
Declaração try...catch
A declaraçãotry...catch
coloca um bloco de declarações em try, e especifica uma ou mais respostas para uma exceção lançada. Se uma exceção é lançada, a declaraçãotry...catch
pegá-a.
A declaraçãotry...catch
é composta por um blocotry
, que contém uma ou mais declarações, e zero ou mais blocoscatch
, contendo declarações que especificam o que fazer se uma exceção é lançada no blocotry
. Ou seja, você deseja que o blocotry
tenha sucesso, e se ele não tiver êxito, você quer o controle passado para o blococatch
. Se qualquer declaração do blocotry
(ou em uma função chamada dentro do blocotry
) lança uma exceção, o controle é imediatamente mudado para o blococatch
. Se nenhuma exceção é lançada no blocotry
, o blococatch
é ignorado. O blocofinally
executa após os blocostry
ecatch
executarem, mas antes das declarações seguinte ao blocotry...catch.
O exemplo a seguir usa a declaraçãotry...catch
. O exemplo chama uma função que recupera o nome de um mês no array com base no valor passado para a função. Se o valor não corresponde ao número de um mês (1-12), uma exceção é lançada com o valor "InvalidMonthNo
" e as declarações no blococatch
define a váriavelmonthName
paraunknown
.
function getMonthName(mo) { mo = mo - 1; // Ajusta o número do mês para o índice do array (1 = Jan, 12 = Dec) var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; if (months[mo]) { return months[mo]; } else { throw "InvalidMonthNo"; //lança uma palavra-chave aqui usada. }}try { // statements to try monthName = getMonthName(myMonth); // função poderia lançar uma exceção} catch (e) { monthName = "unknown"; logMyErrors(e); // passa a exceção para o manipulador de erro -> sua função local.}
O blococatch
Você pode usar um blococatch
para lidar com todas as exceções que podem ser geradas no blocotry
.
catch (catchID) { declaracoes}
O blococatch
específica um identificador (catchID
na sintaxe anterior), que contém o valor especificado pela declaraçãothrow
; você pode usar esse identificador para obter informações sobre a exceção que foi lançada. JavaScript cria este identificador quando o blococatch
é inserido; o identificador dura enquanto o blococatch
está em execução, depois que termina a execução do blococatch
, o identificador não estará mais disponível.
Por exemplo, o seguinte código lança uma exceção. Quando a exceção ocorre, o controle é transferido para o blococatch
.
try { throw "myException"; // lança uma exceção} catch (e) { // declarações de lidar com as exceções logMyErrors(e); // passar a exceção para o manipulador de erro}
O blocofinally
O blocofinally
contém instruções para executar após os blocostry
ecatch
, mas antes das declarações seguinte a declaraçãotry...catch
. O blocofinally
é executado com ou sem o lançamento de uma exceção. Se uma exceção é lançada, a declaração no blocofinally
executa, mesmo que nenhum blococatch
processe a exceção.
Você pode usar blocofinally
para deixar a falha de seu script agradável quando uma exceção ocorre; por exemplo, você pode precisar liberar um recurso que seu script tem amarrado. O exemplo a seguir abre um arquivo e então executa instruções que usam o arquivo (JavaScript do lado do servidor permite que você acesse arquivos). Se um exceção é lançada enquanto o arquivo é aberto, o blocofinally
fecha o arquivo antes do script falhar.
openMyFile();try { writeMyFile(theData); //Isso pode lançar um erro} catch (e) { handleError(e); // Se temos um erro temos que lidar com ele} finally { closeMyFile(); // Sempre feche o recurso}
Se o blocofinally
retornar um valor, este valor se torna o valor de toda a entradatry-catch-finally
, independente de quaisquer declarações de retorno nos blocostry
ecatch
:
function f() { try { console.log(0); throw "bogus"; } catch (e) { console.log(1); return true; // essa declaração de retorno é suspensa // até que o bloco finally seja concluído console.log(2); // não executa } finally { console.log(3); return false; // substitui o "return" anterior console.log(4); // não executa } // "return false" é executado agora console.log(5); // não executa}f(); // exibe 0, 1, 3; retorna false
Substituições de valores de retorno pelo blocofinally
também se aplica a exceções lançadas ou re-lançadas dentro do blococatch
:
function f() { try { throw "bogus"; } catch (e) { console.log('captura interior "falso"'); throw e; // essa instrução throw é suspensa até // que o bloco finally seja concluído } finally { return false; // substitui "throw" anterior } // "return false" é executado agora}try { f();} catch (e) { // isto nunca é executado porque o throw dentro // do catch é substituído // pelo return no finally console.log('captura exterior "falso"');}// SAIDA// captura interior "falso"
Aninhando declarações try...catch
Você pode aninhar uma ou mais declaraçõestry...catch
. Se uma declaraçãotry...catch
interior não tem um blococatch
, o delimitador do blocotry...catch
da declaraçãocatch
é verificado por uma correspondência.
Utilizando objetos deerro
Dependendo do tipo de erro, você pode ser capaz de usar as propriedade 'name' e 'message' para pegar uma mensagem mais refinada. A propriedade 'name' fornece a classe geral de erro (ex., 'DOMException' ou 'Error'), enquanto 'message' geralmente oferece uma mensagem mais sucinta do que se poderia obter através da conversão do objeto de erro para uma string.
Se você está lançando suas próprias exceções, a fim de tirar proveito dessas propriedades (como o seu bloco catch não discrimina entre suas próprias exceções e as exceções próprias da linguagem), você pode usar o construtor Error. Por exemplo:
function doSomethingErrorProne () { if (ourCodeMakesAMistake()) { throw (new Error('A mensagem')); } else { doSomethingToGetAJavascriptError(); }}....try { doSomethingErrorProne();}catch (e) { console.log(e.name); // exibe 'Error' console.log(e.message); // exibe 'A mensagem' ou uma mensagem de erro em JavaScript}
Promises
Começando com ECMAScript 6, JavaScript ganha suporte para objetosPromise
que lhe permite controlar o fluxo de operações diferídas e assíncronas.
Uma Promise assume um destes estados:
- pending: estado inicial, não
fulfilled
, ourejected
. - fulfilled: operação bem sucedida.
- rejected: operação falha.
- settled: A Promise é fulfilled ou rejected, mas não pending.
Carregando uma imagem com XHR
Um exemplo simples usando Promise eXMLHttpRequest
para carregar uma imagem disponível no repositório MDN GitHubpromise-test. Você também podevê-lo executando. Cada etapa está comentada o que lhe permite seguir de perto a arquitetura Promise e arquitetura XHR. Aqui está a versão não comentada, mostrando o fluxoPromise
para que você possa ter uma ideia:
function imgLoad(url) { return new Promise(function (resolve, reject) { var request = new XMLHttpRequest(); request.open("GET", url); request.responseType = "blob"; request.onload = function () { if (request.status === 200) { resolve(request.response); } else { reject( Error( "Image didn't load successfully; error code:" + request.statusText, ), ); } }; request.onerror = function () { reject(Error("There was a network error.")); }; request.send(); });}
Para uma informação mais detalhada, consulte a página de referênciaPromise
.