LifeinTECH

This article is a continuation of my JavaScript series. I highly recommend reviewing JavaScript - Part One before proceeding.

Loops

A loop is a sequence of instructions that are continually repeated until a certain condition is met.

JavaScript supports a number of different types of loop:

for - Loops through a block of code a number of times.
for/in - Loops through the properties of an object.
while - Loops through a block of code while a specified condition is true.
do/while - Loops through a block of code while a specified condition is true.

The structure of a “for” loop can be found below:

for (statement 1; statement 2; statement 3) {  
  code to be executed  
}

Statement 1 - Executed before the “code to be executed” starts.
Statement 2 - Defines the condition for running the loop.
Statement 3 - Executed each time after the “code to be executed” ends.

An example of a simple “for” loop can be found below:

for (i = 0; i < 10; i++) {
  message += "The number is " + i + "<br />";
}

Conditionals

A conditional statement performs different actions depending on whether a programmer-specified condition evaluates to true or false (e.g. if-than statement).

The structure of an “else-if” statement can be found below:

if (con1) {
  code to be executed if con1 is true
} else if (con2) {
  code to be executed if the con1 is false and con2 is true
} else {
  code to be executed if the con1 and con2 are false
}

An example of a simple “else-if” statement can be found below:

if (time < 12) {
  message = "Morning";
} else if (time < 22) {
  message = "There is still time";
} else {
  message = "Bed Time";
}

Functions

A JavaScript function is a block of code that performs a specific task. It is similar to a procedure and/or a subroutine in other programming languages and is composed of a sequence of statements called the function body.

Values can be passed to a function, and the function will return a value. In JavaScript, functions are first-class objects, because they can have properties and methods just like other objects.

Function Declarations

Declared functions are not executed immediately, instead they are executed when specifically called.

The structure of a “function declaration” can be found below:

function name(par1, par2, par3) {
  code to be executed
  return something;
}

Function parameters (par1, par2, par3) are listed in the function definition. Function arguments are the real values received by the function. Inside the function, the arguments (AKA parameters) act as local variables.

When JavaScript reaches a return statement, the function will stop executing and the return value is “returned” back. If the function was invoked from a statement, JavaScript will return to execute the code following the invoking statement.

An example of a simple “function declaration” can be found below:

function simpleFunction(a, b) {
  var aMultiplied = a*a*a*a;   
  var bMultiplied = b*b*b*b;
  var sum = aMultiplied + bMultiplied;
  return sum;
}

simpleFunction(5, 5);

This function declaration could be written more efficiently to preserve memory:

function simpleFunction(a, b) {
  return a*a*a*a + b*b*b*b;
}

simpleFunction(5, 5);

In the examples above (when the function is called). The returned value would be “1250”.

Function Expressions

A JavaScript function can also be defined using an expression (see JavaScript - Part One), which will store the function in a variable.

The structure of a “function expression” can be found below:

var z = function(x, y) { return x * y };

The function above is actually an anonymous function, meaning it is a function without a name. Functions stored in variables do not need function names as they are always called using the variable name.

An example of a simple “function expression” can be found below:

var z = function(x, y) { return x * y };  
var result = z(5, 5);

The result of the above function would be “25”.

Methods

JavaScript methods are the actions that can be performed on objects. Therefore, a method is simply an object property containing a function.

An example of how to access an objects “method” can be found below:

objectName.methodName();

There are also a wide number of “built-in” JavaScript methods. The Mozilla Developer Network (MDN) maintain a comprehensive list on their JavaScript Methods Index.

Arrays

An array is used to store multiple values in a single variable. Array indexes are zero-based, meaning the first element in the array is 0 (not 1).

The structure of an “array” can be found below:

var arrayName = [element1, element2, element3, ...];  

An example of a simple “array” can be found below:

var team = [Matt, Steve, John];

Arrays use numbers to access the element. In the above example, team[0] returns “Matt” and team[2] returns “John”.

The next part of the JavaScript Series can be found here.