Develop Reference

Accessing variables from a functionally declared stack

In creating the interface for a Stack in JavaScript - using a functional style as opposed to prototypal or pseudoclassical style, should the below "storage" and "count" variables be someInstance.storage and someInstance.count, respectively so they can be accessed on an instance of this stack later?
With the variables declared as they are now, once we create and instance of the stack by executing the function, we lose access to see what the count (size) and the storage (properties in the stack).
What's the best means of declaring properties (not methods) we need to access later using a functional creation pattern?
Thanks!
var Stack = function(){
var someInstance = {};
var storage = {};
var count = 0;
someInstance.push = function(value){
storage[count++] = value;
};
someInstance.pop = function(){
if(count){
var popped = storage[--count];
}
delete storage[count];
return popped;
};
someInstance.size = function(){
return count;
};
return someInstance;
};
var stack = Stack();

The private variables mentioned below can be studied in javascript of closure.
reference: https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures
var Stack = function(){
// PUBLIC
var someInstance = {};
// PRIVATE: Attach _ to private variables. (just implicit rule.)
var _storage = {};
var _count = 0;
someInstance.push = function(value){
storage[_count++] = value;
};
someInstance.pop = function(){
if(_count){
var popped = storage[--_count];
}
delete storage[_count];
return popped;
};
someInstance._size = function(){
return _count;
};
// if you assign public variable, you can access!!!
someInstance.size = _size;
someInstance.count = _count;
return someInstance;
};
var stack = Stack();

You can add getters and setters for them in the someInstance object (courtesy of closures) like so:
Object.defineProperty(someInstance, "count", {
get: function() {
return count;
},
set: function(value) {
count = value;
}
});
You can omit the set part if you want to be able to just get the value and not set it.
Example:
var Stack = function(){
var someInstance = {};
var storage = {};
var count = 0;
Object.defineProperty(someInstance, "count", {
get: function() {
console.log("getter called");
return count;
},
set: function(value) {
console.log("setter called");
count = value;
}
});
return someInstance;
};
var stack = Stack();
console.log(stack.count);
stack.count = 55;
console.log(stack.count);

Whether storage and count should be someInstance.storage and someInstance.count depends on how you want the user of this instance to work it. That's a bit opinion based. My opinion is that a stack shouldn't allow the user to change the count with something like someInstance.count = 10 because that would break it.
Personally I would make count and storage private which will prevent accidental bugs that could happen with direct access. A nice way to do this is to capture them in a closure and provide a getter for count so you can still read the count, but can't change it. Something like:
var Stack = function(){
let storage = [], count = 0; // these will be caputured as a closure
return {
// the returned object will have push, pop, and a count getter
push(v) {
storage.push(v)
count++
},
pop() {
if (count) count--
return storage.pop()
},
get count(){ // allow reading of count
return count
}
}
}
var stack = Stack();
stack.push("hello");
stack.push("goodby");
stack.count = 10 // has no effect
console.log(stack.count) // count is still 2
console.log(stack.pop())
console.log(stack.count)
console.log(stack.pop())
console.log(stack.count)
Of course, since this mostly uses an array, you could do away with the count variable altogether and just use storage.length

var Stack = function(){
let storage = [], count = 0; // these will be caputured as a closure
return {
// the returned object will have push, pop, and a count getter
push(v) { //method
storage.push(v)
count++
},
pop: function() {
if (count) count--
return storage.pop()
},
get count(){ // allow reading of count
return count
},
get insidebox(){ // allow reading of count
return storage
},
callprice:function(cnt){
var price=cnt*100;
return price;
}
}
}
Stack.prototype.price2 = function() {
return "testpr";
};
var sb = Stack();
console.log(sb.count);
sb.push('paint');
console.log(sb.insidebox);
console.log(sb.count);
sb.push('Sharee');
console.log(sb.insidebox);
sb.push('Shirt');
sb.push('shoes');
console.log(sb.insidebox);
sb.pop();
console.log(sb.insidebox);
console.log(sb.count);
console.log(sb.callprice(sb.count));

function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Person.prototype.nationlity='Indian';
Person.prototype.fullname = function() {
return this.firstName + " " + this.lastName
};
var myFather = new Person("Lalji", "Maurya", 50, "blue");
console.log(myFather.fullname());
console.log(myFather);
console.log(myFather.nationlity);
var myBrother = new Person("Ashish", "Maurya", 28, "black");
console.log(myBrother.fullname());
console.log(myBrother);
console.log(myBrother.nationlity);

loop throught a function properties, possible?

I want to loop through a functions properties, here is my attempt:
var hen = function a() {
this.name = "euler henrique";
this.ID = 55530;
this.REC = 0302;
this.nick = "any will do";
}
for (var p in hen) {
console.log(hen[p]);
}
but that doesn't work, even if hen was an instance of a. Any suggestion?

A quick solution might be to add the elements to an array, as a property of the parent object. For instance
var hen = function a() {
this.name = "euler henrique";
this.ID = 55530;
this.REC = 0302;
this.nick = "any will do";
this.info = [this.name, this.id, this.REC, this.nick];
}
And then looping through this array the way you would any array.
var myHen = new Hen();
for(var x = 0; x < myHen.info; x ++)
{
info = myHen.info[x];
if(info)
{
console.log(info);
}
}
Not sure if this what you were going for, let me know if this isn't what you need and i'd be happy to share some other ideas.

You can do it if you create an instance of the object:
var Hen = function() {
this.name = "euler henrique";
this.ID = 55530;
this.REC = 0302;
this.nick = "any will do";
}
var myHen = new Hen();
for (let prop in myHen) {
if (myHen.hasOwnProperty(prop)) {
console.log(prop);
}
}
You can create an object using the function constructor: new YourFunctionName();
From MDN: "The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it)."

Simplify the code by using cycle function

I have multiply functions which are using the same cycle code and i'm wondering is it possible to simplify the code by having one cycle function so i could execute the code just by calling wanted function names.
Now:
for(var i=0;i<all;i++){ someFunction(i) }
Need:
cycle(someFunction);
function cycle(name){
for(var i=0;i<all;i++){
name(i);
}
}
I tried to do this by using "window" and i get no error but the function is not executed.
var MyLines = new lineGroup();
MyLines.createLines(); // works
MyLines.addSpeed(); // doesn't work
var lineGroup = function(){
this.lAmount = 5,
this.lines = [],
this.createLines = function (){
for(var i=0,all=this.lAmount;i<all;i++){
this.lines[i] = new line();
}
},
this.addSpeed = function (){
// no error, but it's not executing addSpeed function
// if i write here a normal cycle like in createLines function
// it's working ok
this.linesCycle("addSpeed");
},
this.linesCycle = function(callFunction){
for(var i=0,all=this.lAmount;i<all;i++){
window['lineGroup.lines['+i+'].'+callFunction+'()'];
}
}
}
var line = function (){
this.addSpeed = function (){
console.log("works");
}
}

window['lineGroup.lines['+i+'].'+callFunction+'()'];
literally tries to access a property that starts with lineGroups.lines[0]. Such a property would only exist if you explicitly did window['lineGroups.lines[0]'] = ... which I'm sure you didn't.
There is no need to involve window at all. Just access the object's line property:
this.lines[i][callFunction]();
i get no error but the function is not executed.
Accessing a non-existing property doesn't generate errors. Example:
window[';dghfodstf0ap9sdufgpas9df']
This tries to access the property ;dghfodstf0ap9sdufgpas9df, but since it doesn't exist, this will result in undefined. Since nothing is done with the return value, no change can be observed.

Without a name space use:
window["functionName"](arguments);
SO wrap it up and use it thus:
cycle(someFunction);
function cycle(name){
for(var i=0;i<all;i++){
window[name](i);;
}
}
With a namespace, include that:
window["Namespace"]["myfunction"](i);

Note that this is likely a bit of overkill but using a function to make a class object (you can google the makeClass and why it is/could be useful) you can create instances of the object.
// makeClass - By Hubert Kauker (MIT Licensed)
// original by John Resig (MIT Licensed).
function makeClass() {
var isInternal;
return function (args) {
if (this instanceof arguments.callee) {
if (typeof this.init == "function") {
this.init.apply(this, isInternal ? args : arguments);
}
} else {
isInternal = true;
var instance = new arguments.callee(arguments);
isInternal = false;
return instance;
}
};
}
var line = function () {
this.addSpeed = function () {
console.log("works");
};
};
var LineGroup = makeClass();
LineGroup.prototype.init = function (lineNumber) {
this.lAmount = lineNumber?lineNumber:5,
this.lines = [],
this.createLines = function (mything) {
console.log(mything);
var i = 0;
for (; i < this.lAmount; i++) {
this.lines[i] = new line();
}
},
this.addSpeed = function () {
console.log("here");
this.linesCycle("addSpeed");
},
this.linesCycle = function (callFunction) {
console.log("called:" + callFunction);
var i = 0;
for (; i < this.lAmount; i++) {
this.lines[i][callFunction]();
}
};
};
var myLines = LineGroup();
myLines.createLines("createlines");
myLines.addSpeed();
//now add a new instance with 3 "lines"
var newLines = LineGroup(3);
newLines.createLines("createlines2")
console.log("addspeed is a:" + typeof newLines.addSpeed);
console.log("line count"+newLines.lAmount );
newLines.addSpeed();

How to have function call its own function on its creation

I have a function PublicGame which I'd like to be using similar to a class. When I create PublicGame I give it a bunch of methods by setting this.methodName = function. The only thing is that I want to call some of these methods when the PublicGame is created. Right now for instance I do this.judge = this.setJudge(), but I know this wont work where I have it because, setJudge isnt defined yet. Should I put this at the bottom of PublicGame? Is my design totally off?
Code:
'use strict';
// var GameSockets = require(‘GameSockets’);
var Games = {};
var id_counter = 0;
var minPlayers = 3;
var maxPlayers = 6;
function PublicGame (players) {
this._id = id_counter++;
this.players = players;
this.gameSocket = new GameSockets.registerPlayers(this.players, this._id, this.playerDisconnects);
this.judge = this.setJudge();
this.killGame = function() {
delete Games[this._id];
};
// When a player presses leave game
this.playerExits = function(playerToRemove) {
// Delete player from players array
this.players.splice(this.players.indexOf(playerToRemove),1);
// If less than min players
if (this.players.length < minPlayers) this.killGame();
// If less than max players
if (this.players.length < maxPlayers) {
this.needsPlayers = true;
}
gameSockets.kickPlayer(playerToRemove);
};
// When a player disconnects without warning, e.g. closes window
this.playerDisconnects = function(playerToRemove) {
// Delete player from players array
this.players.splice(this.players.indexOf(playerToRemove),1);
// If less than min players
if (this.players.length < minPlayers) this.killGame();
// If less than max players
if (this.players.length < maxPlayers) {
this.needsPlayers = true;
}
};
this.selectJudges = function() {
this.judge = this.players.pop();
this.players = this.players.unshift(this.judge);
};
this.setWinner = function(winner) {
this.winner = winner;
};
Games[this._id] = this;
}

If you define your functions on the prototype than you do not need to "wait" for the functions to be defined because the instance will already have them when the constructor's code is called
function PublicGame (players) {
//...
this.judge = this.setJudge();
}
PublicGame.prototype.killGame = function(){
//...
};
PublicGame.prototype.playerExits = function(playerToRemove){
//...
};
PublicGame.prototype.setJudge = function(){
//do whatever
return whatever;
};
So unless your functions need to access some "private" variable (ie defined within the constructor, not a global variable), or other reason requiring it, define it on the prototype instead of defining it in the constructor and it will be ready to use.

You have to use javascript prototype !
Read the comments in the code sample.
/*
* utils functions
*
* dont take care about that
**/
var el = document.getElementById('dbg');
var jj = function(val,sep){return JSON.stringify(val , null , sep || '')}
var log = function(val){el.innerHTML+='<div><pre>'+val+'</pre></div>'};
var counterId = 0;
/************************************************************************/
// You have to use prototype
// here an example of what you can achieve
// we create a Player 'class'
var Player = function( name ){
this.id = counterId ++; //<-- an attribute
this.name = name; //<-- an attribute
this.setLevel(5);//<-- a method called at 'instanciation'
return this;
};
// a method available at instanciation time
Player.prototype.setLevel = function(level){
this.level = level;
return this;
};
// we create a new Player named Toto
var Toto = new Player('Toto');
log('Toto = ' + jj(Toto));//<-- utility function just to log
// we create a new Player named Jane
var Jane = new Player('Jane');
log('Jane = ' + jj(Jane)); //<-- utility function just to log
// we change the Level of Jane
Jane.setLevel(12);
log('Jane.setLevel(12)');//<-- utility function just to log
log('Jane = ' + jj(Jane));//<-- utility function just to log
<div id='dbg'></div>

How to iterate anonymous function inside each function in Knockout viewmodel

I am building a Knockout viewmodel. The model has some fields like dateFrom, DateTo, Status and so forth. In addition, there is a list of invoices.
The invoices have some pricing information, which is a price object. My main object also have a price object, which should iterate all the invoice objects and find the total price.
My problem is the following:
The code runs smooth, until I add the following in my view:
<label data-bind="text:totalPrice().price().priceExVat"></label>
Here I get an:
TypeError: $(...).price is not a function
Which refers to my:
exVat += $(ele).price().priceExVat;
I don't understand it, because in my each function, I should have the element. The element have a price() function, so why would it not work? Is it some scope issue?
My viewmodel:
function invoice(invoiceDate, customerName, pdfLink, status) {
var self = this;
self.pdfLink = pdfLink;
self.print = ko.observable(0);
self.customerName = customerName;
self.status = status;
self.pdfPagesCount = function () {
return 1;
};
self.invoiceDate = invoiceDate;
self.price = function () {
return new price(1.8, 2.1);
};
}
function price(exVat, total) {
var self = this;
self.currency = '€';
self.total = total;
self.priceExVat = exVat;
self.vatPercentage = 0.25;
self.vatAmount = self.exVat - self.total;
self.priceExVatText = function() {
return self.priceExVat + ' ' + self.currency;
};
}
var EconomicsViewModel = function (formSelector, data) {
var self = this;
self.dateFrom = data.dateFrom;
self.dateTo = data.dateTo;
self.invoices = ko.observableArray([
new invoice('05-05-2014', 'LetterAmazer IvS', "http://www.google.com","not printed"),
new invoice('05-05-2014', 'LetterAmazer IvS', "http://www.google.com", "not printed")
]);
self.totalPrice = function () {
var exVat = 0.0;
$(self.invoices).each(function (index, ele) {
console.log(ele);
exVat += $(ele).price().priceExVat;
});
return price(exVat, 0);
};
};

From what I read, totalPrice is actually a price object, you don't need to put a .price():
<label data-bind="text:totalPrice().priceExVat"></label>
EDIT:
Sorry, there were also problems on your javascript:
self.totalPrice = function () {
var exVat = 0.0;
$(self.invoices()).each(function (index, ele) { //<-- add () to self.invoices to get the array
console.log(ele);
exVat += ele.price().priceExVat; //<-- remove useless jQuery
});
return new price(exVat, 0); //<-- add 'new'
};
Check this fiddle
EDIT2:
To answer robert.westerlund's comment, you could remove $().each and replace with ko.utils.arrayForEach or even simpler use a for loop:
var arr = self.invoices();
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
exVat += arr[i].price().priceExVat;
}
Updated fiddle