Bizarre bug in simple javascript shopping basket code

Question

So the following code should result in the log displaying an array with firstly just the Ticket object with a quantity of 1, then secondly the same Ticket object but with a quantity of 4. Then finally two objects - Ticket with quantity of 3, and a Ticket 2 object with a quantity of 5.

Yet for some reason all three logs are just showing the final result of two objects, despite the functions not being called again until after the initial log. What the hell is happening here?

var basket = [];

var Item = function(name, id, price, quantity){
    this.name = name;
    this.id = id;
    this.price = price;
    this.quantity = quantity;
};

function addItemToBasket(name, id, price, quantity){
    for (var i in basket){
        if (basket[i].id === id){
            basket[i].quantity += quantity;
            return;
        }
    }
    var item = new Item(name, id, price, quantity);
    basket.push(item);
}



function removeItemFromBasket(id){
    for (var i in basket){
        if (basket[i].id === id){
            basket[i].quantity--;
            if (basket[i].quantity === 0){
                basket.splice(i, 1);
            }
            return;
        }
    }
}

addItemToBasket('Ticket', 1, 225, 1);
console.log(basket);
addItemToBasket('Ticket', 1, 225, 3);
console.log(basket);
addItemToBasket('Ticket #2', 2, 450, 5);
removeItemFromBasket(1);
console.log(basket);

It looks like you're a victim of [asynchronous console.log](https://stackoverflow.com/questions/23392111/console-log-async-or-sync), the true values are OK, see it at [jsFiddle](https://jsfiddle.net/owp0fgub/). — Teemu, Jan 24 '20 at 05:34

Mohamed Farouk · Answer 1 · 2020-01-24T05:45:20.067

I think you were trying to exit a for loop with a return instead of a continue.

var basket = [];

var Item = function(name, id, price, quantity) {
  this.name = name;
  this.id = id;
  this.price = price;
  this.quantity = quantity;
};

function addItemToBasket(name, id, price, quantity) {
  for (var i in basket) {
    if (basket[i].id === id) {
      basket[i].quantity += quantity;
      return;
    }
  }
  var item = new Item(name, id, price, quantity);
  basket.push(item);
}



function removeItemFromBasket(id) {
  for (var i in basket) {
    if (basket[i].id === id) {
      basket[i].quantity--;
      if (basket[i].quantity === 0) {
        basket.splice(i, 1);
      }
      continue;
    }
  }
}

addItemToBasket('Ticket', 1, 225, 1);
console.log("Should return 1 item with quantity 1");
console.log(basket);
addItemToBasket('Ticket', 1, 225, 3);
console.log("Should return 1 item with quantity 4");
console.log(basket);
addItemToBasket('Ticket #2', 2, 450, 5);
console.log("Should return 2 items with quantities 4, 5");
console.log(basket);
removeItemFromBasket(1);
console.log("Should return 2 items with quantities 3, 5");
console.log(basket);

I added extra logs and things seems logical to me.. where is the error? — Mohamed Farouk, Jan 24 '20 at 05:46
Oops, I didn't notice the extra logs. No errror, but also no difference, except OP's code is a bit faster, when it returns immediately when the job was done, your loop will go to the end in all cases. In StackConsole things are represented differently from the real console, that's why your code shows correct results here (OP's code would do the same if it was put in a StackSnippet). — Teemu, Jan 24 '20 at 05:50

Sarfraaz · Answer 2 · 2020-01-24T05:47:40.780

Your code runs just fine with me, Maybe its the issue with the version of javascript where you are running this code

var basket = [];

var Item = function(name, id, price, quantity){
    this.name = name;
    this.id = id;
    this.price = price;
    this.quantity = quantity;
};

function addItemToBasket(name, id, price, quantity){
    for (var i in basket){
        if (basket[i].id === id){
            basket[i].quantity += quantity;
            return;
        }
    }
    var item = new Item(name, id, price, quantity);
    basket.push(item);
}

function removeItemFromBasket(id){
    for (var i in basket){
        if (basket[i].id === id){
            basket[i].quantity--;
            if (basket[i].quantity === 0){
                basket.splice(i, 1);
            }
            return;
        }
    }
}

addItemToBasket('Ticket', 1, 225, 1);
console.log(basket);
addItemToBasket('Ticket', 1, 225, 3);
console.log(basket);
addItemToBasket('Ticket #2', 2, 450, 5);
removeItemFromBasket(1);
console.log(basket);

Yes, its of no use, can you share the runtime where you are running this code & getting the wrong output ? — Sarfraaz, Jan 24 '20 at 05:48
Please see my comment on the commentthread of the post, there's a link to jsFiddle demonstrating the problem. — Teemu, Jan 24 '20 at 05:52

Bizarre bug in simple javascript shopping basket code

2 Answers2