We Keep Coding

for (var o in this) inside an object

I’ve made a little sandbox using the p5.js library : http://gosuness.free.fr/balls/
I’m trying to implement a way to deal with the options on the side, which are toggled using keyboard shortcuts.
This is what I tried to do :
var options =
{
Option: function(name, value, shortcut)
{
this.name = name;
this.shortcut = shortcut;
this.value = value;
this.show = function ()
{
var texte = createElement("span",this.name + " : " + this.shortcut + "<br />");
texte.parent("options");
texte.id(this.name);
}
},
toggle: function(shortcut)
{
for (var o in this)
{
console.log(o);
if (o.shortcut == shortcut)
{
o.value = !o.value;
changeSideText("#gravity",gravity);
addText("Toggled gravity");
}
}
}
};
I instantiate each option inside the object options thus :
var gravity = new options.Option("gravity", false,"G");
var paintBackground = new options.Option("paintBackground",false,"P");
When I call the function options.toggle, console.log(o) gives me "Option" "toggle". but what I want is to get for (var o in this) to give me the list of properties of the object options, which are in this case gravity and paintBackground
How do I do that ?
Thanks !

When You create a instance of Option, its not kept within the variable options, but in the provided variable.
var gravity = new options.Option("gravity", false,"G");
Creates an instance of Option located under gravity variable.
Your iterator for (var o in this) iterates over options properties, with the correct output of the object's methods.
If You want your code to store the new instances of Option within options variable, you can modify code like
var options =
{
instances: [],
Option: function(name, value, shortcut)
{
this.name = name;
this.shortcut = shortcut;
this.value = value;
this.show = function ()
{
var texte = createElement("span",this.name + " : " + this.shortcut + "<br />");
texte.parent("options");
texte.id(this.name);
}
options.instances.push(this);
},
toggle: function(shortcut)
{
for (var i in this.instances)
{
console.log(this.instances[i]);
if (this.instances[i].shortcut == shortcut)
{
this.instances[i].value = !this.instances[i].value;
changeSideText("#gravity",gravity);
addText("Toggled gravity");
}
}
}
};
this is your example working as You intend it to, but i wouldnt consider this as a reliable design pattern.

How to change prototype value which would overwrite objects value? Is it possible?

So my objective is to set the special property of card. In a way that my first three console.log would print false (as default), but after the code it would print true. I tried several ways (describing a method in card to set this.special to true, and called the method afterwhile. Didnt work). Also just changing card.special did not work. Thanks,
function card(name,value,special) {
this.name = name,
this.value = value,
this.special = special
}
var a9 = new card("nine",9,false);
var a10 = new card("Ten",9,false);
var aal = new card("lower",9,false);
console.log(a9.special);
console.log(a10.special);
console.log(aal.special);
//code comes here
console.log(a9.special);
console.log(a10.special);
console.log(aal.special);

Use prototype to store special
function card(name,value,special) {
this.name = name;
this.value = value;
}
card.prototype.special= false;
var a9 = new card("nine",9);
var a10 = new card("Ten",9);
var aal = new card("lower",9);
console.log(a9.special); //false
console.log(a10.special); //false
console.log(aal.special); //false
It should be noted that as long as you don't modify special on an object it would keep pointing to the original value in prototype but when you change it on some object that one gets its own copy wiz. no longer pointing to the prototype.For example :
suppose now you have an exception card for which you want special as being true
aal.special=true;
console.log(aal.special);//true
It won't affect others rather it gets it's own independent copy
console.log(a9.special); //false
console.log(a10.special); //false
card.prototype.special= true; // make all true
console.log(a9.special); //true
console.log(a10.special); //true

You can create a prototype function that will console log the variable and change its value.
card.prototype.logToggleSpecial = function() {
console.log(this.special);
if(!this.special)
this.special = !this.special;
};
Instead of calling console log, just call for example a9.logToggleSpecial(). Already tried this and it works.

Is this what you want?
var counter = 0;
function Card(name, value, special) {
this.name = name,
this.value = value,
this.special = special;
}
defineSpecial(Card.prototype)
function defineSpecial(o) {
var specialValue;
Object.defineProperty(o, 'special', {
get() {
if (counter++ <= 2) {
return false;
}
return specialValue;
},
set(val) {
specialValue = val;
}
});
}
var a9 = new Card("nine",9,true);
var a10 = new Card("Ten",9,true);
var aal = new Card("lower",9,true);
console.log(a9.special);
console.log(a10.special);
console.log(aal.special);
//code comes here
console.log(a9.special);
console.log(a10.special);
console.log(aal.special);

You could do somethinglike:
[a9,a10,aal].forEach(function(c) { c.special = true; });
or even
var cards = {
a9: new card("nine",9,false),
a10: new card("Ten",9,false),
aal: new card("lower",9,false),
};
console.log(cards.a9.special);
console.log(cards.a10.special);
console.log(cards.aal.special);
Object.keys(cards).forEach(function(key) { cards[key].special = true; });
console.log(cards.a9.special);
console.log(cards.a10.special);
console.log(cards.aal.special);
Or if you want to get a little fancy
var card = function() {
var cards = {};
function card(name,value,special) {
this.name = name;
this.value = value;
this.special = special;
cards[name] = this;
}
card.setSpecial = function(b) {
Object.keys(cards).forEach(function(key) {
cards[key].special = b;
});
};
return card;
}();
var a9 = new card("nine",9,false);
var a10 = new card("Ten",9,false);
var aal = new card("lower",9,false);
console.log(a9);
console.log(a10);
console.log(aal);
card.setSpecial(true);
console.log(a9);
console.log(a10);
console.log(aal);

Auto increment value in javascript class

I'm trying to auto increment a properties value each time I instantiate a new instance of the class. This is what my class constructor looks (I abstracted it down just a bit):
var Playlist = function(player, args){
var that = this;
this.id = ?; //Should auto increment
this.tracks = [];
this.ready = false;
this.unloaded = args.length;
this.callback = undefined;
this.onready = function(c){
that.callback = c;
};
this.add = function(tracks){
for(var i = 0; i < tracks.length; i++){
this.tracks.push(tracks[i]);
this.resolve(i);
}
};
this.resolve = function(i){
SC.resolve(that.tracks[i]).then(function(data){
that.tracks[i] = data;
if(that.unloaded > 0){
that.unloaded--;
if(that.unloaded === 0){
that.ready = true;
that.callback();
}
}
});
};
player.playlists.push(this);
return this.add(args);
};
var playlist1 = new Playlist(player, [url1,url2...]); //Should be ID 0
var playlist2 = new Playlist(player, [url1,url2...]); //Should be ID 1
I'd like to not define an initial variable that I increment in the global scope. Could anyone hint me in the right direction? Cheers!

You can use an IIFE to create a private variable that you can increment.
var Playlist = (function() {
var nextID = 0;
return function(player, args) {
this.id = nextID++;
...
};
})();

You can set Playlist.id = 0 somewhere in your code, then increment it in the constructor and assign the new value to the instance property, as: this.id = Playlist.id++.
This suffers from the fact that it is not well encapsulated, so it could be misused.
Otherwise, I was to propose the solution described by Mike C, but he already set a good answer that contains such an idea, so...

javascript new does not create new object

I am trying to get two objects from the same class definition. However they seem to share the same attribute. What can i do?
http://jsfiddle.net/dagod/nuam8dks/2/
myclass = function() {
this.data.push(Math.random(1000));
};
myclass.prototype.data = [];
a = new myclass();
b = new myclass();
console.log(a.data);
console.log(b.data); //same as a.data

I've just been doing this for something else!
myclass = function() {
this.data = [];
};
Now you can access it my simply doing myclass.data =
Personally this is how i'd do it:
var MyNameSpace = {
SomeFunction: function() {
Some code
};
this.somevariable = somevalue;
};
Then you can go myNameSpace.myfunction() or myNameSpace.myVar = Value

See the comment from elclanrs.
var Myclass = function() {
this.data = [];
this.data.push(Math.random(1000));
};

You need to declare your member variable inside the constructor instead of making them part of the prototype. oop in javascript can be ugly and unintuitive. (Thats why there are so many oop libraries out there for javascript)
Using ds.oop
ds.make.class({
type: 'MyClass',
constructor: function(x){
this.a = x;
}
});
var c1 = new MyClass(1);
var c2 = new MyClass(2);
console.log( c1.a ); // output: 1
console.log( c2.a ); // output: 2

You can get the desired results as follows:
myclass = function() {
this.data = Math.random(1000);
};
//myclass.prototype.data = [];
var a = new myclass();
var b = new myclass();
jsfiddle

Javascript: Modify an object from a pointer

I'm making a digital library with three classes: Library, Shelf & Book. Shelves have their contents as an array of books. Books have two methods, enshelf and unshelf. When a book gets unshelfed it's supposed to set delete the instance of itself from the shelf it's on and then set it's location property to null. How can I modify the shelf it's sitting on? In the constructor if I change this.location, it will just give that property a new value instead of modifying the variable it points to. I feel like this is really simple and I'm overlooking something super basic.
var _ = require('lodash');
//books
var oldMan = new Book("Old Man and the Sea", "Ernest Hemingway", 0684801221);
var grapes = new Book("The Grapes of Wrath", "John Steinbeck", 0241952476);
var diamondAge = new Book("The Diamond Age", "Neal Stephenson", 0324249248);
//shelves
var shelf0 = new Shelf(0);
var shelf1 = new Shelf(1);
//libraries
var myLibrary = new Library([shelf0, shelf1], "123 Fake Street");
//these need to accept an unlimited amount of each
function Library(shelves, address) {
this.shelves = shelves; //shelves is an array
this.address = address;
this.getAllBooks = function() {
console.log("Here are all the books in the library: ");
for (var i = 0; i < this.shelves.length; i++) {
console.log("Shelf number " + i + ": ");
for (var j = 0; j < this.shelves[i].contents.length; j++) {
console.log(this.shelves[i].contents[j].name);
}
}
}
}
function Shelf(id) {
this.id = id;
this.contents = [];
}
function Book(name, author, isbn) {
this.name = name;
this.author = author;
this.isbn = isbn;
this.location = null;
this.enshelf = function(newLocation) {
this.location = newLocation;
newLocation.contents.push(this);
}
this.unshelf = function() {
_.without(this.location, this.name); //this doesn't work
this.location = null;
}
}
console.log("Welcome to Digital Library 0.1!");
oldMan.enshelf(shelf1);
myLibrary.getAllBooks();
oldMan.unshelf();
myLibrary.getAllBooks();

Small issue with your unshelf method, easily remedied:
this.unshelf = function() {
this.location.contents =
_.without(this.location.contents, this);
this.location = null;
}
Consider, however, that shelf and unshelf should be methods of Shelf, and not of Book. Also, if you must have this method, surround it with a guard, like so:
this.unshelf = function() {
if (this.location) {
this.location.contents =
_.without(this.location.contents, this);
this.location = null;
}
}

Couple of small issues:
without works on arrays and returns a copy of the array with the elements removed - the original is untouched. So you need to pass location.contents instead of just location and reassign it back to location.contents.
Also you add the whole book to the Shelf, then try to remove it by name, so it doesn't match and get removed. So just pass this to without:
this.unshelf = function() {
if (this.location) {
this.location.contents = _.without(this.location.contents, this);
this.location = null;
}
}