Using JSON powered variables to perform JS math

Question

I am trying to perform some JS math to add a total value, based upon a series of variables which obtain their values from a JSON object. However when I run the script in the browser, the console log shows me almost half of the sum done and half just chained together as a string.

If I paste the following into the console:

var sparksOfferCount = 10;
var sparksAddedOffers = 3;
var sparksUNaddedOffers = (sparksOfferCount - sparksAddedOffers); // offers that haven't been added yet
var sparksAllRewards = 0;
var sparkstotalStreakOffers = 0;
var derivedSparksTotalOffers = (sparksUNaddedOffers + sparksAllRewards + sparkstotalStreakOffers);
console.log('derived total of new offers', derivedSparksTotalOffers);

It will return 7. However, above I have replaced references to the JSON object with actual integers. When I run my code like this where it takes it's values dynamically from the JSON call, it returns '70' in the console. Bizarre, because it means that it is able to subtract 3 from 10 and then add one 0 for sparksAllRewards, but it doesn't show another 0 for sparkstotalStreakOffers.

var sparksSSO = JSON.parse(sessionStorage.getItem('sparksSSO')) || {};
// global variables for use with session storage
var sparksOfferCount = (sparksSSO.totalOffers >= 0) ? sparksSSO.totalOffers : "" ;
var sparksAllOffers = (sparksSSO.allOffers);
var sparksAddedOffers = (sparksSSO.totalAddedOffers);
var sparksUNaddedOffers = (sparksOfferCount - sparksAddedOffers); // offers that haven't been added yet
var sparksAllRewards = (sparksSSO.allRewards);
var sparkstotalStreakOffers = (sparksSSO.totalStreakOffers);
var derivedSparksTotalOffers = (sparksUNaddedOffers + sparksAllRewards + sparkstotalStreakOffers);
console.log('derived total of new offers from session storage', derivedSparksTotalOffers);

I'm rather baffled. Any ideas?

EDIT: Here is the working script, as per the guidance of Arthur Borba

var sparksOfferCount = (sparksSSO.totalOffers >= 0) ? sparksSSO.totalOffers : 0 ;

var sparksAllOffers = Number(sparksSSO.allOffers); 
var sparksAddedOffers = Number(sparksSSO.totalAddedOffers);
var sparksUNaddedOffers = Number(sparksOfferCount - sparksAddedOffers); // offers that haven't been added yet
var sparksAllRewards = Number(sparksSSO.allRewards);
var sparkstotalStreakOffers = Number(sparksSSO.totalStreakOffers);
var derivedSparksTotalOffers = Number(sparksUNaddedOffers + sparksAllRewards + sparkstotalStreakOffers);
console.log('derived total of new offers from session storage', derivedSparksTotalOffers);

Answer 1

Try initializing your counter

var sparksOfferCount = (sparksSSO.totalOffers >= 0) ? sparksSSO.totalOffers : "" ;

with a zero (not an empty string), like this:

var sparksOfferCount = (sparksSSO.totalOffers >= 0) ? sparksSSO.totalOffers : 0 ;

And also check this Number so you ensure you are working with numbers and not strings:

var sparksAllOffers = Number(sparksSSO.allOffers); // do it for every variable

If that's not quite what you want, please provide some example of your JSON data.