{"id":11297,"date":"2023-09-15T09:05:08","date_gmt":"2023-09-15T12:05:08","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=11297"},"modified":"2023-09-15T09:09:00","modified_gmt":"2023-09-15T12:09:00","slug":"if-javascript","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/","title":{"rendered":"If JavaScript: O que \u00e9 e como funciona?"},"content":{"rendered":"\n<p>Nas nossas vidas, diariamente tomamos decis\u00f5es baseadas em condi\u00e7\u00f5es. Por exemplo: &#8220;Se estiver chovendo, vou levar um guarda-chuva. Caso contr\u00e1rio, n\u00e3o vou levar&#8221;. Na programa\u00e7\u00e3o, tamb\u00e9m <strong>temos essa necessidade de tomar decis\u00f5es com base em condi\u00e7\u00f5es, e \u00e9 aqui que entra a estrutura condicional if JavaScript.<\/strong><\/p>\n\n\n\n<p>Uma <a href=\"https:\/\/www.ibm.com\/docs\/pt-br\/spss-statistics\/saas?topic=variables-using-conditional-expressions\">estrutura condicional<\/a> \u00e9 uma instru\u00e7\u00e3o que permite ao c\u00f3digo executar diferentes a\u00e7\u00f5es dependendo de se uma condi\u00e7\u00e3o \u00e9 verdadeira ou falsa. Em portugu\u00eas, <strong><code>\"if\"<\/code><\/strong> significa &#8220;se&#8221;.&nbsp;<\/p>\n\n\n\n<p>Portanto, <strong>quando usamos <code>\"if\"<\/code> em programa\u00e7\u00e3o<\/strong>, estamos basicamente dizendo ao computador: &#8220;Se esta condi\u00e7\u00e3o for verdadeira, fa\u00e7a isso. Caso contr\u00e1rio, fa\u00e7a aquilo&#8221;.<\/p>\n\n\n\n<p>Acompanhe a leitura e saiba mais sobre esse e outros assuntos, ou visite nosso <a href=\"https:\/\/www.homehost.com.br\/blog\/\">blog<\/a>.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#O_que_e_If_JavaScript\" title=\"O que \u00e9 If JavaScript?\">O que \u00e9 If JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Sintaxe_e_estrutura_do_if_JavaScript\" title=\"Sintaxe e estrutura do if JavaScript\">Sintaxe e estrutura do if JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Sintaxe_basica\" title=\"Sintaxe b\u00e1sica\">Sintaxe b\u00e1sica<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#If-Else\" title=\"If-Else\">If-Else<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Else_If\" title=\"Else If\">Else If<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Operadores_de_comparacao_e_logicos\" title=\"Operadores de compara\u00e7\u00e3o e l\u00f3gicos\">Operadores de compara\u00e7\u00e3o e l\u00f3gicos<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#1_Operadores_de_comparacao\" title=\"1. Operadores de compara\u00e7\u00e3o\">1. Operadores de compara\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#_Igualdade\" title=\"`==` (Igualdade)\">`==` (Igualdade)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#_Estrita_Igualdade\" title=\"`===` (Estrita Igualdade)\">`===` (Estrita Igualdade)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#_Desigualdade\" title=\"`!=` (Desigualdade)\">`!=` (Desigualdade)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#_Estrita_Desigualdade\" title=\"`!==` (Estrita Desigualdade)\">`!==` (Estrita Desigualdade)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#%3E_Maior_que_Maior_ou_igual_a\" title=\"`&gt;` (Maior que), `&lt;` (Menor que), `&gt;=` (Maior ou igual a), `&lt;=` (Menor ou igual a)\">`&gt;` (Maior que), `&lt;` (Menor que), `&gt;=` (Maior ou igual a), `&lt;=` (Menor ou igual a)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#2_Operadores_Logicos\" title=\"2. Operadores L\u00f3gicos\">2. Operadores L\u00f3gicos<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Ternario_uma_alternativa_ao_%E2%80%9Cif%E2%80%9D_JavaScript\" title=\"Tern\u00e1rio: uma alternativa ao &#8220;if&#8221; JavaScript\">Tern\u00e1rio: uma alternativa ao &#8220;if&#8221; JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Exemplo_basico_usando_if-else\" title=\"Exemplo b\u00e1sico usando `if-else`\">Exemplo b\u00e1sico usando `if-else`<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Usando_o_operador_ternario\" title=\"Usando o operador tern\u00e1rio\">Usando o operador tern\u00e1rio<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Quando_usar_o_operador_ternario\" title=\"Quando usar o operador tern\u00e1rio?\">Quando usar o operador tern\u00e1rio?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Testando_em_ambiente_adequado\" title=\"Testando em ambiente adequado\">Testando em ambiente adequado<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Boas_praticas_ao_usar_%E2%80%9Cif%E2%80%9D_no_JavaScript\" title=\"Boas pr\u00e1ticas ao usar &#8220;if&#8221; no JavaScript\">Boas pr\u00e1ticas ao usar &#8220;if&#8221; no JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#1_Evitando_aninhamentos_excessivos\" title=\"1. Evitando aninhamentos excessivos\">1. Evitando aninhamentos excessivos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#2_Utilizacao_de_funcoes_e_modularizacao\" title=\"2. Utiliza\u00e7\u00e3o de fun\u00e7\u00f5es e modulariza\u00e7\u00e3o\">2. Utiliza\u00e7\u00e3o de fun\u00e7\u00f5es e modulariza\u00e7\u00e3o<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#%E2%80%9CSwitch%E2%80%9D_uma_alternativa_em_casos_especificos\" title=\"&#8220;Switch&#8221;: uma alternativa em casos espec\u00edficos\">&#8220;Switch&#8221;: uma alternativa em casos espec\u00edficos<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Sintaxe_basica-2\" title=\"Sintaxe b\u00e1sica\">Sintaxe b\u00e1sica<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Exemplo_pratico\" title=\"Exemplo pr\u00e1tico\">Exemplo pr\u00e1tico<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Por_que_usar_o_%E2%80%9Cbreak%E2%80%9D\" title=\"Por que usar o &#8220;break&#8221;?\">Por que usar o &#8220;break&#8221;?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#O_bloco_%E2%80%9Cdefault%E2%80%9D\" title=\"O bloco &#8220;default&#8221;\">O bloco &#8220;default&#8221;<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#Conclusao\" title=\"Conclus\u00e3o\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_If_JavaScript\"><\/span>O que \u00e9 If JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>A estrutura <strong><code>\"if\"<\/code><\/strong> ajuda o programa a decidir qual sugest\u00e3o dar. <\/strong>Imagine que voc\u00ea est\u00e1 construindo um site que d\u00e1 sugest\u00f5es de roupas com base na temperatura. Se estiver muito frio, portanto, voc\u00ea pode sugerir um casaco. Se estiver quente, ent\u00e3o, talvez uma camiseta seja mais apropriada.<\/p>\n\n\n\n<p>Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let temperatura = 25;&nbsp; \/\/ Esta \u00e9 a temperatura em graus Celsius\n\nif (temperatura &lt; 10) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Est\u00e1 muito frio, use um casaco!\");\n\n} else if (temperatura &gt;= 10 &amp;&amp; temperatura &lt; 25) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Est\u00e1 fresco, uma camisa de manga longa est\u00e1 boa.\");\n\n} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Est\u00e1 quente, use uma camiseta!\");\n\n}<\/code><\/pre>\n\n\n\n<p>No exemplo acima:<\/p>\n\n\n\n<p>A temperatura \u00e9 definida como 25 graus.<\/p>\n\n\n\n<p>A primeira condi\u00e7\u00e3o <code>(temperatura &lt; 10)<\/code> verifica se est\u00e1 muito frio. Se for verdade, sugere um casaco.<\/p>\n\n\n\n<p>Se a primeira condi\u00e7\u00e3o n\u00e3o for verdadeira, passa para a segunda <code>(temperatura &gt;= 10 &amp;&amp; temperatura &lt; 25)<\/code>. Esta verifica se est\u00e1 fresco, e sugere uma camisa de manga longa se for verdade.<\/p>\n\n\n\n<p>Se nenhuma das condi\u00e7\u00f5es anteriores for verdadeira, o programa simplesmente sugere uma camiseta.<\/p>\n\n\n\n<p><strong>Para testar o c\u00f3digo acima, voc\u00ea pode copi\u00e1-lo e col\u00e1-lo no console do navegador ou em qualquer ambiente de desenvolvimento JavaScript.<\/strong> Experimente mudar o valor da temperatura e veja as diferentes mensagens que o programa exibe!<\/p>\n\n\n\n<p>Esperamos, ent\u00e3o, que este exemplo tenha ajudado a esclarecer o conceito de <strong><code>\"if\"<\/code><\/strong> na programa\u00e7\u00e3o. No pr\u00f3ximo t\u00f3pico, vamos mergulhar mais fundo na sintaxe e estrutura do <strong><code>\"if\"<\/code><\/strong> em JavaScript!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sintaxe_e_estrutura_do_if_JavaScript\"><\/span>Sintaxe e estrutura do if JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>A estrutura condicional <code>\"if\"<\/code> \u00e9 uma das ferramentas mais b\u00e1sicas e essenciais em qualquer linguagem de programa\u00e7\u00e3o.<\/strong> Ela permite, assim, que seu c\u00f3digo tome decis\u00f5es com base em condi\u00e7\u00f5es. No JavaScript, o uso dessa estrutura \u00e9 bastante intuitivo e segue uma l\u00f3gica semelhante ao nosso modo de pensar. Vamos entender isso passo a passo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sintaxe_basica\"><\/span>Sintaxe b\u00e1sica<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Aqui est\u00e1 a estrutura b\u00e1sica de um `if`:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (condi\u00e7\u00e3o) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo a ser executado se a condi\u00e7\u00e3o for verdadeira\n\n}<\/code><\/pre>\n\n\n\n<p>Nesse esquema:<\/p>\n\n\n\n<p><strong>Condi\u00e7\u00e3o:<\/strong> \u00c9 a express\u00e3o que ser\u00e1 avaliada. Se essa express\u00e3o for <code><strong>`true` (verdadeira)<\/strong><\/code>, o c\u00f3digo dentro das chaves <strong><code>`{ }` <\/code><\/strong>ser\u00e1 executado.<\/p>\n\n\n\n<p>Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let chuva = true;\n\nif (chuva) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Melhor levar um guarda-chuva!\");\n\n}<\/code><\/pre>\n\n\n\n<p>Neste caso, se a vari\u00e1vel <strong><code>`chuva`<\/code><\/strong> for verdadeira (ou seja, se estiver chovendo), a mensagem <code><strong>\"Melhor levar um guarda-chuva!\"<\/strong><\/code> ser\u00e1 exibida no console.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"If-Else\"><\/span>If-Else<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>E se quisermos <strong>ter uma a\u00e7\u00e3o alternativa para quando a condi\u00e7\u00e3o n\u00e3o for atendida<\/strong>? A\u00ed entra o <code><strong>`else`<\/strong><\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (condi\u00e7\u00e3o) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo se a condi\u00e7\u00e3o for verdadeira\n\n} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo se a condi\u00e7\u00e3o for falsa\n\n}<\/code><\/pre>\n\n\n\n<p>Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let chuva = false;\n\nif (chuva) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Melhor levar um guarda-chuva!\");\n\n} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Pode deixar o guarda-chuva em casa!\");\n\n}<\/code><\/pre>\n\n\n\n<p>Nesse caso, como <strong><code>`chuva`<\/code><\/strong> \u00e9 falso, a mensagem <strong><code>\"Pode deixar o guarda-chuva em casa!\"<\/code><\/strong> ser\u00e1 mostrada.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Else_If\"><\/span>Else If<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>E se tivermos m\u00faltiplas condi\u00e7\u00f5es a verificar?<\/strong> O <strong><code>`else if`<\/code><\/strong> entra em cena:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (condi\u00e7\u00e3o1) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo se a condi\u00e7\u00e3o1 for verdadeira\n\n} else if (condi\u00e7\u00e3o2) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo se a condi\u00e7\u00e3o2 for verdadeira\n\n} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo se nenhuma das condi\u00e7\u00f5es anteriores for verdadeira\n\n}<\/code><\/pre>\n\n\n\n<p>Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let temperatura = 25;\n\nif (temperatura &lt; 20) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Est\u00e1 um pouco frio.\");\n\n} else if (temperatura &lt; 30) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Clima agrad\u00e1vel!\");\n\n} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Est\u00e1 bastante quente!\");\n\n}<\/code><\/pre>\n\n\n\n<p>Neste caso, como a temperatura \u00e9 25, a mensagem <code><strong>\"Clima agrad\u00e1vel!\"<\/strong><\/code> ser\u00e1 exibida.<\/p>\n\n\n\n<p><strong>A estrutura <strong><code>\"if\"<\/code><\/strong> permite que o c\u00f3digo reaja de maneira diferente dependendo de certas condi\u00e7\u00f5es, tornando os programas din\u00e2micos e interativos.<\/strong> A melhor forma de aprender \u00e9 praticar, ent\u00e3o tente criar suas pr\u00f3prias condi\u00e7\u00f5es e veja o que acontece!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Operadores_de_comparacao_e_logicos\"><\/span>Operadores de compara\u00e7\u00e3o e l\u00f3gicos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Ao trabalharmos com estruturas condicionais, como o <strong><code>\"if\"<\/code><\/strong>, \u00e9 fundamental entender os operadores que nos ajudam a criar condi\u00e7\u00f5es.<\/strong> Esses operadores nos permitem fazer compara\u00e7\u00f5es entre valores e tomar decis\u00f5es baseadas em suas rela\u00e7\u00f5es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Operadores_de_comparacao\"><\/span>1. Operadores de compara\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Os operadores de compara\u00e7\u00e3o <strong>comparam dois valores e retornam um <a href=\"https:\/\/www.ibm.com\/docs\/pt-br\/db2\/11.5?topic=list-boolean-values\">valor booleano<\/a><\/strong>: verdadeiro <strong><code>(`true`)<\/code><\/strong> ou falso <code><strong>(`false`)<\/strong><\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Igualdade\"><\/span>`==` (Igualdade)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Compara se os valores s\u00e3o iguais<\/strong>, mas n\u00e3o necessariamente do mesmo tipo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numero = '5';\n\n&nbsp;&nbsp;&nbsp;&nbsp;if(numero == 5) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Os valores s\u00e3o iguais!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<p>Neste exemplo, mesmo <strong><code>`numero`<\/code><\/strong> sendo uma <a href=\"https:\/\/www.homehost.com.br\/blog\/pythondjango\/string-python\/\">string<\/a>, a compara\u00e7\u00e3o \u00e9 verdadeira.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Estrita_Igualdade\"><\/span>`===` (Estrita Igualdade)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Compara se os valores e seus tipos s\u00e3o iguais<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numero = '5';\n\n&nbsp;&nbsp;&nbsp;&nbsp;if(numero === 5) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Os valores e os tipos s\u00e3o iguais!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Os valores ou os tipos s\u00e3o diferentes!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<p>Aqui, a condi\u00e7\u00e3o ser\u00e1 falsa, pois o tipo de<code><strong> `numero` <\/strong><\/code>\u00e9 <a href=\"https:\/\/www.alura.com.br\/artigos\/strings-com-javascript-o-que-sao-e-como-manipular\">string<\/a> e o tipo do n\u00famero 5 \u00e9 number.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Desigualdade\"><\/span>`!=` (Desigualdade)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Verifica se os valores s\u00e3o diferentes<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let cor = 'verde';\n\n&nbsp;&nbsp;&nbsp;&nbsp;if(cor != 'azul') {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"A cor n\u00e3o \u00e9 azul.\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"_Estrita_Desigualdade\"><\/span>`!==` (Estrita Desigualdade)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Compara se os valores e seus tipos s\u00e3o diferentes.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let idade = '18';\n\n&nbsp;&nbsp;&nbsp;&nbsp;if(idade !== 18) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"A idade n\u00e3o \u00e9 igual a 18 ou os tipos s\u00e3o diferentes.\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%3E_Maior_que_Maior_ou_igual_a\"><\/span>`&gt;` (Maior que), `&lt;` (Menor que), `&gt;=` (Maior ou igual a), `&lt;=` (Menor ou igual a)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>Utilizados para compara\u00e7\u00f5es num\u00e9ricas.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let pontuacao = 90;\n\n&nbsp;&nbsp;&nbsp;&nbsp;if(pontuacao &gt;= 100) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Voc\u00ea alcan\u00e7ou a pontua\u00e7\u00e3o m\u00e1xima!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Continue tentando!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Operadores_Logicos\"><\/span>2. Operadores L\u00f3gicos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Os operadores l\u00f3gicos nos permitem fazer <strong>condi\u00e7\u00f5es mais complexas<\/strong>, combinando diversas compara\u00e7\u00f5es.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">`&amp;&amp;` (E)<\/h4>\n\n\n\n<p><strong>Todas as condi\u00e7\u00f5es precisam ser verdadeiras<\/strong> para que o resultado seja verdadeiro.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let idade = 25;\n\n&nbsp;&nbsp;&nbsp;&nbsp;let possuiCarteira = true;\n\n&nbsp;&nbsp;&nbsp;&nbsp;if(idade &gt;= 18 &amp;&amp; possuiCarteira) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Voc\u00ea pode dirigir!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">`||` (OU)<\/h4>\n\n\n\n<p><strong>Pelo menos uma das condi\u00e7\u00f5es precisa ser verdadeira<\/strong> para que o resultado seja verdadeiro.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let gostaDeCafe = true;\n\n&nbsp;&nbsp;&nbsp;&nbsp;let gostaDeCha = false;\n\n&nbsp;&nbsp;&nbsp;&nbsp;if(gostaDeCafe || gostaDeCha) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Voc\u00ea gosta de alguma bebida quente!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">`!` (N\u00c3O)<\/h4>\n\n\n\n<p><strong>Inverte o valor booleano.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let gostaDePepino = false;\n\n&nbsp;&nbsp;&nbsp;&nbsp;if(!gostaDePepino) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Voc\u00ea n\u00e3o gosta de pepino.\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;}<\/code><\/pre>\n\n\n\n<p><strong>Para testar os c\u00f3digos, voc\u00ea pode usar qualquer ambiente de desenvolvimento JavaScript<\/strong>, como o console do navegador, um editor de c\u00f3digo como o VS Code ou plataformas online como o JSFiddle ou CodePen. Ao rodar os exemplos, voc\u00ea ver\u00e1 os resultados impressos na tela.<\/p>\n\n\n\n<p>Considere, tamb\u00e9m, aprender algumas estruturas do <a href=\"https:\/\/www.homehost.com.br\/blog\/pythondjango\/o-que-e-python\/\">Python<\/a>, caso esteja implementando aplica\u00e7\u00f5es com essa linguagem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Ternario_uma_alternativa_ao_%E2%80%9Cif%E2%80%9D_JavaScript\"><\/span>Tern\u00e1rio: uma alternativa ao &#8220;if&#8221; JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Quando estamos programando, frequentemente nos deparamos com situa\u00e7\u00f5es em que precisamos tomar decis\u00f5es simples baseadas em uma condi\u00e7\u00e3o. <strong>O operador tern\u00e1rio \u00e9 uma ferramenta que nos permite fazer isso de uma maneira mais concisa<\/strong>, quando comparado ao tradicional <code><strong>`if-else`<\/strong><\/code>. Vamos entender melhor.<\/p>\n\n\n\n<p>O operador tern\u00e1rio \u00e9 uma forma compacta de executar um comando <strong><code>`if-else`<\/code><\/strong>. Chama-se &#8220;tern\u00e1rio&#8221; porque tem tr\u00eas partes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>A condi\u00e7\u00e3o a ser avaliada;<\/li>\n\n\n\n<li>O que fazer se a condi\u00e7\u00e3o for verdadeira;<\/li>\n\n\n\n<li>O que fazer se a condi\u00e7\u00e3o for falsa.<\/li>\n<\/ol>\n\n\n\n<p>A estrutura geral se parece com isto, por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>condi\u00e7\u00e3o ? a\u00e7\u00e3oSeVerdadeiro : a\u00e7\u00e3oSeFalso;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exemplo_basico_usando_if-else\"><\/span>Exemplo b\u00e1sico usando `if-else`<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vamos pegar um exemplo pr\u00e1tico. Suponhamos que queremos <strong>verificar se um n\u00famero \u00e9 par ou \u00edmpar, por exemplo:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numero = 5;\n\nlet resultado;\n\nif (numero % 2 === 0) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;resultado = \"par\";\n\n} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;resultado = \"\u00edmpar\";\n\n}\n\nconsole.log(resultado); \/\/ O resultado ser\u00e1 \"\u00edmpar\"<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Usando_o_operador_ternario\"><\/span>Usando o operador tern\u00e1rio<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>let numero = 5;\n\nlet resultado = numero % 2 === 0 ? \"par\" : \"\u00edmpar\";\n\nconsole.log(resultado); \/\/ O resultado ser\u00e1 \"\u00edmpar\"<\/code><\/pre>\n\n\n\n<p>Como voc\u00ea pode ver, <strong>o operador tern\u00e1rio nos permitiu condensar o c\u00f3digo,<\/strong> tornando-o mais direto e leg\u00edvel em situa\u00e7\u00f5es simples.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Quando_usar_o_operador_ternario\"><\/span>Quando usar o operador tern\u00e1rio?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>O operador tern\u00e1rio \u00e9 \u00f3timo para decis\u00f5es simples, mas deve ser usado com cautela.<\/strong> Em situa\u00e7\u00f5es onde h\u00e1 m\u00faltiplas condi\u00e7\u00f5es ou a l\u00f3gica \u00e9 mais complexa, o uso do <code><strong>`if-else`<\/strong><\/code> tradicional (ou at\u00e9 mesmo <a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/switch-javascript\/\">`switch`<\/a>) pode ser mais apropriado para manter o c\u00f3digo leg\u00edvel.<\/p>\n\n\n\n<p class=\"has-pale-cyan-blue-background-color has-background has-medium-font-size\"><strong>Dica:<\/strong> Se voc\u00ea sente que seu operador tern\u00e1rio est\u00e1 ficando muito complicado ou dif\u00edcil de ler, provavelmente \u00e9 melhor optar por uma estrutura condicional mais extensa.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Testando_em_ambiente_adequado\"><\/span>Testando em ambiente adequado<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Para testar os c\u00f3digos acima e brincar com o operador tern\u00e1rio, <strong>voc\u00ea pode usar qualquer navegador:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Clique com o bot\u00e3o direito na p\u00e1gina;<\/li>\n\n\n\n<li>Selecione &#8220;Inspecionar&#8221; ou &#8220;Inspecionar Elemento&#8221;;<\/li>\n\n\n\n<li>V\u00e1 para a aba &#8220;Console&#8221;;<\/li>\n\n\n\n<li>Cole o c\u00f3digo e pressione Enter.<\/li>\n<\/ol>\n\n\n\n<p>Voc\u00ea ver\u00e1 o resultado do c\u00f3digo impresso no console, permitindo que voc\u00ea veja o operador tern\u00e1rio em a\u00e7\u00e3o.<\/p>\n\n\n\n<p>O operador tern\u00e1rio, portanto, \u00e9 uma ferramenta realmente \u00fatil para tornar seu c\u00f3digo JavaScript mais conciso em situa\u00e7\u00f5es de decis\u00f5es simples. Use-o com sabedoria e sempre priorize a legibilidade do c\u00f3digo!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Boas_praticas_ao_usar_%E2%80%9Cif%E2%80%9D_no_JavaScript\"><\/span>Boas pr\u00e1ticas ao usar &#8220;if&#8221; no JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Ao programar, \u00e9 vital n\u00e3o s\u00f3 fazer algo funcionar, mas tamb\u00e9m garantir que o c\u00f3digo seja leg\u00edvel e manuten\u00edvel.<\/strong> Isso \u00e9 especialmente verdadeiro quando se trata de estruturas condicionais como o <code><strong>\"if\"<\/strong><\/code>.&nbsp;<\/p>\n\n\n\n<p>Abaixo, abordaremos algumas boas pr\u00e1ticas a serem consideradas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Evitando_aninhamentos_excessivos\"><\/span>1. Evitando aninhamentos excessivos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Uma pr\u00e1tica comum, mas nem sempre ben\u00e9fica, <strong>\u00e9 aninhar muitos blocos <code>\"if\"<\/code><\/strong>. Isso pode tornar o c\u00f3digo confuso. Considere, por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (usuarioLogado) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;if (usuario.temPermissao) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!usuario.ultimoAcesso &gt; 30) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mostrarConteudo();\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Seu \u00faltimo acesso foi h\u00e1 muito tempo!');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Usu\u00e1rio sem permiss\u00e3o!');\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;alert('Por favor, fa\u00e7a login!');\n\n}<\/code><\/pre>\n\n\n\n<p>Aqui, temos tr\u00eas n\u00edveis de aninhamento. Uma maneira de simplificar \u00e9 usar retornos antecipados ou continuando a l\u00f3gica sem entrar em n\u00edveis mais profundos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (!usuarioLogado) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;alert('Por favor, fa\u00e7a login!');\n\n&nbsp;&nbsp;&nbsp;&nbsp;return;\n\n}\n\nif (!usuario.temPermissao) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;alert('Usu\u00e1rio sem permiss\u00e3o!');\n\n&nbsp;&nbsp;&nbsp;&nbsp;return;\n\n}\n\nif (usuario.ultimoAcesso &gt; 30) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;alert('Seu \u00faltimo acesso foi h\u00e1 muito tempo!');\n\n&nbsp;&nbsp;&nbsp;&nbsp;return;\n\n}\n\nmostrarConteudo();<\/code><\/pre>\n\n\n\n<p>Isso torna o c\u00f3digo mais plano e, consequentemente, mais f\u00e1cil de ler e manter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Utilizacao_de_funcoes_e_modularizacao\"><\/span>2. Utiliza\u00e7\u00e3o de fun\u00e7\u00f5es e modulariza\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Evite colocar muita l\u00f3gica dentro de um \u00fanico bloco <code><strong>\"if\"<\/strong><\/code>. Se o bloco contiver muitas opera\u00e7\u00f5es, considere mover essa l\u00f3gica para uma fun\u00e7\u00e3o separada.<\/p>\n\n\n\n<p>Por exemplo, se voc\u00ea tem:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (usuario.ehValido()) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;let desconto = calcularDesconto(usuario.idade);\n\n&nbsp;&nbsp;&nbsp;&nbsp;aplicarDesconto(desconto);\n\n&nbsp;&nbsp;&nbsp;&nbsp;atualizarInterface();\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ ... mais c\u00f3digos\n\n}\n\nVoc\u00ea pode refatorar o bloco interno para:\n\nif (usuario.ehValido()) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;aplicarBeneficiosDeUsuario(usuario);\n\n}\n\nfunction aplicarBeneficiosDeUsuario(usuario) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;let desconto = calcularDesconto(usuario.idade);\n\n&nbsp;&nbsp;&nbsp;&nbsp;aplicarDesconto(desconto);\n\n&nbsp;&nbsp;&nbsp;&nbsp;atualizarInterface();\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/\/ ... mais c\u00f3digos\n\n}<\/code><\/pre>\n\n\n\n<p>Isso n\u00e3o apenas torna o c\u00f3digo principal mais limpo, mas tamb\u00e9m torna a l\u00f3gica reutiliz\u00e1vel e test\u00e1vel.<\/p>\n\n\n\n<p>Ao seguir essas boas pr\u00e1ticas, portanto, seu c\u00f3digo se tornar\u00e1 mais limpo, mais leg\u00edvel e mais f\u00e1cil de manter. Lembre-se sempre de que o c\u00f3digo \u00e9 escrito tanto para m\u00e1quinas quanto para humanos. Mantenha-o claro e compreens\u00edvel para o benef\u00edcio de todos os desenvolvedores que possam trabalhar nele no futuro!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E2%80%9CSwitch%E2%80%9D_uma_alternativa_em_casos_especificos\"><\/span>&#8220;Switch&#8221;: uma alternativa em casos espec\u00edficos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Ao trabalhar com JavaScript, muitas vezes nos deparamos com situa\u00e7\u00f5es em que precisamos verificar m\u00faltiplas condi\u00e7\u00f5es.<\/strong> Enquanto o <code><strong>\"if\"<\/strong><\/code> e o <code><strong>\"else if\"<\/strong><\/code> s\u00e3o extremamente \u00fateis, eles podem se tornar verbosos e um pouco confusos em determinados contextos. \u00c9 a\u00ed que o <strong><code>\"switch\"<\/code><\/strong> entra em cena como uma alternativa mais limpa.<\/p>\n\n\n\n<p>O <strong><code>\"switch\"<\/code><\/strong> \u00e9 uma estrutura condicional que permite verificar m\u00faltiplas condi\u00e7\u00f5es (ou casos) de forma mais organizada.&nbsp;<\/p>\n\n\n\n<p>Ele \u00e9 especialmente \u00fatil quando se tem uma vari\u00e1vel que pode ter muitos valores diferentes e voc\u00ea quer executar diferentes blocos de c\u00f3digo com base nesses valores.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sintaxe_basica-2\"><\/span>Sintaxe b\u00e1sica<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Aqui est\u00e1 a estrutura b\u00e1sica de um <strong><code>\"switch\"<\/code><\/strong>:<\/p>\n\n\n\n<p><code>switch (express\u00e3o) {<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>case valor1:\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo a ser executado se express\u00e3o === valor1\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\n\n&nbsp;&nbsp;&nbsp;&nbsp;case valor2:\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo a ser executado se express\u00e3o === valor2\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\n\n&nbsp;&nbsp;&nbsp;&nbsp;default:\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ c\u00f3digo a ser executado se a express\u00e3o n\u00e3o for igual a nenhum dos valores acima\n\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Exemplo_pratico\"><\/span>Exemplo pr\u00e1tico<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Imagine que voc\u00ea est\u00e1 <strong>construindo um programa que fornece sauda\u00e7\u00f5es<\/strong> com base no momento do dia:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let momentoDoDia = \"tarde\";\n\nswitch (momentoDoDia) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;case \"manh\u00e3\":\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Bom dia!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\n\n&nbsp;&nbsp;&nbsp;&nbsp;case \"tarde\":\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Boa tarde!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\n\n&nbsp;&nbsp;&nbsp;&nbsp;case \"noite\":\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Boa noite!\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;\n\n&nbsp;&nbsp;&nbsp;&nbsp;default:\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Ol\u00e1!\");\n\n}<\/code><\/pre>\n\n\n\n<p>Ao executar o c\u00f3digo acima, o resultado seria &#8220;Boa tarde!&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Por_que_usar_o_%E2%80%9Cbreak%E2%80%9D\"><\/span>Por que usar o &#8220;break&#8221;?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>O <code><strong>\"break\"<\/strong><\/code> \u00e9 importante para garantir que, uma vez que um &#8220;<code><strong>case<\/strong><\/code>&#8221; corresponda e seu c\u00f3digo seja executado, o programa saia do <strong><code>\"switch\"<\/code><\/strong> e n\u00e3o execute os &#8220;<code><strong>cases<\/strong><\/code>&#8221; subsequentes. Se voc\u00ea esquecer de incluir o &#8220;<strong><code>break<\/code><\/strong>&#8220;, todos os &#8220;<code><strong>cases<\/strong><\/code>&#8221; ap\u00f3s o &#8220;<code><strong>case<\/strong><\/code>&#8221; correspondente tamb\u00e9m ser\u00e3o executados.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_bloco_%E2%80%9Cdefault%E2%80%9D\"><\/span>O bloco &#8220;default&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>O &#8220;<strong><code>default<\/code><\/strong>&#8221; \u00e9 opcional, mas \u00e9 uma boa pr\u00e1tica inclu\u00ed-lo. Ele funciona como um &#8220;<code><strong>else<\/strong><\/code>&#8221; em uma estrutura <code><strong>\"if\"<\/strong><\/code>, sendo executado quando nenhum dos <code><strong>\"cases\"<\/strong><\/code> anteriores corresponde.<\/p>\n\n\n\n<p>O <strong><code>\"switch\"<\/code><\/strong> \u00e9 uma ferramenta poderosa que ajuda a manter o c\u00f3digo limpo e organizado quando se verifica m\u00faltiplas condi\u00e7\u00f5es. Entretanto, \u00e9 fundamental entender quando e como us\u00e1-lo adequadamente, evitando complica\u00e7\u00f5es desnecess\u00e1rias e tornando seu c\u00f3digo mais leg\u00edvel.<\/p>\n\n\n\n<p>Conhe\u00e7a outras estruturas do JavaScript que possam ser \u00fateis nos seus projetos futuros:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/filter-javascript\/\">filter<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/map-javascript\/\">map<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/reduce-javascript\/\">reduce<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/array-javascript\/\">array<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/for-javascript\/\">for<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/\">como mudar background JavaScript<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/\">print div JavaScript<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As estruturas condicionais, <strong>particularmente o <code><strong>\"if\"<\/strong><\/code>, s\u00e3o pilares da programa\u00e7\u00e3o, permitindo que os programas tomem decis\u00f5es baseadas em diferentes condi\u00e7\u00f5es.<\/strong> Assim como as decis\u00f5es na vida real, a correta implementa\u00e7\u00e3o de condi\u00e7\u00f5es em programa\u00e7\u00e3o determina a efic\u00e1cia e efici\u00eancia de um programa.&nbsp;<\/p>\n\n\n\n<p>Portanto, compreender completamente o <strong>&#8220;if&#8221;<\/strong> JavaScript, juntamente com as boas pr\u00e1ticas associadas, \u00e9 crucial para qualquer desenvolvedor que deseja escrever c\u00f3digo limpo, leg\u00edvel e manuten\u00edvel.<\/p>\n\n\n\n<p>Leia tamb\u00e9m: <a href=\"https:\/\/www.homehost.com.br\/blog\/wp-admin\/post.php?post=10720&amp;action=edit\">Usando JavaScript .length para medir propriedades<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nas nossas vidas, diariamente tomamos decis\u00f5es baseadas em condi\u00e7\u00f5es. Por exemplo: &#8220;Se estiver chovendo, vou levar um guarda-chuva. Caso contr\u00e1rio, n\u00e3o vou levar&#8221;. Na programa\u00e7\u00e3o, tamb\u00e9m temos essa necessidade de tomar decis\u00f5es com base em condi\u00e7\u00f5es, e \u00e9 aqui que entra a estrutura condicional if JavaScript. Uma estrutura condicional \u00e9 uma instru\u00e7\u00e3o que permite ao [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":11315,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6585],"tags":[],"class_list":["post-11297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>If JavaScript: O que \u00e9 e como funciona? | Homehost<\/title>\n<meta name=\"description\" content=\"Saiba tudo sobre o if JavaScript, aestrutura condicional que permite ao c\u00f3digo executar diferentes a\u00e7\u00f5es dependendo de se uma condi\u00e7\u00e3o \u00e9 verdadeira ou falsa.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"If JavaScript: O que \u00e9 e como funciona? | Homehost\" \/>\n<meta property=\"og:description\" content=\"Saiba tudo sobre o if JavaScript, aestrutura condicional que permite ao c\u00f3digo executar diferentes a\u00e7\u00f5es dependendo de se uma condi\u00e7\u00e3o \u00e9 verdadeira ou falsa.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-15T12:05:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-15T12:09:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daiana S\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daiana S\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/\",\"name\":\"If JavaScript: O que \u00e9 e como funciona? | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png\",\"datePublished\":\"2023-09-15T12:05:08+00:00\",\"dateModified\":\"2023-09-15T12:09:00+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\"},\"description\":\"Saiba tudo sobre o if JavaScript, aestrutura condicional que permite ao c\u00f3digo executar diferentes a\u00e7\u00f5es dependendo de se uma condi\u00e7\u00e3o \u00e9 verdadeira ou falsa.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png\",\"width\":1200,\"height\":630,\"caption\":\"if JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"If JavaScript: O que \u00e9 e como funciona?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\",\"name\":\"Daiana S\",\"description\":\"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"If JavaScript: O que \u00e9 e como funciona? | Homehost","description":"Saiba tudo sobre o if JavaScript, aestrutura condicional que permite ao c\u00f3digo executar diferentes a\u00e7\u00f5es dependendo de se uma condi\u00e7\u00e3o \u00e9 verdadeira ou falsa.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/","og_locale":"pt_BR","og_type":"article","og_title":"If JavaScript: O que \u00e9 e como funciona? | Homehost","og_description":"Saiba tudo sobre o if JavaScript, aestrutura condicional que permite ao c\u00f3digo executar diferentes a\u00e7\u00f5es dependendo de se uma condi\u00e7\u00e3o \u00e9 verdadeira ou falsa.","og_url":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-09-15T12:05:08+00:00","article_modified_time":"2023-09-15T12:09:00+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png","type":"image\/png"}],"author":"Daiana S","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Daiana S","Est. tempo de leitura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/","url":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/","name":"If JavaScript: O que \u00e9 e como funciona? | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png","datePublished":"2023-09-15T12:05:08+00:00","dateModified":"2023-09-15T12:09:00+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689"},"description":"Saiba tudo sobre o if JavaScript, aestrutura condicional que permite ao c\u00f3digo executar diferentes a\u00e7\u00f5es dependendo de se uma condi\u00e7\u00e3o \u00e9 verdadeira ou falsa.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png","width":1200,"height":630,"caption":"if JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/if-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"If JavaScript: O que \u00e9 e como funciona?"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689","name":"Daiana S","description":"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br"}]}},"modified_by":"Daiana S","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/09\/Home-Host-3.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/11297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=11297"}],"version-history":[{"count":5,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/11297\/revisions"}],"predecessor-version":[{"id":11316,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/11297\/revisions\/11316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/11315"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=11297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=11297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=11297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}