Skip to main content

Command Palette

Search for a command to run...

Estrutura condicional

Updated
3 min read
Estrutura condicional

Existem vários locais em um script onde são tomadas as decisões que determinam quais linhas de código devem ser executadas em seguida.

// palavra-chave (variável) = valor da variável
let age = 26

if(age > 18) {
    document.write('Você é maior de idade.');
} else {
    document.write('Você é menor de idade.');
}

A instrução if...else verifica uma condição.

Se retornar true, o primeiro bloco de código é executado.

Se a condição retornar false, o segundo bloco de código é executado.


Podemos testar várias variantes de uma condição.

// palavra-chave     nome da variável    operador de atribuição    valor da variável
let             objectDate                 =                   new Date(); 
let year = objectDate.getFullYear();

if(year == 2018) {
        document.write(`Feliz ${year} para todos!`);
} else if(year == 2019) {
        document.write(`Feliz ${year} para todos!`);
} else if(year == 2020) {
        document.write(`Feliz ${year} para todos!`);
} else {
        document.write(`Feliz ${year} para todos!`);
}

Outra forma de fazer verificação só que de um jeito mais simples é com o operador condicional “ternário”

A sintaxe é:

let result = condition ? value1 : value2;

Exemplo:

// palavra-chave    nome da variável  operador de atribuição   valor da variável
let                age                   =                    20;
let accessAllowed = (age > 18) ? 'Você é maior de idade!' : 'Você não é maior de idade!';


console.log(accessAllowed);
// OUTPUT: 'Você é maior de idade!'
// palavra-chave    nome da variável  operador de atribuição   valor da variável
let                age                   =                    20;
let message = (age < 3)  ? 'Hi, baby!' :
                                                                                                                             (age < 18) ? 'Você é de menor!' :
                                                                                                                             (age > 18) ? 'Você é de maior!' :
                                                                                                                             'Qual sua idade verdadeira?';  
console.log(message) // OUTPUT: 'Você é de maior!'

Operador de coalescência nulo

O operador de coalescência nulo é escrito com dois pontos de interrogação ??

Suponha que nós temos dados de um usuário em variáveis firstName, lastName, nickName.

Todos eles podem ser indefinidos, se o usuário decidir não inserir um valor.

Gostaríamos de exibir o nome do usuário utilizando uma dessas variáveis ou mostrar um nome default se todas elas forem indefinidas.

Exemplo:

// palavra-chave    nome da variável  operador de atribuição   valor da variável
let                  firstName               =                     null;
let                  lastName                =                     null;
let                  nickName                =                  'Developer';

document.write(firstName ?? lastName ?? nickName ?? 'AreaDev');
// OUTPUT: 'Developer'

Declaração SWITCH

Uma instrução switch pode substituir várias verificações if.

Sintaxe:

switch(x) {
    case 'value1': // if (x === 'value1')
        ...
    [break]

  case 'value2': // if(x === 'value2')
        ...
    [break]

default:
    ...
    [break]

}

O switch tem um ou mais blocos case e um padrão opcional.

Inicia com uma variável chamada valor do switch*.* Cada caso indica um possível valor para essa variável e o código que deve ser executado se a variável corresponder a esse valor.

Exemplo:

// palavra-chave    nome da variável  operador de atribuição   valor da variável
let                year                   =                    18;
let                msg;

switch(year) {

        case 18:
                msg = `Você tem ${year} anos e já é de maior.`;
        break;

        case 16:
                msg = `Você tem ${year} anos e é menor de idade.`;
        break;

        case 10:
                msg = `Você tem ${year} anos e é muito jovem ainda.`;
        break;

        default:
                msg = `Informe sua idade verdadeira!`;
        break;

}

Para conhecer afundo todos os tipos de operadores no JavaScript, acesse os Links abaixo:

Operadores Lógicos
Operadores Matemáticos


Conclusão

Entender as estruturas de controle de fluxo no JavaScript, como if...else, o operador ternário, o operador de coalescência nulo e a declaração switch, é crucial para escrever código eficiente e dinâmico. Essas ferramentas permitem tomar decisões no código de forma clara e organizada, respondendo adequadamente a diferentes condições e valores. Aprofundar-se nesses conceitos e em outros operadores lógicos e matemáticos fortalecerá suas habilidades como desenvolvedor JavaScript, tornando seu código mais robusto e adaptável.

JavaScript

Part 8 of 12

Nesta série cativante, mergulhe no mundo poderoso e versátil do JavaScript. Desde os fundamentos essenciais até os conceitos avançados, esta série oferece uma jornada completa para você.

Up next

Tipos de dados

Explorando os tipos de dados no JavaScript

More from this blog

Á

Áreadev

36 posts