JS function create and push into array - only first element is NaN

Question

var tipsArray = [];
var finalBillArray = [];
var tip;
var finalBill;

function calculator(bill) {
    finalBill = tip + bill;

    if (bill < 50) {
        tip = bill * 0.2;
    } else if (bill >= 50 && bill <= 200) {
        tip = bill * 0.15;
    } else {
        tip = bill * 0.1;
    }

    tipsArray.push(tip);
    finalBillArray.push(finalBill);

    }

calculator(124);
calculator(48);
calculator(268);

console.log(tipsArray);
console.log(finalBillArray);

I'm trying to solve one of the tasks on UDEMY course. And can't understand, why only first element in finalBillArray is NaN, but the others looks good.

Answer 1

In your current code, tip is not assigned to until the if (bill... tests inside calculator, below the assignment to finalBill. Assign to finalBill after creating the tip instead, which will not only result in no NaNs, but will also give you accurate results (your current tips for each bill are being calculated based on the tip of the previous bill, not the current bill):

var tipsArray = [];
var finalBillArray = [];

function calculator(bill) {

  var tip;
  var finalBill;
  if (bill < 50) {
    tip = bill * 0.2;
  } else if (bill >= 50 && bill <= 200) {
    tip = bill * 0.15;
  } else {
    tip = bill * 0.1;
  }

  tipsArray.push(tip);
  finalBill = tip + bill;
  finalBillArray.push(finalBill);

}

calculator(124);
calculator(48);
calculator(268);

console.log(tipsArray);
console.log(finalBillArray);

If you don't like the floating-point numbers there, you can use Math.round as well; Math.round(tip * 100) / 100; will round to 2 decimal places. (If you don't need a number, you can use toFixed(2) instead, which is easier)

var tipsArray = [];
var finalBillArray = [];

function calculator(bill) {

  var tip;
  var finalBill;
  if (bill < 50) {
    tip = bill * 0.2;
  } else if (bill >= 50 && bill <= 200) {
    tip = bill * 0.15;
  } else {
    tip = bill * 0.1;
  }
  tip = Math.round(tip * 100) / 100;

  tipsArray.push(tip);
  finalBill = tip + bill;
  finalBillArray.push(finalBill);

}

calculator(124);
calculator(48);
calculator(268);

console.log(tipsArray);
console.log(finalBillArray);

Answer 2

Your problem is that your tip variable is not initialized when you call the function in other words it's undefined, so when you call :

finalBill = tip + bill;

It will return NaN because, undefined+bill is not a valid Number.

Solution:

You just need to put the line finalBill = tip + bill; after your if block, so the tip variable can be correctly be initialized.

if (bill < 50) {
    tip = bill * 0.2;
} else if (bill >= 50 && bill <= 200) {
    tip = bill * 0.15;
} else {
    tip = bill * 0.1;
}
finalBill = tip + bill;

Demo:

var tipsArray = [];
var finalBillArray = [];
var tip;
var finalBill;

function calculator(bill) {

    if (bill < 50) {
        tip = bill * 0.2;
    } else if (bill >= 50 && bill <= 200) {
        tip = bill * 0.15;
    } else {
        tip = bill * 0.1;
    }
    finalBill = tip + bill;

    tipsArray.push(tip);
    finalBillArray.push(finalBill);

    }

calculator(124);
calculator(48);
calculator(268);

console.log(tipsArray);
console.log(finalBillArray);