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

Tell us what’s happening:

Please help!
I need to convert the if…else statements into a ternary

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

Here is what I have :
const getMode = (array) => {
const counts = {};
array.forEach((el) => counts[el] ? counts[el] += 1 : counts[el] = 1)
}
return counts
}

Your code so far

<!-- 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: 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 => counts[el] ? counts[el] += 1 :  counts[el] = 1)
  }
  return counts

// 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);
  console.log(getMode(numbers));

  document.querySelector("#mean").textContent = mean;
  document.querySelector("#median").textContent = median;
}
/* 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;
}

Your browser information:

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

Challenge Information:

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

For a ternary, I recommend the pattern

someVariable = someTest ? valueIfTrue : valueIfFalse

So, what is the variable you’re updating, what is the tested condition, what do you want to be saved in your variable if the condition is true, and what do you want to be saved into the variable if the condition is false?

I want to check if the current element is inside the counts object. If the element can be found, increment the value of counts[el] by 1 . Otherwise, assign the number 1 to counts[el] .

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

You should not have an assignment inside of the ternary. That’s not the pattern I showed above

if the condition is true, i want to increment the value of counts[el] by 1, if it is untrue, i want to assign the number 1 to counts[el]

If you are incrementing, what is the value that gets stored back into counts[el]?

It’s a bit confusing bc your syntax does work, and the original if uses +=.

Do not use += in the ternary. How would you refactor it?

someVariable = someTest ? valueIfTrue : valueIfFalse

Expand the original assignment and imagine the code is this:

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

removed solution

Thanks

2 Likes

It is great that you solved the challenge, but please don’t post solution code.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.