如何重构 function vanilla js

Question

I am trying to refactor a function but can't figure out what could be the best approach for it

let smallNumber = 50;
let mediumNumber = 40;
let groupNumber = 35;

function price() {
  if (numberSelected <= 3) {
    document.getElementById("total").innerHTML = "£"+(smallNumber * numberSelected).toFixed(2);
  } else if (numberSelected <= 6) {
    document.getElementById("total").innerHTML = "£"+(mediumNumber * numberSelected).toFixed(2);
  } else if (numberSelected > 6) {
    document.getElementById("total").innerHTML = "£"+(groupNumber * numberSelected).toFixed(2);
  }
  total.style.display = "block";
  button.style.display = "block";
}

Thanks

Answer 1

You can start by dividing your code into smaller functions

 const convertToPounds = (num) => "£" + num.toFixed(2); const getNumToAdd = (input) => input <= 3? 50: (input > 6? 35: 40); const getFinalPrice = (input) => convertToPounds(getNumToAdd(input) + input); console.log(`Input: 2 Output: ${getFinalPrice(2)}`); console.log(`Input: 10 Output: ${getFinalPrice(10)}`); console.log(`Input: 5 Output: ${getFinalPrice(5)}`);

You can use the getFinalPrice function in your start function.

Answer 2

If you want to use ternary operator you can use this code. I add extra variable to reduce duplication of code.

function price() {
  let total = document.getElementById("total");
  total.style.display = "block";
  button.style.display = "block";
  let text;

  text = numberSelected <= 3 ? smallNumber :
         numberSelected <= 6 ? mediumNumber : groupNumber;

  total.innerHTML = "£" + (text * numberSelected).toFixed(2);
}

Answer 3

Since refactoring involves changing the implementation of your code, it's a good idea to have tests in place before you start refactoring. The tests will allow you to know if the refactor changed the behavior of the code you're refactoring. That said, you could do the following:

 function price() { let selectedNumber; if (numberSelected <= 3) { selectedNumber = smallNumber; } else if (numberSelected <= 6) { selectedNumber = mediumNumber; } else if (numberSelected > 6) { selectedNumber = groupNumber; } document.getElementById("total").innerHTML = "£" + (selectedNumber * numberSelected).toFixed(2); total.style.display = "block"; button.style.display = "block"; }