What if and else is

The statements if and else in javascript means exactly what they sound like, if something is true do this, or else do something else. Both these statements are used very often in the language in order to control programs data flow. Often when coding you want to be able to say what's going to happen from different scenarios. Like for example if a number is greater than 10 something specific should be done, or else something different.

That's basically what if and else are used for in javascript (and also in pretty much any other programming language there is). To be able to make the program do different things according to what input is given. We'll start by examining if closer.

If

// What will be printed out?

var num = 10;

if (num === 10) {
console.log('The number is 10');
}

if (num === 3) {
console.log('The number is 3');
}

If is marked up with the simple letters if, followed up with an expression that will be evaluated to either true or false. The result will be a boolean. Then inside the curly braces you place all the code that should run if the expression is evaluated to true. If false the code inside the block will not be executed.

The expression placed inside the parenthesis is usually called a condition, which is what will be evaluated by if to determine if the code inside its block should run or not. Either just a value can be given to it like if (value) and it will be determined if the value is truthy or falsy. So actually anything can be put there.

var a = 5;
var b = 10;

if (a < b) { // true
console.log('5 is less that 10');
}

if (a === b) { // false
console.log('5 is equal to 10');
}

if (a > b) { // false
console.log('5 is greater than 10');
}

Very often you'll see expressions like equals, not equals, greater than, lesser than etc inside if statements, which all results in a boolean.

Else

var time = 14.35;

if (time < 12) {
console.log('Good morning');
}
else {
console.log('Good afternoon');
}

At this time most have probably already figured out how to use else. If an if statement is true the code inside its curly braces will be run and if false nothing will happen. Except if an else statement is put directly afterwards. Then the code inside the else's block will run. Above is an example on how it works in practice.

Else if

var num = Math.floor(Math.random() * 3) + 1; // Random number between 1-3

if (num === 1) {
console.log('The number is 1');
}
else if (num === 2) {
console.log('The number is 2');
}
else {
console.log('The number is 3');
}

Then we have else if, which is used when it's not quite enough with just if and else. With just if many things can be done and they can be in a long row after each other, if after if. They will then all run and those whose expressions evaluates to true will have the code inside them executed. The result can be that all of them, some of them or none of them have their content executed.

Else if on the contrary is used when you want to guarantee that only one of the if statements are executed, even if multiple of them could result in true. When one of them is evaluated to true the code inside is executed, and then the rest of the else if statements are skipped over.

An alternative to else if is the switch statement which basically does the same thing as a bunch of else ifs, but with another syntax.

Logical And, Or and Not

The three logical operators and, or and not can be used inside if statements to be able to combine two or more conditions, and to get more complex expressions. They are And (&&) which means that both conditions must evaluate to true for true to be returned. Or (||) where it's enough for one to evaluate to true for true to be returned. Not (!) just inverts a truthy expression to falsy and vice versa. So something that for instance would result in true results in false instead.

var x = 12;
var y = 20;

if (x > 10 && y > 10) { // true
console.log('Both x and y are greater than 10');
}
if (x > 15 || y > 15) { // true
console.log('Either x or y are greater than 15');
}

var z = false;

if (!z) { // true
console.log('False becomes true');
}

Try it yourself

  1. Try out the statements if, else if and else with some different conditions.
  2. Use some of the operators and, or and not inside the if statements, and try to understand how they work.