How Observable pattern works in Javascript? - javascript

I can easily understand how it works in C#, but in Javascript I'm a little bit confused. Here is a little test code I wrote:
function Lunch(name,price)
{
var priceChanging = [], priceChanged = [];
this.name = function(val)
{
return name;
}
this.price = function(val)
{
if(val !== price && val !== undefined )
{
for(var i = 0; i < priceChanging.length; i++)
{
if(!priceChanging[i](this,val))
{
return price;
}
}
price = val;
for(var i = 0; i < priceChanged.length; i++)
{
priceChanged[i](this);
}
}
return price;
}
this.OnPriceChanging = function(val)
{
priceChanging.push(val);
}
this.OnPriceChanged = function(val)
{
priceChanged.push(val);
}
}
var order = new Lunch("Fish and Chips",20);
console.log(order.name());
console.log(order.price());
order.OnPriceChanging(function(name,price)
{
if(price > 30)
{
console.log("Price too high");
return false;
}
return true;
});
order.OnPriceChanged(function(name)
{
console.log("Price changed to: $" + name.price());
});
It runs fine, the thing is I want to be able to explain it to myself. I'm not in front of a debugger and just used Notepad at the moment. I just thought of it like .NET where subscribers are put in a container, I'm just curious how it works in Javascript.
Does the OnPriceChanging and OnPriceChanged function call themselves automatically anytime you add/change the price? I guess I'm just uncomfortable with how Javascript is loosely typed and all.
As always, I'm very thankful for all the imparted knowledge.

It's really quite simple. You have two arrays that store functions:
var priceChanging = [], priceChanged = [];
You have two methods that push functions into the arrays:
this.OnPriceChanging = function(val)
{
priceChanging.push(val);
}
this.OnPriceChanged = function(val)
{
priceChanged.push(val);
}
You then push functions into the arrays:
order.OnPriceChanging(function(name,price)
{
if(price > 30)
{
console.log("Price too high");
return false;
}
return true;
});
order.OnPriceChanged(function(name)
{
console.log("Price changed to: $" + name.price());
});
Note that the code above may be confusing if you're not used to seeing anonymous functions. They are exactly equivalent to this:
function priceChangingCallback (name,price)
{
if(price > 30)
{
console.log("Price too high");
return false;
}
return true;
}
function priceChangedCallback (name)
{
console.log("Price changed to: $" + name.price());
})
order.OnPriceChanging(priceChangingCallback);
order.OnPriceChanged(priceChangedCallback);
So you see, the arrays priceChanging and priceChanged should now both contain a single function each.
Does the OnPriceChanging and OnPriceChanged function call themselves automatically anytime you add/change the price?
No, they do not. In fact to be precise, it's not OnPriceChanging and OnPriceChanged that are called. It's functions inside the arrays priceChanging and priceChanged. And they don't call themselves. You called them:
this.price = function(val)
{
if(val !== price && val !== undefined )
{
for(var i = 0; i < priceChanging.length; i++)
{
if(!priceChanging[i](this,val)) // <--- you're calling it here!!
{
return price;
}
}
price = val;
for(var i = 0; i < priceChanged.length; i++)
{
priceChanged[i](this); // <-- you're calling it here!!
}
}
return price;
}
You're calling all functions inside priceChanging and priceChanged arrays inside for loops. Functions that you added to the arrays using the OnPriceChanging and OnPriceChanged methods.

Related

JavaScript Need help writing shouldQuarantine prototype

Need this to determine if any of the passengers are isHealthy =false then quarantine the wagon. I may have an issue on the join prototype as well. The isHealthy is only triggered if they eat and have no food. So it is possible for them to eat, and then have no food but not trigger isHealthy.
I am very new to this please be patient.
const Traveler = function (travelerName) {
this.name = travelerName;
this.food = 1;
this.isHealthy = true;
};
Traveler.prototype.hunt = function () {
this.food += 2;
console.log(this.food);
};
Traveler.prototype.eat = function () {
this.food -= 1;
if (this.food === 1) {
} else {
this.food === 0;
this.isHealthy = false;
}
console.log(this.food);
};
console.log(new Traveler("John"));
function Wagon(capacity) {
this.capacity = capacity;
this.passengers = [];
}
console.log(new Wagon(4));
Wagon.prototype.getAvailableSeatCount = function () {
let seatingCapacity = this.capacity - this.passengers.length;
console.log(seatingCapacity);
return seatingCapacity;
};
Wagon.prototype.join = function (traveler) {
console.log(this.capacity);
let currentCapacity = this.capacity;
if (currentCapacity <= this.passengers.length) {
this.currentCapacity = 0;
} else if (this.getAvailableSeatCount != 0) {
this.passengers.push(traveler);
}
console.log(this.passengers);
};
Wagon.prototype.shouldQuarantine = function () {
for (let i = 0; i < this.passengers.length; i++) {
if (this.passengers[i].isHealthy) {
return false;
}
}
};
Wagon.prototype.totalFood = function () {
let totalFood = "";
this.passengers.forEach(this.food);
console.log(this.food);
};
In you eat method of the Traveler class, first check if there is any food. If there is, then subtract one and check if the food is now empty. If it is then set isHealthy to false.
Traveler.prototype.eat = function () {
if (this.food > 0) {
this.food -= 1;
if (this.food === 0) {
this.isHealthy = false;
}
}
};
Subsequently you should also modify your hunt method to make your traveler healthy again after hunting.
Traveler.prototype.hunt = function () {
this.food += 2;
this.isHealthy = true;
};
In the shouldQuarantine method of the Wagon class, instead of checking if all passengers are healthy, check if anyone of them is not healthy and return true if that is the case.
If everyone is healthy, the loop will finish. Return false after the loop.
Wagon.prototype.shouldQuarantine = function () {
for (let i = 0; i < this.passengers.length; i++) {
if (!this.passengers[i].isHealthy) {
return true;
}
}
return false;
};
Alternatively you could use the some method on the this.passengers array to check if any of the passenger isn't healthy.
Wagon.prototype.shouldQuarantine = function () {
return this.passengers.some(
passenger => passenger.isHealthy === false
);
};
The join method can be simplyfied. You only need the result from this.getAvailableSeatCount() to see if there is any room. Add the traveler if the result is not 0.
Wagon.prototype.join = function (traveler) {
const availableSeats = this.getAvailableSeatCount();
if (availableSeats !== 0) {
this.passengers.push(traveler);
}
};
I also noticed that the totalFood method doesn't work as expected, but I'll let this one up to you. Hint: totalFood should be a number. Loop over every passenger and add the amount of food to the totalFood value.

Using a method inside another method

I'm not sure if this is bad code or would it be "better" to put the isPrime function in a method and then use that method inside the printSomething method?, if so how would it be possible how can i use one method inside another method?
class PrimeNumbers{
constructor(isPrime, number){
this.isPrime = isPrime;
this.succes = "succes";
this.failure = "failure";
this.number = number;
}
printSomething(isPrime){
if (!this.isPrime(this.number)) {
console.log(this.succes);
} else {
console.log(this.failure);
}
}
}
function isPrime(value) {
if (value == 1) return false;
for (let i = 2; i <= Math.sqrt(value); i++) {
if (value % i == 0) {
return false;
}
}
return true;
}
let primeTest = new PrimeNumbers(isPrime, 10)
primeTest.printSomething()
Hopefully someone who can explain this better than me comes along. In case they don't ... you can add isPrime as a method on PrimeNumbers and then use it with this.isPrime(). Here, this refers to the current object that you're dealing with.
When you do let primeTest = new PrimeNumbers(10); primeTest becomes an instance of PrimeNumbers, when you do primeTest.printSomething() you're accessing the printSomething property on primeTest and calling it. Once the code is executing inside printSomething it will often need a way to refer to the object that's stored in primeTest that's what the this keyword does; it allows you to refer to the particular instance of the object that's being dealt with when the code runs.
This page is probably much better at explaining what I've just tried to explain.
In terms of whether it's better to add to add isPrime to the class. I'm not really sure, it might depend on some other things. If you don't add it to the class it's pretty unlikely that you need to pass the function as an argument to the constructor (though there probably are reasons to do this there's probably no point if you're always passing in the same function) you can just call the function inside the class methods.
isPrime as method:
class PrimeNumbers{
constructor(number){
this.succes = "succes";
this.failure = "failure";
this.number = number;
}
printSomething(){
if (!this.isPrime(this.number)) {
console.log(this.succes);
} else {
console.log(this.failure);
}
}
isPrime(value) {
if (value == 1) return false;
for (let i = 2; i <= Math.sqrt(value); i++) {
if (value % i == 0) {
return false;
}
}
return true;
}
}
let primeTest = new PrimeNumbers(10);
primeTest.printSomething();
isPrime as function called from the class:
function isPrime(value) {
if (value == 1) return false;
for (let i = 2; i <= Math.sqrt(value); i++) {
if (value % i == 0) {
return false;
}
}
return true;
}
class PrimeNumbers{
constructor(number){
this.succes = "succes";
this.failure = "failure";
this.number = number;
}
printSomething(){
if (!isPrime(this.number)) {
console.log(this.succes);
} else {
console.log(this.failure);
}
}
}
let primeTest = new PrimeNumbers(10);
primeTest.printSomething();

Must memoized functions be defined as variables?

I've just asked this question (multiple errors while momoizing function inside another function) and I've got a nice answer... but! Just to understand a little more about JavaScript, I'd like to know if the momoized function can be written in this style:
function main () {
function memoized_f(){
//memoizing code
}
}
EDIT: Please notice I'm not asking what is the difference in the code above, I'm asking if it is possible to memoize the second one!
So, how to rewrite this?
function main() {
var create_node = (function() {
var memo;
console.log("memo: " + memo);
console.log("create_node")
function f() {
var value;
if (memo) {
value = memo.cloneNode();
console.log("clone node");
console.log(value);
} else {
var value = document.createElement("div");
value.innerHTML = "hello";
console.log("new node");
console.log("value: " + value);
memo = value;
}
return value;
}
return f;
})();
var collection = [];
for (var i = 0; i < 10; i++) {
collection.push(create_node());
};
// Display results
for (var i = 0; i < 10; i++) {
console.log(i + ". " + collection[i]);
}
}
main();
Since functions in javascript are an object, you can just use that function to memoize the value. I think it would make more sense in fib example, but here is your original post.
function main() {
// memoizing function
function create_node() {
var value;
// read from memo on function object
if (create_node.memo) {
value = create_node.memo.cloneNode();
value.innerHTML = 'cloned';
console.log("clone node");
console.log(value);
} else {
var value = document.createElement("div");
value.innerHTML = "hello";
console.log("new node");
console.log("value: " + value);
// retain memo on the function object
create_node.memo = value;
}
return value;
}
var collection = [];
for (var i = 0; i < 10; i++) {
collection.push(create_node());
};
// Display results
for (var i = 0; i < 10; i++) {
console.log(i + ". " + collection[i]);
document.getElementById('container').appendChild(collection[i]);
}
}
main();
<div id="container"></div>
Your actual memoized function is f. The (function(){ ... })() IIFE wrapping merely provides a an additional closure-layer to hide the variable memo so that it is visible only to f.
To repeat that: the (function(){...})() expression is not your memoized function. It is wrapping that restricts visibility of an inner variable and ultimately returns your memoized function f, which is defined inside of it. If you were okay with exposing memo to other code in main and not restrict its visibility to the memoized function only, you could eliminate the IIFE wrapping entirely and simply rename f to create_node:
function main() {
var memo;
function create_node() {
var value;
if (memo) { value = memo.cloneNode(); }
else {
var value = document.createElement("div");
value.innerHTML = "hello";
memo = value;
}
return value;
}
// use `create_node` as originally done
// NOTE that other code can manipulate `memo` now, though!
}
main();
If you like, you can supply the closure wrapping via a function declaration instead of IIFE:
function createMemoizedFunc() {
var memo;
function f() {
var value;
if (memo) { value = memo.cloneNode(); }
else {
var value = document.createElement("div");
value.innerHTML = "hello";
memo = value;
}
return value;
}
return f;
}
var create_node = createMemoizedFunc();

Trouble working out whether one attribute of an object is greater that another attribute of that object

I am comparing two attributes of the same object to work out which one is larger, if one is larger then it sets another attribute to True.. else it sets it to false.
Here is my function:
country.prototype.cure = function(){
for (var i = 0; i<this.diseases.length; i++)
{
console.log(this.health);
console.log(this.diseases[i].cureLevel);
if (this.heatlh >= this.diseases[i].cureLevel)
{
this.diseases[i].cured = true;
createDiseaseTable();
}
else
{
this.diseases[i].cured = false;
}
}
}
NOTE: this.health = 39000000 and this.diseases[i].cureLevel = 2500000
The problem is that whenever I run the function, despite this.health being larger it will always miss the if and go straight to the else...
Try this:
country.prototype.cure = function(){
for (var i = 0; i<this.diseases.length; i++)
{
var a=parseInt(this.health);
var b=parseInt(this.diseases[i].cureLevel);
if (a >= b)
{
this.diseases[i].cured = true;
createDiseaseTable();
}
else
{
this.diseases[i].cured = false;
}
}
}

Working with Ranges in Google Apps Scripts

Im writing a simple function in Google Spreadsheets.
I want to input two ranges in the argument something like this:
=EctsPartial(C3:C4, E3:E4)
For the following function I wrote:
function EctsPartial(rangeA, rangeB) {
Logger.log(rangeA+" "+rangeB);
var noten = SpreadsheetApp.getActiveSheet().getRange(rangeA).getValues();
var ects = SpreadsheetApp.getActiveSheet().getRange(rangeB).getValues();
for(var i=0; i < SpreadsheetApp.getActiveSheet().getRange(rangeB).getHeight(); i++){
if(noten[i] != "" && noten[i] != 5) {
summe = summe - 0;
ects[i] = ects[i] - 0;
summe = summe + ects[i];
}
Logger.log(i+":");
Logger.log(summe);
}
return summe;
};
But the program keeps telling me that the argument of getRange() is not correct. If I manually type "C3:C4" (including the ") it works but otherwise it doesn't.
What am I doing wrong?
I think this is what you are trying to do. This is for custom spreadsheet functions.
In spreadsheet, the following code allows you to type =EctsPartial(C1) instead of =EctsPartial("C1"). If you put return noten on the script, it will get the value of C1
function EctsPartial(rangeA, rangeB) {
if (rangeA.map) {
return rangeA.map(EctsPartial);
} else {
var noten = rangeA;
}
}
https://developers.google.com/apps-script/guides/sheets/functions#optimization
A couple of options include:
1.
=EctsPartial("C3:C4"; "E3:E4")
.gs:
function EctsPartial(rangeA, rangeB) {
var noten = SpreadsheetApp.getActiveSheet().getRange(rangeA).getValues();
var ects = SpreadsheetApp.getActiveSheet().getRange(rangeB).getValues();
var sum = 0;
noten.forEach(function(value) {
sum += value[0];
});
ects.forEach(function(value) {
sum += value[0];
});
return sum;
}
2.
=EctsPartial(C3:C4; E3:E4)
.gs:
function EctsPartial(rangeA, rangeB) {
var sum = 0;
rangeA.forEach(function(value) {
sum += value[0];
});
rangeB.forEach(function(value) {
sum += value[0];
});
return sum;
}

Categories

Resources