Custom counting method in JavaScript

Question

For learning purposes I've created a JS-File. I implemented a Method inside the JS-Object to get a BookStorage counter. The thing is everytime I add Books the Browser gives me back the default value for the Object. Anyone have an Idea?

Here is some snippets of my Code:

Book-Class:

class Book{
constructor(
    name,
    quantity
){
    this.name = name,
    this.quantity = quantity
}
showStorage(param) {
    if(param != null){
        return this.quantity + param;
        this.quantity += param;
    }
        else {return this.quantity;}
    }
}

Main-Script:

    import Book from "./Book.js"

const lordOfRings = new Book(
  "Lord of the Rings",
  10
)

console.log("The Book:", lordOfRings.name);
console.log("The number in Storage:", lordOfRings.showStorage());
console.log("Adding 10 Books to storage:", lordOfRings.showStorage(10));
console.log("Adding 10 Books to storage:", lordOfRings.showStorage());
console.log("New Storage amount of Books:", lordOfRings.showStorage(10));

My expected output was:

"Lord of the Rings"
10
20
20
30

Instead of that I get:

"Lord of the Rings"
10 
20 
10 
20

If you don't pass any argument, param is undefined, not null. — Christian Vincenzo Traina
– Christian Vincenzo Traina, Commented Jun 27, 2022 at 14:12
In your showStorage method, you return before changing the value of this.quantity. Your return statement should be the very last thing you do in your method. — D M
– D M, Commented Jun 27, 2022 at 14:13
@DM, Thank you for the information too. For the conventions I will keep this in mind.. — MomoCodez
– MomoCodez, Commented Jun 27, 2022 at 14:23

Andrei Calinescu · Accepted Answer · 2022-06-27 14:38:58Z

1

The problem is because in a function, the return should be the last line.

The return statement ends function execution and specifies a value to be returned to the function caller. (MDN Docs)

Since the function execution ends, it means the code after the return statement is never executed.

I recommend debugging your code using a code execution visualizer

Here's part of your code. You tried to change the value of this.quantity after the return statement.

showStorage(param) {
    if(param != null){
        return this.quantity + param; // This doesn't change the value of this.quantity. It just returns that value + 10 (in your example). The value of `this.quantity` is always the same.

        // This line does not run because it's after the return statement
        this.quantity += param;
    }
        else {return this.quantity;}
    }
}

Here's a minimal fix. You need to increment the value of this.quantity, then return it.

showStorage(param) {
    if(param != null){
        this.quantity += param;
        return this.quantity;
    }
        else {return this.quantity;}
    }
}

Here's a refactor taking into account comments from Ivar and Cristian Traìna

showStorage(param) {
    if(param){ // an empty `param` is `undefined`, not `null` as the commenter said above.
        this.quantity += param;
    }
    return this.quantity;
}

edited Jun 27, 2022 at 14:38

answered Jun 27, 2022 at 14:20

Andrei Calinescu

3213 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrei Calinescu Over a year ago

Good point @Ivar! I was intending to only change the parts of the code that caused the unexpected behavior. I added an option to show your suggestion too.

Collectives™ on Stack Overflow

Custom counting method in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related