Evolution of JavaScript

Conditionals

Conditionals or conditional statements are the core of programming. The conditionals guide the flow of our programs and they allow us to add decision making abilities to the code. Without conditionals it ain’t programming.

Comparisons

Comparisons in programming generally resolve to, or evaluate to, one of two options: TRUE or FALSE. The basic comparison operators relate directly to processor commands and are extremely fast.

Comparison Operators

Operator Javascript Description
equal == Resolves to true if both conditions evaluate to the same.
exactly equal === Resolves to true if both conditions evaluate to same value and type.
not equal != Resolves to true if the values do not evaluate to the same.
not equal type or value !== Resolves to true if either the value or the type is not the same.
greater than > Resolves to true if the larger value is on the left.
less than < Resolves to true if the larger value is on the right.
greater than or equal <= Resolves to true if the larger value is on the left or they are the same value.
less than or equal >= Resolves to true if the larger value is on the right or they are the same value.

Logical Operators

Operator Universal Symbols Javascript Description
and & && AND && Both conditions must evaluate to true.
or | || OR || Either condition evaluates to true.
not ! NOT ! The oposite that the condition evaluates to.
exlusive or XOR   One condition or the other evaluates to true but not both.

If()

To become a master developer you must learn the ways of the if. The if statement takes everything inside of the parentheses and evaluates them to either TRUE or FALSE. If the if() statement evaluates the expression to TRUE then it runs the code containd in the curley braces {} or the next line.

Example:

var ten = 10,
	two = 2;

if (ten > two){
	console.log(ten + ' is greater than ' + two '.');
}

// Results:
// 10 is greater than 2.

You can check for multiple conditions using logical operators to evaluate more than one condition in a single if statement.

var ten = 10,
	two = 2;

if (ten > two && typeof ten === "number"){
	console.log(ten + ' is greater than ' + two '.');
}

// Results:
// 10 is greater than 2.

Else

The if by itself is quite powerful yet limited. It is only able to run code when a true is reached. The if statement doesn’t prevent code after the if statement or give an alternative. To do that you either need another if statement or an else statement. The else statements allows us to create a two way selecter. If something then run this bit of code, or else run a different bit of code.

Example:

var ten = 10,
	two = 2;

if (ten < two){
	console.log(two + ' is greater than ' + ten '.');
}else{
	console.log(ten + ' is greater than ' + two '.');
}

// Results:
// 10 is greater than 2.

Else if()

But what if you have more than two options? In comes the else if statement. The else if statement allows us to chain as many conditional statements together as we need.

Example:

var ten = 10,
	two = 2;

if (ten === two){
	console.log(two + ' is equal to ' + ten '.');
}else if(ten < two){
	console.log(two + ' is greater than ' + ten '.');
}else{
	console.log(ten + ' is greater than ' + two '.');
}

// Results:
// 10 is greater than 2.

Switch

Early on, programmers discovered that they were doing a lot of else if statements that were checking to see if a variable had limited sets of values eg. var color could only have one of the values 'red', 'orange', 'yellow', 'green' //... An so come the switch() statement. The switch matches a variable’s value to possible values and runs all of the code following that case. Example:

var name =  'Jill';

if(name === 'Jack'){
	console.log("Where's Jill?");
}else if(name === 'Jill'){
	console.log("Went up the Hill.");
}else{
	console.log("Your not part of this story!!");
}

Would be written as:

var name =  'Jill';

switch(name){
	case 'Jack':
		console.log("Where's Jill?");
		break;

	case 'Jill':
		console.log("Went up the Hill.");
		break;
		
	defaut:
		console.log("Your not part of this story!!");
		break;
}

Ternary Operator

Another shorthand method of simple conditional statements are the Ternary Operators. Rather than using an if/else statement one could use a ternary operator. Ternary operators follow the pattern (/*comparison expression*/) ? /*if true do this */ : /*else do this*/;

Example:

var ten = 10,
	two = 2;

(ten < two) ? console.log(two + ' is > ' + ten '.') : console.log(ten + ' is greater than ' + two '.');

Conditional Shorthands

JavaScript has a cool shorthand for initiating default values for variables. For example:

var options = value || "10px";

Is roughly equivalent to:

var options;

if (!value) {
	options = "10px";
}

Note: options will be set to "10px" if value resolves to falsy, ie undefined, null, false, 0, etc.


I think that is all for this week, hope you enjoyed this lesson. Until next week keep coding.