Basic JavaScript Syntax

Arrays and Loops

What are arrays?

Arrays are objects (i.e. a special type of variable) that can hold multiple values . For example, if we had a list of items (e.g. a list of country names), storing each country name in single variables could become a hefty list to sort through when you're trying to find a specific country.

Arrays solve this problem, since an array can hold many values under a single name, and we can access the values by referring to an index number.

Note that array indexes start with 0 (i.e. [0] is the first element, [1] is the second element, and so on.

JavaScript comes with some handy built-in array methods to help you sort, search or edit an array, as well as much more! The following list describes some of the main array methods available, or check out w3schools complete JavaScript Array Reference .

  • indexOf(): this searches the array for the given element and returns its position.
  • includes(): this checks if the array contains a given element.
  • remove(): this removes an item from the list.
  • pop(): this removes the last element in the array.
  • push(): this adds an element to the end of the array and returns the new length.
  • shift(): this removes the first element in the array.
  • sort(): this sorts elements in the array in ascending order.
  • splice(): this adds or removes elements in an array.
  • reverse(): this reverses the order of elements in the array.

What are loops?

Loops offer a quick and easy way to do something repeatedly. There are many different types of loops in JavaScript, which all essentially do the same thing: they repeat an action some number of times (including 0 times), based on a condition or set of conditions. The various loop mechanisms offer different ways to determine the start and end points of the loop, and there are various situations that are more easily served by one type of loop over the others.

Loops are useful when we want to run the same code repeatedly, each time with a different value . Some of the loops available in JavaScript are:

  • for: this loops through a block of code a number of times.
  • for/in: this loops through the properties of an object.
  • for/of: this loops through the values of an iterable object.
  • while: this loops through a block of code while a specified condition is true.
  • do while: this also loops through a block of code while a specified condition is true.

For now, we will only be focusing on for loops and while loops.

For Loops

A for loop repeats until a specified condition evaluates to false :

JavaScript syntax for 'for loop'.
Image source: N.Dobbin (for HyperionDev Course IFS L4T15: JavaScript Refresher, 2022)

When a for loop executes, the following occurs :

  1. initialExpression: this is executed once before the code block's execution. It usually initializes one or more loop counters, and can also declare variables.
  2. conditionExpression: this defines the condition for executing the code block. The expression is evaluated and, if the value of conditionExpression is true, the loop statements execute. If the value is false, the for loop terminates. (Note: if the expression is omitted entirely, the condition is assumed to be true).
  3. statement: The statement (i.e. the code block inside the for loop's curly braces) executes.
  4. incrementExpression: If present, the update expression incrementExpression is executed (i.e., executed every time after the code block's execution).
  5. Control returns to step 2.

While Loops

A while loop is the most general form of loop statements. A while statement executes its statements as long as a specified condition evaluates to true (i.e. while the condition is true), and stops executing when the condition becomes false, passing control to the statement following the loop . The while loop syntax is as follows:

JavaScript syntax for 'while loop'.
Image source: N.Dobbin (for HyperionDev Course IFS L4T15: JavaScript Refresher, 2022)

The condition test happens before the statement (i.e., the code block in the loop) is executed. If the condition returns true, the statement is executed and the condition is tested again. If the condition returns false, the execution stops (i.e. it breaks out of the loop).


Beware the infinte loop!

Always avoid infinite loops by ensuring the condition in a loop eventually becomes false. If we do not do this, the loop will never terminate! The statements in this example while loop below would execute forever because the condition never becomes false:

JavaScript example of an infinte 'while loop'.
Image source: N.Dobbin (for HyperionDev Course IFS L4T15: JavaScript Refresher, 2022)



Practice what you've learned!

Practice: Swapping Numbers

This example demonstrates how we can use a for loop to swap numbers around.

The function in this example is called swapNumbers(). It prompts a user to input a number three times, and stores the inputted numbers in an array. It then iterates through the array backwards, storing each digit in reverse order in a new array, and outputs the new array (i.e. the reversed inputted numbers) to the <h5 id="arrayExample"> and the <h5 id="loopsExample"> elements in the arraysLoops.html file.

JavaScript Code: function with for loop.
Image source: N.Dobbin (for HyperionDev Course IFS L4T15: JavaScript Refresher, 2022)

Try it yourself!

See an array and a for loop in action by clicking the button below. To see what's going on behind the scenes, right-click anywhere on the page and click inspect.