Estruturas condicionais Javascript

Nenhum produto encontrado nessa seleção.

Estruturas condicionais Javascript são como estruturas condicionais na maioria das linguagens de programação existentes, as utilizamos para verificar uma condição e definir se algo deve ou não acontecer.

Um bom exemplo disso, e que não tem nada a ver com programação, é a linguagem que utilizamos para nos comunicar, repare:

Se o sol sair hoje, vou nadar.

Temos uma condição (se o sol sair hoje) para executar uma ação (vou nadar) dependendo do resultado dessa condição. Se verdadeira, a ação é executada.

Estruturas condicionais Javascript

Podemos representar condições em Javascript utilizando o comando de estrutura condicional if (se) da seguinte maneira:

if ( sol ) {
	alert('Vou nadar!');
}

Vejamos a estrutura condicional if um pouco mais a fundo.

If (se)

Para utilizar a estrutura if, precisamos da palavra if + ( pelo menos uma condição entre parênteses ) + { quantas ações forem necessárias entre colchetes }.

// Variável booleana verdadeira
var sol = true;

// Condição
if ( sol ) {
	// Ação
	alert('Vou nadar!');
}

Quando utilizamos a estrutura condicional if, a condição deve ser sempre ser verdadeira para que uma ação seja executada, mesmo que você esteja procurando por um valor falso.

Posteriormente, você verá os operadores condicionais para entender melhor sobre o que estamos tratando. Por agora, guarde bem essa estrutura:

if ( condição ) {
	ação;
}

Isso irá alterar o fluxo da sua aplicação quando necessário, pois, se a ação que você estiver testando não for verdadeira, o Javascript vai simplesmente pular a parte do código que está dentro dos colchetes para a próxima linha, se ela existir.

If … else

Também pode ocorrer de você ter uma ação contrária para ser executada, caso sua ação principal não seja verdadeira, por exemplo:

Se o sol sair hoje, vou nadar; caso contrário, vou ler.

Nesse caso temos duas ações dependendo de uma condição, uma das duas terá que ser executada.

Para suprir essa necessidade, completamos a estrutura condicional if com else (senão):

// Variável booleana falsa
var sol = false;

// Condição
if ( sol ) {
	alert('Vou nadar');
} else {
	alert('Vou ler');
}

Perceba que a variável sol agora tem o valor false, ou seja, não supriu a necessidade da estrutura condicional. Nesse caso o Javascript procura pela continuação "else" para saber se deve executar outra ação ou se deve continuar seguindo com o código. Como ela existe em nosso código, o alerta "Vou ler" é exibido na tela.

Else não tem nenhuma condição e não pode ser utilizado sozinho, só podemos utilizá-lo quando utilizamos uma estrutura condicional if antes.

As ações de else também devem vir entre colchetes.

If … else if … else

Outro fato que vai ocorrer constantemente em suas aplicações Javascript, é o fato de existir mais de uma condição, por exemplo:

Se eu acordar de madrugada, vou ler; se acordar de manhã, vou estudar; se acordar tarde vou assistir filme.

Nesse caso podemos utilizar um else if ( outra condição ):

// Variáveis booleanas
var madrugada = false;
var cedo = true;
var tarde = false;

// Condição
if ( madrugada ) {
	alert('Vou ler');
} else if ( cedo ) {
	alert('Vou estudar');
} else {
	alert('Vou assistir filme');
}

No trecho de código acima, a primeira condição não foi verdadeira, mas a segunda foi. O Javascript vai pular a primeira ação (do if), vai executar a segunda ação (do else if) e vai pular o terceiro else porque já encontramos o valor que queríamos. Else só seria executado se as duas primeiras condições fossem falsas.

Else if também depende de um primeiro if para existir, ou melhor, não existe uma segunda condição se não existir a primeira.

Veja a estrutura condicional if … else if … else completa:

if ( condição ) {
	// Ação
} else if ( outra condição ) {
	// Ação
} else if ( outra condição ) {
	// Ação
} else if ( outra condição ) {
	// Ação
} else if ( quantas condições quiser ) {
	// Ação
} else {
	// Ação final se nenhuma condição for verdadeira
}

O if também pode ser utilizado separadamente para duas condições diferentes, por exemplo:

var variavel1 = false;
var variavel2 = true;

// Uma condição
if ( variavel1 ) {
	alert("Ação 1");
}

// Outro bloco de códigos
if ( variavel2 ) {
	alert("Ação 2");
}

if … else inline (em linha)

As estruturas condicionais também podem ser utilizadas em linha, o que deixa o código um pouco mais confuso para iniciantes.

var preco = 22;
var mensagem = ( preco == 22 ) ? 'Preço: ' + preco : 'Muito caro!';

alert(mensagem);

Neste caso estou configurando o valor de uma variável de acordo com as condições de outra variável. O valor de "preco" é 22, a variável "mensagem" é igual a uma condição com a seguinte estrutura:

( condicao ) ? ação se verdadeira : ação se falsa;

O ponto de interrogação (? – equivalente ao if) demarca a ação a ser executada se a condição for verdadeira, os dois pontos (: – equivalente ao else) só serão executados quando a condição for falsa.

Observação: Para if … else inline é obrigatório a utilização do valor contrário (else – :), se você não utilizá-lo, terá um erro em seu código.

Leia mais sobre isso em Conditional Operator – JavaScript | MDN (em inglês).

Operadores condicionais

Agora que você já sabe as estruturas condicionais if, else if e else, podemos apimentar um pouco mais seu código com algumas condições mais complexas.

Em Javascript você pode utilizar os operadores condicionais para verificar igualdade, identidade, relações e condições lógicas dos valores. Isso é muito útil quando precisamos verificar valores de várias variáveis antes de executar uma ação.

Vejamos alguns exemplos.

Operadores de igualdade e identidade

Os operadores de igualdade servem para verificar se algo é igual ou idêntico a outro, por exemplo:

var a = 1;
var b = 1;

if ( a == b ) {
	alert('a é igual a b');
} 

Os dois sinais de igual (==) servem para verificar se uma variável é igual a outra, no entanto, eles só verificam se os valores são iguais, não se os tipos de dados são os mesmos.

Por este motivo, no trecho abaixo:

var a = 1; // Tipo numérico
var b = '1'; // Tipo string

if ( a == b ) {
	alert('a é igual a b');
} 

A condição é verdadeira, mesmo que tenhamos utilizado as aspas simples para determinar que o valor de b é uma string e não um número.

Para verificar se a é igual a b e se são do mesmo tipo, devemos utilizar três sinais de igualdade (===).

var a = 1; // Tipo numérico
var b = '1'; // Tipo string

/**
 * Agora a condição é falsa porque os 
 * tipos de dados é diferente 
 *
 * a é um número com valor 1
 * b e uma string com valor 1
 */
if ( a === b ) {
	alert('a é igual a b');
} 

No trecho acima a condição é falsa e a ação não é executada, porque, mesmo que a tenha o mesmo valor de b, a tem o tipo de dados numérico, enquanto b é uma string. Se tirarmos as aspas de b, aí sim a condição será satisfeita, pois, ambos serão numéricos.

Operadores de desigualdade e não identidade

Assim como você pode conferir se algo é igual ou idêntico a outro, você também pode conferir se um valor não é igual ou não é idêntico a outro. Para isso basta utilizar um ponto de exclamação (!) no lugar do primeiro igual:

var a = 1; // Tipo numérico
var b = '1'; // Tipo string

/**
 * Agora a condição é falsa porque  
 * a não é diferente de b 
 */
if ( a != b ) {
	alert('a é diferente a b');
}

No caso acima, a não é diferente de b porque eles têm o mesmo valor (1). Da mesma maneira que na verificação de igualdade (==) a verificação de desigualdade (!=) não verifica os tipos de dados, somente o valor das variáveis.

Para verificar a desigualdade e não identidade de variáveis, basta adicionar mais um sinal de igual (=) à verificação de desigualdade (!==):

var a = 1; // Tipo numérico
var b = '1'; // Tipo string

/**
 * Agora a condição é verdadeira porque o 
 * tipo de dados é diferente 
 *
 * a é um número com valor 1
 * b e uma string com valor 1
 */
if ( a !== b ) {
	// Agora a é totalmente diferente de b
	// por não serem do mesmo tipo
	alert('a é totalmente diferente a b');
}

Tabela de operadores de igualdade e desigualdade

Operadores relacionais

Outros operadores que você deverá utilizar constantemente em aplicações Javascript são os relacionais. Com eles você pode verificar se um valor é maior, maior ou igual, menor ou menor ou igual a outro valor.

Veja um exemplo:

var a = 1;
var b = 2;

if ( a < b ) {
	alert('a é menor que b');
} 

No exemplo acima, a tem o valor numérico um (1) e b tem o valor numérico dois (2). Quando eu utilizo o operador relacional < (menor que) eu tenho uma condição verdadeira, ou seja, a é realmente menor que b, consequentemente a ação é realizada. Porém, se eu alterar o operador para > (maior que), terei uma condição falsa, porque a é menor que b.

Um outro fato interessante, é que pode ocorrer casos em que seus valores são iguais, por exemplo:

var a = 1;
var b = 1;

if ( a => b ) {
	alert('a é maior ou igual a b');
} 

Para resolver este problema, basta eu adicionar um sinal de igualdade (=) depois do operador relacional menor (<) ou maior (>) que (<= ou >=).

Tabela dos operadores relacionais

Operadores Lógicos

Para colocar ainda mais complexidade no seu código Javascript, podemos utilizar operadores lógicos para combinar quantas condições forem necessárias para suprir a nossa necessidade.

Basta utilizarmos os operadores lógicos AND (&&) e OR (||).

AND (representado por dois &&), como o próprio nome indica, verifica se uma condição x e outra condição y são verdadeiras, por exemplo:

var a = 1;
var b = 3;
var c = 2;
var d, e, f, i;

if ( a && b && c ) {
	alert('a, b e c têm valores.');
}

No caso acima o alerta é exibido porque a, b e c estão inicializadas e têm valores (1, 3 e 2, respectivamente). Mas se eu adicionar qualquer uma das variáveis d, e, f ou i, que não têm nenhum valor, uma ou mais condições se tornam falsas e o Javascript pulará a ação.

var a = 1;
var b = 3;
var c = 2;
var d, e, f, i;

if ( a && b && c && d ) {
	alert('a, b e c têm valores. Mas d não tem :(');
} 

Como você pode perceber, o operador condicional && é bastante severo, ele verifica todas as condições e se uma delas não for verdadeira, a ação não será executada.

Pode ser que você queira verificar várias condições e se apenas uma delas for verdadeira, executa alguma ação. Nesse caso, temos o operador || (or). Ele verifica se uma condição x ou uma condição y ou uma condição z é verdadeira, se qualquer uma delas for, executa a ação.

var a = 1;
var b = 3;
var c = 2;
var d, e, f, i;

if ( a > b || c > a ) {
	alert('a não é maior que b, mas c é maior que a.');
}

No trecho acima, mesmo a sendo menor que b (primeira condição falsa), c é maior que a (segunda condição verdadeira), a ação será executada.

Você também pode combinar ambos, o operador AND (&&) e o operador OR (||), porém, você pode confundir seu código em alguns casos. Para que isso não ocorra, utilizamos parênteses para cercar as condições em grupos. Por exemplo:

var a = 1;
var b = 3;
var c = 2;
var d, e, f, i;

if ( ( a > b || c > a ) && ( d || e ) ) {
	alert('Primeiro grupo verdadeiro, segundo grupo falso.');
}

No trecho acima, nosso primeiro grupo retorna verdadeiro, porém o segundo grupo retorna falso, como estamos combinando os grupos com um operador &&, a ação não será executada.

Para resolver isso, basta modificar o operador para OR (||):

var a = 1;
var b = 3;
var c = 2;
var d, e, f, i;

if ( ( a > b || c > a ) || ( d || e ) ) {
	alert('Primeiro grupo verdadeiro, segundo grupo falso.');
} 

Leia mais sobre operadores condicionais Javascript em JavaScript Comparison and Logical Operators (em inglês).

Estrutura condicional Javascript: Switch

Mais uma estrutura condicional que pode ser útil para seus casos, switch.

Bem parecido com a estrutura condicional if, switch também pode executar uma ou várias ações dependendo de uma ou várias condições:

var a = 'TutsUP';

switch ( a ) {
	case 'Mozilla':
		alert('Achei');
		break;
	case 'Google':
		alert('Achei');
		break;
	case 'TutsUP':
		alert('Achei');
		break;
	default:
		alert('Não achei sua condição.');
}

Sua estrutura é a seguinte:

• switch
• ( valor a ser verificado )
• {
• palavra "case"
• "Condição":
• Ação ou ações
• Palavra "break;"
• Palavra "default:"
• Ação a ser executada caso não encontre a condição
• }

switch ( valor ) {
	case 'condição':
		// Ação
		// Ou ações
		break;
	default:
		// Ação ou ações padrão;
}

Você também pode procurar por várias condições:

valor = 'condição 4';

switch ( valor ) {
	case 'condição 1':
	case 'condição 2':
	case 'condição 3':
	case 'condição 4':
	case 'condição 5':
		// Ação
		alert('Uma das condições é verdadeira');
		break;
	case 'Outro bloco: condição 1':
	case 'Outro bloco:  2':
		// Ação
		alert('Uma das condições é verdadeira');
		break;
	case 'Um terceiro bloco: condição 1':
		// Ação
		alert('Uma das condições é verdadeira');
		break;
	default:
		// Ação ou ações padrão;
		alert('Nenhuma das condições é verdadeira');
}

Leia mais sobre a estrutura condicional switch em switch – JavaScript | MDN (em inglês).

Outras aulas

Se você perdeu a aula anterior, segue o link:

• Variáveis e operadores em Javascript

Próxima aula:

• Laços em Javascript (While, Do While, For)

Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:

• Curso de Javascript