Skip to content

Setting up conditional statements

What is programming?

A Computer Glossary
https://youtu.be/eIgX6sPOqCY?t=104
Shown at IBM pavilion at the 1968 World's Fair. An Eames film with animation by Glen Fleck and original score by Elmer Bernstein.
(Whole video can be watched here: https://www.youtube.com/watch?v=eIgX6sPOqCY&ab_channel=EamesOffice)

A program is a set of instructions for performing computer operations.

MEMORY / ACTION / DECISION / REPETITION - The universal modules of any computer program:
MEMORY >> Variables
ACTION >> Functions
DECISION >> Conditionals
REPETITION >> Loops

JavaScript is a programming language that can modify digital objects such as websites and datasets.

Conditionals

Conditionals are how a program is able to act in a non-linear way (also called conditional execution).

Conditionals are the DECISION part of programming.

If

A conditional is a block of code that is executed depending on the true/false value of a statement (if the statement is true, the code is executed, but not if false).

In JavaScript you create a conditional using the keyword if. The statement being assessed (the condition) comes after the if keyword in brackets () and is followed by the code to be executed. If the condition is true and there is more than one line of code to be executed, these are placed in curly brackets {}.

Example:

js
let haveSunshine = true;

if(haveSunshine == true){
  console.log("It is sunny");
}
let haveSunshine = true;

if(haveSunshine == true){
  console.log("It is sunny");
}

Example:

js
let numApples = 3;
let numOranges = 4;
let fruitInBasket = true;

if(fruitInBasket == true){
    let numFruit = numApples + numOranges;
    console.log(numFruit);
}
let numApples = 3;
let numOranges = 4;
let fruitInBasket = true;

if(fruitInBasket == true){
    let numFruit = numApples + numOranges;
    console.log(numFruit);
}

If else

If you want some code to execute if the statement is assessed as false, you can use an if else statement.

Example:

js
let haveSunshine = false;

if(haveSunshine == true){
  console.log("It is sunny");
} else {
  console.log("It is cloudy");
}
let haveSunshine = false;

if(haveSunshine == true){
  console.log("It is sunny");
} else {
  console.log("It is cloudy");
}

Example:

js
let numApples = 3;
let numOranges = 4;
let fruitInBasket = false;

if(fruitInBasket == true){
    let numFruit = numApples + numOranges;
    console.log(numFruit);
} else {
    let numFruit = 0;
    console.log(numFruit);
}
let numApples = 3;
let numOranges = 4;
let fruitInBasket = false;

if(fruitInBasket == true){
    let numFruit = numApples + numOranges;
    console.log(numFruit);
} else {
    let numFruit = 0;
    console.log(numFruit);
}

If there are more than two possible outcomes then a chain of if else pairs can be put together.

Example:

js
let haveSunshine = false;
let isRaining = true;

if (haveSunshine == true && isRaining == false){
  console.log("It is sunny");
} else if(haveSunshine == true && isRaining == true){
  console.log("It is sunny and raining");
} else if(haveSunshine == false && isRaining == false){
  console.log("It is cloudy");
} else {
  console.log("It is cloudy and raining");
}
let haveSunshine = false;
let isRaining = true;

if (haveSunshine == true && isRaining == false){
  console.log("It is sunny");
} else if(haveSunshine == true && isRaining == true){
  console.log("It is sunny and raining");
} else if(haveSunshine == false && isRaining == false){
  console.log("It is cloudy");
} else {
  console.log("It is cloudy and raining");
}

Example:

js
// this example runs in browser console
let num = Number(prompt("Pick a number"));

if (num < 10) {
  console.log("Small");
} else if (num < 100) {
  console.log("Medium");
} else {
  console.log("Large");
}
// this example runs in browser console
let num = Number(prompt("Pick a number"));

if (num < 10) {
  console.log("Small");
} else if (num < 100) {
  console.log("Medium");
} else {
  console.log("Large");
}

Switch

Instead of doing a long chain of if ... else statements, you can use switch instead.

In a switch statement an expression inside () is evaluated. After an opening { different case clauses are listed and tested. When one is found which is correct this leads to execution of the commands that follow it until a break occurs or the program ends with a }.

Example:

js
let haveSunshine = false;

switch(haveSunshine){
  case true:
  console.log("It is sunny");
  break;
  case false:
  console.log("It is cloudy");
}
let haveSunshine = false;

switch(haveSunshine){
  case true:
  console.log("It is sunny");
  break;
  case false:
  console.log("It is cloudy");
}

Example:

js
let weatherForecast = 'snowing';
/*let weatherForecast = 'blue sky';*/

switch(weatherForecast){
    case 'sunny':
    console.log("It is sunny");
    break; // remove, fall-through
    case 'raining':
    console.log("It is raining");
    break;
    case 'cloudy':
    console.log("It is cloudy");
    break;
    case 'foggy':
    console.log("It is foggy");
    break;
    case 'snowing':
    console.log("It is snowing");
    break;
    default:
    console.log("It is grey");
}
let weatherForecast = 'snowing';
/*let weatherForecast = 'blue sky';*/

switch(weatherForecast){
    case 'sunny':
    console.log("It is sunny");
    break; // remove, fall-through
    case 'raining':
    console.log("It is raining");
    break;
    case 'cloudy':
    console.log("It is cloudy");
    break;
    case 'foggy':
    console.log("It is foggy");
    break;
    case 'snowing':
    console.log("It is snowing");
    break;
    default:
    console.log("It is grey");
}

While

Sometimes you want to repeat an operation many times. You could do this by writing out the same code many times, but that is not very efficient:

Example:

console.log(0);
console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);
console.log(0);
console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);

A better way to repeat an operation many times is to code a loop.

Loops are a more efficient way of doing REPETITION in programming.

One type of loop makes something happen whilst a condition is true. This is called a while loop.

Example:

js
let number = 0;

while (number <= 10) {
  console.log(number);
  number = number + 2;
}
let number = 0;

while (number <= 10) {
  console.log(number);
  number = number + 2;
}

If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.

Block scope: Variables declared with let inside {} cannot be accessed outside of this block. Variables declared with var inside {} can be accessed outside this block.

References

https://eloquentjavascript.net/02_program_structure.htmlhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
https://www.w3schools.com/js/js_scope.asp

Content CC BY 4.0 | Code AGPL 3.0