Not explicitly setting variable as a number yields NaN with subsequent math(s) functions

Question

This isn't a problem as such - more a general enquiry.

The following (working code) loops through a table of cart items, fetches the price and quantity entered for each item, and adds the results into the variable "cartTotal".

function updateCart(){
    var cartTotal = 0;
    jQ('#cartItems').find('tr').each(function(){
        $this = jQ(this);
        var price = $this.find('.itemPrice').text();
            price = Number(price.replace(/[^0-9\.]+/g,""));
        var qty = $this.find('input').val();
        var itemTotal = ( price * qty );
        cartTotal += itemTotal;
    });
    console.log(cartTotal);
};

Initially, I declared cartTotal without giving it a value of 0 - I assumed that with javascript being loosely typed, it would "know" cartTotal is a number as soon as numbers were added to it, as this is what I'd been lead to understand from various posts/articles I've read. But the console logged NaN.

Perhaps I've taken the "loosely typed" feature a bit too literally. Could somebody shed some light onto why not giving it an initial value yielded NaN?

score 2 · Accepted Answer · edited May 23 '17 at 12:05

2

The reason is that you are trying to add a number to an undefined variable, for JavaScript undefined + 10 for ex returns NaN, you could try it out with the following:

var cartTotal;
cartTotal += 10;
console.log(cartTotal);

For a great explanation on the difference between null and undefined look at this answer: Why is null an object and what's the difference between null and undefined?

Loosely typed means that a variable is declared without its type, so

var answer = 42;

is loosely typed, it's just a generic box holding the Number 42, when it comes to number addition the compiler knows how to sum the two and gives you the result.

edited May 23 '17 at 12:05

Community

1
1

answered May 17 '13 at 15:17

Alberto Zaccagni

30,779
11
72
106

So, a variable declaration (without a value) is always given null? – verism May 17 '13 at 15:18
I'd assumed that "undefined" acted as a kind of placeholder for whatever value would later be assigned - I think I understand now. – verism May 17 '13 at 15:23
I edited my answer with a link that has a great explanation about that. – Alberto Zaccagni May 17 '13 at 15:29
Great link, thanks. It already hurts trying to understand it though. _"In short; undefined is where no notion of the thing exists; it has no type, and it's never been referenced before in that scope"_ appears to conflict with my example, but I'm sure that's just me not quite getting it yet. – verism May 17 '13 at 15:37
`undefined` means that no such thing named as that exists, so if you try to add something to that you get `NaN` because the sum operation failed. I've expanded my answer adding a small explanation of loosely typed. – Alberto Zaccagni May 17 '13 at 15:45

Dave · Answer 2 · 2013-05-17T15:25:26.720

1

var cartTotal is undefined but you then try to use it using +=. This will not work as JavaScript does not know what type cartTotal is as you haven't set it to 0. Its not strong types so has no way of knowing to convert undefined to 0.

See: Example

var cartTotal; // Undefined
var cartTotal = 0; // Defined as number


var cartTotal;
var itemTotal = 12;
alert("Cart total type: " + typeof(cartTotal)); // Causes an ex so returns NaN.
cartTotal += itemTotal; 
alert(cartTotal);

var cartTotal = 0;
var itemTotal = 12;
alert("Cart total type: " + typeof(cartTotal));
cartTotal += itemTotal; 
alert(cartTotal);

edited May 17 '13 at 15:25

answered May 17 '13 at 15:18

Dave

95
5

I read about certain operators acting as ways of changing a variable's type (numbers to strings, etc) but I guess there are only some very specific examples of this. – verism May 17 '13 at 15:27

Not explicitly setting variable as a number yields NaN with subsequent math(s) functions

2 Answers2