Javascript Function and Prototype - Main Routing Issue Using Call Methods

Question

I come to learn JavaScript from the Ruby background, so I had trouble understanding (and putting this in words) why my code does not produce the results that I need. I ran this on pythontutor.com to see a step-by-step description of what is happening, and this confirms my suspicions. However, I do not know exactly why this is so.

I am creating a thermostat and it should return “green” when the temperature is below 18dC. In my penultimate line, console.log has a value of 17, which is correct, however, when I call thermostat.displayColor on the last line, it still says yellow. The code exits there and does not return via this.displayColor = this.currentColor() , which I expect from it (since it did this on first run to determine the initial color as "yellow".

The code works correctly and returns "green" if I modify the code to directly call the prototype method this.currentColor() , however I just want to know why it does not allow me to do it the way I wrote below.

I am not sure of the terminology to describe this problem, so I apologize in advance for the fact that my title was not accurate.

 var DEFAULT_TEMP = 20; function Thermostat(){ this.temperature = DEFAULT_TEMP; this.maxTemp = 25; this.powerMode = 'on'; this.displayColor = this.currentColor() }; Thermostat.prototype.downButton = function(){ if (this.temperature === 10){ throw new Error('temp cannot be lower than 10dC'); }; this.temperature --; }; Thermostat.prototype.currentColor = function() { if ((this.temperature >= 18) && (this.temperature < 25)) { return 'yellow' } else if (this.temperature < 18) { return 'green' } else { return 'red' } }; var thermostat = new Thermostat(); for (var i = 1; i <= 3; i++) { thermostat.downButton(); }; console.log("spec file test green, temp should be 17 and is:" + thermostat.temperature) console.log(thermostat.displayColor); //this should be green, but it is yellow! 

Answer 1

You must call the currentColor() method, displayColor set only in the constructor (when the temperature is 20) and does not change when the temperature changes.

It might make sense to add a color setting to the downButton method:

 Thermostat.prototype.downButton = function(){ if (this.temperature === 10){ throw new Error('temp cannot be lower than 10dC'); }; this.temperature --; this.displayColor = this.currentColor(); }; 

Answer 2

As Rob says, you have to call a function that calculates the current color. Here is his suggestion and some improvements in your code:

 function Thermostat() { this.MIN_TEMP = 10; this.MAX_TEMP = 25; this.temperature = 20; } Thermostat.prototype.decreaseTemp = function () { if (this.temperature > this.MIN_TEMP) this.temperature--; }; Thermostat.prototype.increaseTemp = function () { if (this.temperature < this.MAX_TEMP) this.temperature++; }; Thermostat.prototype.currentColor = function() { if (this.temperature < 18) return 'green'; if (this.temperature < 25) return 'yellow'; return 'red'; }; var thermostat = new Thermostat(); for (var i = 1; i <= 3; i++) { thermostat.decreaseTemp(); } // no errors mean all assertions pass thermostat.temperature.should.equal(17); thermostat.currentColor().should.equal('green'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/should.js/8.2.2/should.min.js"></script>