In programming, we often have related pieces of data.

Let’s consider a list of prices in a bill:

4.6, 5.03, 7.99, 8.01

limitations of many variables

We can store this list of prices in a JavaScript program by declaring multiple variables:

Interactive code block

const price0 = 4.6;
const price1 = 5.03;
const price2 = 7.99;
const price4 = 8.01;

Each identifier is the word price with a numerical suffix to indicate its position in the list. However, this is undoubtedly the wrong approach.

• If the number of items in the bill is huge, we must keep declaring new variables.
• If the number of items changes, we must reassign the values of variables so they’re in the correct order, and change any place we’re using the variables to know about the new one.
• If we do mutliple things to all of the values (say we have one loop adding them, and one loop printing them), we will need to change all of the places any time we add new values.

Instead we have to group the data together using a data structure 🧶 🧶 data structure A data structure is a collection of data and functions that can be applied to manipulate the data.

In JavaScript, we can store data inside an array 🧶 🧶 array An array is an ordered list of data

Instead of writing:

Interactive code block

const item0 = 4.6;
const item1 = 5.03;
const item2 = 7.99;
const item4 = 8.01;

We can declare an array literal as follows:

Interactive code block

const items = [4.6, 5.03, 7.99, 8.01];

Notice the identifier for the array is items. We chose to use the plural word items instead of the singular item, because arrays can store multiple pieces of information.

ordered data

Interactive code block

const volunteer = "Moussab";

The character "M" is at index 0, "o" is at index 1, and so on.

As with strings, arrays are also zero-indexed in a similar way:

Interactive code block

const items = [4.6, 5.03, 7.99, 8.01];

So we can refer to the elements 🧶 🧶 elements An element is another name for an item inside an array. of the array by an index.

In JavaScript, we can use square bracket notation to access specific elements in the array using an index.

Interactive code block

items[0]; // evaluates to 4.6
items[1]; // evaluates to 5.03
items[2]; // evaluates to 7.99
// etc

Let’s consider a problem where we calculate the mean of a list of numbers.

Given an array of numbers,
When we call calculateMean with the array of numbers
Then we get the mean

Let’s create a test to check its functionality:

Interactive code block

test("calculates the mean of a list of numbers", () => {
  const list = [3, 50, 7];
  const currentOutput = calculateMean(list);
  const targetOutput = 20;

  expect(currentOutput).toBe(targetOutput); // 20 is (3 + 50 + 7) / 3
});

In this test, we’re checking we get a value of 20 by adding together 3 + 50 + 7 and then dividing by the number of items (3). We calculate the mean of a list of numbers by:

1. summing all the numbers in the array
2. dividing the sum by the length of the array

We can define a 🎯 sub-goal of calculating the sum of all numbers in the list.

🎯 Sub-goal: compute the sum of an array of numbers.

To sum a list we can start by creating a variable total with an initial value of 0.

We then need to repeatedly add each value in the list to our total.

Interactive code block

function sumValues(list) {
    let total = 0;
    total += list[0]; // access a list element and add to total
    total += list[1];
    total += list[2];
    total += list[3];
    total += list[4];
    return total;
}

sumValues([1, 2, 3, 4, 5]);

However, this approach is flawed.

To solve the sub-goal, we have to repeatedly add each number in the array to the total, one at a time. In programming, the process of repeating something is called iteration.

In programming, we can iterate by using a loop 🧶 🧶 loop A loop is a sequence of instructions that is continually repeated until some condition is reached. .

In particular, we can use a for...of statement to sum the elements of the array.

Interactive code block

function calculateMean(list) {
  let total = 0;
  for (const item of list) {
    total += item;
  }
}

Let’s define another problem.

We want to calculate the median value from an array of numbers.

Given an array of numbers in ascending order,
When we call calculateMedian with this array
Then we get the median value

We calculate the median of a list of numbers by finding the middle value in the list.

Let’s start with a test to check the return value of calculateMedian given an ordered list of numbers.

Interactive code block

test("calculates the median of a list of odd length", function () {
  const list = [10, 20, 30, 50, 60];
  const currentOutput = calculateMedian(list);
  const targetOutput = 30;

  expect(currentOutput).toBe(targetOutput);
});

🔨 Implementing calculateMedian

So we can implement calculateMedian.

We can summarise our approach as follows.

In code we can we can use splice to to get the middle item.

Interactive code block

function calculateMedian(list) {
  const middleIndex = Math.floor(list.length / 2);
  const median = list.splice(middleIndex, 1)[0];

  return median;
}

Now suppose we have a program where we use the functions we implemented earlier:

Interactive code block

const salaries = [10, 20, 30, 40, 60, 80, 80];
const median = calculateMedian(salaries);
const mean = calculateMean(salaries);

console.log(`The median salary is ${median}`);
console.log(`The mean salary is ${mean}`);

🐛 Finding the bug

In the code above, the median value is correct: however, the mean is incorrect.

We can add a log to the program to identify the origin of the bug.

Interactive code block

const salaries = [10, 20, 30, 40, 60, 80, 80];
const median = calculateMedian(salaries);

console.log(salaries, "<--- salaries input before we call calculateMean");
const mean = calculateMean(salaries);

console.log(`The median salary is ${median}`);
console.log(`The mean salary is ${mean}`);

To understand why this bug occurs, we need to explore more concepts.

Arrays are stored by reference 🧶 🧶 reference A reference points to a location in memory.

Consider the following example,

Interactive code block

const list = [10, 20, 30];
const copy = list;
copy.push(60, 70);

console.log(list);
console.log(copy);

Let’s break down what is happening in this program.

🎮 Playing computer 📜 Explanation 🧠 Explain

Play computer with the code above to step through the code and find out what happens when the code is executed.

• We make an array [10, 20, 30] and store it somewhere in memory.
• list is assigned a reference to [10, 20, 30]
• copy is assigned a reference pointing at the same memory as list

At this stage in the program, list and copy point to the same location in memory.

• push function mutates (changes) the array that copy points to.
• prints out list: [10, 20, 30, 60, 70]
• prints out copy: [10, 20, 30, 60, 70]

So as copy and list point to the same array.
If we mutate list then we’re mutating the same list that copy points to.

So the console output is the same.

Interactive code block

const salaries = [10, 20, 30, 40, 60, 80, 80];
const median = calculateMedian(salaries);

console.log(salaries, "<--- salaries input before we call calculateMean");
const mean = calculateMean(salaries);

console.log(`The median salary is ${median}`);
console.log(`The mean salary is ${mean}`);

In the example above, salaries is assigned a reference on the first line.
Explain why calculateMedian and calculateMean both get access to the same array.

Shared reference

We can also check these variables share the same reference.

Interactive code block

const list = [10, 20, 30];
const copy = list;

console.log(list === copy); // evaluates to true

If we’re comparing 2 array variables with ===, then it will evaluate to true only if they have the same reference. === is comparing the references to the arrays, not the arrays themselves.

Value vs reference

In JavaScript, arrays and objects are reference types: everything else is a value type.

Use the tabs below to compare the effects of passing by reference and passing by value.
There are two different but similar implementations of pluralise - a function that appends an s to the end of its input.

Let’s take another look at our earlier implementation of calculateMedian:

function calculateMedian(list) {
  const middleIndex = Math.floor(list.length / 2);
  const median = list.splice(middleIndex, 1)[0];

  return median;
}

const salaries = [10, 20, 30, 40, 60, 80, 80];

const median = calculateMedian(salaries);
// At this point, the array referenced by salaries has been mutated after calculateMedian(salaries), and a reference to the same array is given to calculateMean
const mean = calculateMean(salaries);

console.log(`The median salary is ${median}`);
console.log(`The mean salary is ${mean}`);

calculateMedian gets the middle value by calling splice. However, splice is a mutating 🧶 🧶 mutating For arrays, mutation means changing the contents of an array. This could mean changing a value at some index or removing an item altogether. array method.

When we call splice it does 2 things:

• removes the specified item from the list
• returns the removed item

splice modifies the array: however, calculateMean is also passed a reference to the same array too.

In other words, calculateMedian modifies the same array that is passed to calculateMean.

Currently calculateMedian mutates its input - the list of numbers. This mutation is called a side effect 🧶 🧶 side effect A function has a side effect if it does something which can be observed from outside of the function (aside from returning a value). Removing an element from an array is a side effect. Logging something to the console is also a side effect. .

In this case, the side effect has unintended consequences. We have introduced a bug 🧶 🧶 bug Any unintended behaviour or effect from our software is called a bug. which makes calculateMean return the wrong value. Both calculateMean and calculateMedian need access to the original salaries array. Therefore, we should take make sure we don’t mutate the array unless we really mean to.

Testing no mutation

We can add an additional assertion to the tests for calculateMedian to check it isn’t modifying the original input:

Interactive code block

test("doesn't modify the input", () => {
  const list = [1, 2, 3];
  calculateMedian(list);

  expect(list).toEqual([1, 2, 3]); // Note that the toEqual matcher checks the values inside arrays when comparing them - it doesn't use `===` on the arrays, we know that would always evaluate to false.
});

In this test, we don’t check the return value of calculateMedian. We assert that the input has the same contents as the original input. We can use the toEqual matcher to check the contents of the array referenced by the variable list.

function calculateMedian(list) {
  const middleIndex = Math.floor(list.length / 2);
  const median = list.splice(middleIndex, 1)[0];

  return median;
}