---
id: 6352fce75b2d3b2924930f1e
title: Step 51
challengeType: 0
dashedName: step-51
---

# --description--

With two `.map()` calls and a `.reduce()` call, you're creating extra arrays and iterating more times than needed. You should move all of the logic into the `.reduce()` call to save time and memory.

Remove the `differences`, `squaredDifferences`, and `sumSquaredDifferences` variables (and their values). Declare a `variance` variable, and assign it the value of `array.reduce()`. For the callback, pass in your standard `acc` and `el` parameters, but leave the function body empty for now. Don't forget to set the initial value to `0`.

# --hints--

You should remove the `differences` variable.

```js
assert.notMatch(getVariance.toString(), /differences\s*=/);
```

You should remove the `squaredDifferences` variable.

```js
assert.notMatch(getVariance.toString(), /squaredDifferences\s*=/);
```

You should remove the `sumSquaredDifferences` variable.

```js
assert.notMatch(getVariance.toString(), /sumSquaredDifferences\s*=/);
```

You should have a `variance` variable.

```js
assert.match(getVariance.toString(), /variance\s*=/);
```

Your `variance` variable should use the `array.reduce()` method.

```js
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(/);
```

Your `variance` variable should use the `acc` and `el` parameters in the callback function.

```js
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(\s*(function\s*\(\s*acc\s*,\s*el\s*\)|\(\s*acc\s*,\s*el\s*\)\s*=>)/);
```

Your `reduce` callback should be an empty function.

```js
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(\s*(function\s*\(\s*acc\s*,\s*el\s*\)|\(\s*acc\s*,\s*el\s*\)\s*=>)\s*\{\s*\}/);
```

Your `reduce` callback should have an initial value of `0`.

```js
assert.match(getVariance.toString(), /variance\s*=\s*array\.reduce\(\s*(function\s*\(\s*acc\s*,\s*el\s*\)|\(\s*acc\s*,\s*el\s*\)\s*=>)\s*\{\s*\}\s*,\s*0\s*\)/);
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./styles.css" />
    <script src="./script.js"></script>
    <title>Statistics Calculator</title>
  </head>
  <body>
    <h1>Statistics Calculator</h1>
    <p>Enter a list of comma-separated numbers.</p>
    <form onsubmit="calculate(); return false;">
      <label for="numbers">Numbers:</label>
      <input type="text" name="numbers" id="numbers" />
      <button type="submit">Calculate</button>
    </form>
    <div class="results">
      <p>
        The <dfn>mean</dfn> of a list of numbers is the average, calculated by
        taking the sum of all numbers and dividing that by the count of numbers.
      </p>
      <p class="bold">Mean: <span id="mean"></span></p>
      <p>
        The <dfn>median</dfn> of a list of numbers is the number that appears in
        the middle of the list, when sorted from least to greatest.
      </p>
      <p class="bold">Median: <span id="median"></span></p>
      <p>
        The <dfn>mode</dfn> of a list of numbers is the number that appears most
        often in the list.
      </p>
      <p class="bold">Mode: <span id="mode"></span></p>
      <p>
        The <dfn>range</dfn> of a list of numbers is the difference between the
        largest and smallest numbers in the list.
      </p>
      <p class="bold">Range: <span id="range"></span></p>
      <p>
        The <dfn>variance</dfn> of a list of numbers measures how far the values
        are from the mean, on average.
      </p>
      <p class="bold">Variance: <span id="variance"></span></p>
      <p>
        The <dfn>standard deviation</dfn> of a list of numbers is the square
        root of the variance.
      </p>
      <p class="bold">
        Standard Deviation: <span id="standardDeviation"></span>
      </p>
    </div>
  </body>
</html>
```

```css
body {
  margin: 0;
  background-color: rgb(27, 27, 50);
  text-align: center;
  color: #fff;
}

button {
  cursor: pointer;
  background-color: rgb(59, 59, 79);
  border: 3px solid white;
  color: white;
}

input {
  background-color: rgb(10, 10, 35);
  color: white;
  border: 1px solid rgb(59, 59, 79);
}

.bold {
  font-weight: bold;
}
```

```js
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;

const getMedian = (array) => {
  const sorted = array.toSorted((a, b) => a - b);
  const median =
    sorted.length % 2 === 0
      ? getMean([sorted[sorted.length / 2], sorted[sorted.length / 2 - 1]])
      : sorted[Math.floor(sorted.length / 2)];
  return median;
}

const getMode = (array) => {
  const counts = {};
  array.forEach(el => counts[el] = counts[el] ? counts[el] + 1 : 1);

  if (new Set(Object.values(counts)).size === 1) {
    return null;
  }
  const highest = Object.keys(counts).sort(
    (a, b) => counts[b] - counts[a]
  )[0];
  const mode = Object.keys(counts).filter(
    (el) => counts[el] === counts[highest]
  );
  return mode.join(", ");
}

const getRange = (array) => {
  return Math.max(...array) - Math.min(...array);
}

--fcc-editable-region--
const getVariance = (array) => {
  const mean = getMean(array);
  const differences = array.map(
    el => el - mean
  );
  const squaredDifferences = differences.map(
    el => el ** 2
  );
  const sumSquaredDifferences = squaredDifferences.reduce(
    (acc, el) => acc + el, 0
  );
}
--fcc-editable-region--

const calculate = () => {
  const value = document.querySelector("#numbers").value;
  const array = value.split(/,\s*/g);
  const numbers = array.map(el => Number(el)).filter(el => !isNaN(el));
  
  const mean = getMean(numbers);
  const median = getMedian(numbers);
  const mode = getMode(numbers);
  const range = getRange(numbers);

  document.querySelector("#mean").textContent = mean;
  document.querySelector("#median").textContent = median;
  document.querySelector("#mode").textContent = mode;
  document.querySelector("#range").textContent = range;
}
```
