Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

Exercise: Array Reverse

Exercise 28 Very easy

Prerequisites for the exercise

  1. JavaScript Arrays Basics

Objective

Create a function to reverse a given array, in-place.

Description

Consider the following array of numbers:

var nums = [1, 5, 9];

If we reverse this array, the order of elements will simply get reversed.

That is, the first element will become the last element; the second element will become the second-last element; the third element will become the third-last element; and so on and so forth.

In this exercise, you have to create a function arrayReverse() that reverse a given array.

Here's the signature of the function:

function arrayReverse(arr) {
   // Your code here.
}

The given parameter arr is the array to reverse.

Note that the function should mutate the array in-place, i.e. the original array should be modified. Moreover, the function should also return the modified array.

Below shown is an illustration of the usage of the function:

var nums = [1, 5, 9]
undefined
arrayReverse(nums)
[9, 5, 1]
nums
[9, 5, 1]

As can be seen here, the call to arrayReverse() returns the reversed array [9, 5, 1], and the actual array nums is also modified as is confirmed by the third statement.

View Solution

New file

Inside the directory you created for this course on JavaScript, create a new folder called Exercise-28-Array-Reverse and put the .html solution files for this exercise within it.

Solution

Reversing an array is a very simple idea.

We only ought to swap corresponding elements from both ends of the array. That is, the first element is swapped with the last element; the second element is swapped with the second-last element; and so on and so forth.

This has to continue until all but the middle element has been swapped, if there is any. This is because there is no point of swapping the middle element, since its swap would be with itself.

So altogether this means that if we have an array of 4 elements, we'll need to apply the swapping routine only on the first two elements (which will automatically encompass the last two elements as well).

Similarly, if we have an array of 5 elements, once again the first two elements will need to be swapped (with the last two ones). The third element (which is the middle element) will be swapped with itself and so likewise we'll ignore it.

In the definition of arrayReverse() below, we create three local variables outside the loop that will be used in our swapping routine.

  1. temp is meant to temporarily hold an element of the array while it is swapped with the corresponding element.
  2. n is meant to hold the length of the array which will ultimately be used in accessing the corresponding ith element from the right-side of the array (i.e. in the expression n - i - 1).
  3. mid is meant to cache the value right before which we need to end the given loop.

We go over each of the array's elements upto the index mid and make the desired swaps. That simply reverses the whole list.

function arrayReverse(arr) {
   var temp;
   var n = arr.length;
   var mid = n / 2;

   for (var i = 0; i < mid; i++) {
      temp = arr[i]
      arr[i] = arr[n - i - 1];
      arr[n - i - 1] = temp;
   }

   return arr;
}