Learn Advanced Array Methods by Building a Statistics Calculator - Step 27

Tell us what’s happening:

I am getting this eror message:“Your .forEach() method should increment the count for each number. Don’t forget the fallback value.” Even though I am changing “undefined” to 1 if that is the first time to encounter that number.

Your code so far

const getMode = (array) => {
const counts = {};
array.forEach((el) => {
if (counts[el] === undefined) {
counts[el] = 1;
} else {
counts[el]++;
}
});

}

<!-- file: index.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>
/* file: styles.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;
}
/* file: script.js */
const getMean = (array) => array.reduce((acc, el) => acc + el, 0) / array.length;

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


/* User Editable Region */

const getMode = (array) => {
  const counts = {};

  array.forEach((el) => {
    if (counts[el] === undefined) {
      counts[el] = 1;
    } else {
      counts[el]++;
    }
  });

}

/* User 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);

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Learn Advanced Array Methods by Building a Statistics Calculator - Step 27

it wants you to use the OR operator to check if counts[el] is undefined or not

Thanks, I solved it!!!

1 Like

Can you please explain further? I really don’t understand why to use OR in this case, thank you.

you can’t add 1 to a property object that doesn’t exist, so you use shortcircuiting to check if the property is defined before adding, if it’s not defined you sub in the value 0

shortcircuiting: the OR operator checks the value of the first element, if it’s truthy it gives back that value, if it’s falsy it gives back the value of the second element

let person = '';
let message = `Hey, ${person || "you"}, welcome back!`

for example this one checks if person has a value or not, an empty string is falsey (behaves like false in a boolean context), the OR operator gives back you, making the sentence Hey, you, welcome back!.
If instead

let person = "rexon";
let message = `Hey, ${person || "you"}, welcome back!`

This will give Hey, rexon, welcome back! because person has a truthy value.

There is also ?? which specifically gives back the second value only if the first is null or undefined, not for all falsey values.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.