We Keep Coding

Difference between object in JavaScript

Im doing a course in frontend Dev in uni and the teacher insists on us using a old book so to learn the history and basics of JavaScript before we move on to more advanced and recent implementations.
Now in this book we are instructed to code a webpage for a food truck and it is supposed to take orders.
Now in some scripts the objects are defined like this :
function DataStore() {
this.data = {};
}
Here the data object is defined using the keyword "this" as in saying it belongs to the function object DataStore.
however in some scripts the data object is defined as:
FormHandler.prototype.addSubmitHandler = function() {
console.log('Setting submit handler for form');
this.$formElement.on('submit', function(event){
event.preventDefault();
var data = {};
My question is what is the difference in the two data objects?

Short answer is at the bottom
Long and boring introduction to how things work
When you write this :
function SomeThing() { }
You can always do
let a = new SomeThing();
even when it doesn't make sense like in :
function lel() { console.log('lelelel'); }
let g = new lel();
console.log(g);
console.log(g.constructor.name);
What this means is that classes are actually the same as functions. And a function in which you use the keyword this usually means you will want to create instances of it.
now if I want all instances of my lel() function class to have a property called foo and a method called bar here's how you do :
lel.prototype.foo = "Some initial value";
lel.prototype.bar = function() {
console.log(this.foo);
}
now I can do
let g = new lel();
lel.bar();
lel.foo = "Hell yeah !";
lel.bar();
In conclusion, this :
function SomeThing() {
this.data = {};
}
SomeThing.prototype.setData = function(key, value) {
this.data[key] = value;
}
SomeThing.prototype.getDataKeys = function() {
return Object.keys(this.data);
}
SomeThing.prototype.getDataValues = function() {
return Object.values(this.data);
}
is the same thing as this
class SomeThing {
constructor() {
this.data = {};
}
setData(key, value) {
this.data[key] = value;
}
getDataKeys() {
return Object.keys(this.data);
}
getDataValues() {
return Object.values(this.data);
}
}
Clarifications about your question
If somewhere in your code you have :
FormHandler.prototype.addSubmitHandler = function() {
console.log('Setting submit handler for form');
this.$formElement.on('submit', function(event){
event.preventDefault();
var data = {};
if necessarily means that somewhere else in your code you have
function FormHandler(...) { ... }
Short answer
This :
function DataStore() {
this.data = {};
}
is how you define a class named DataStore with a property called data initialized to the value {}
And this :
FormHandler.prototype.addSubmitHandler = function() {
...
var data = {};
}
is how you add a method called addSubmitHandler to the already defined class FormHandler. That method uses a local variable called data, could have been any other name

In the first case, data is a property of the object that is created like this: new DataStore.
You can access this property like this:
var obj = new DataStore();
obj.data // => {}
/* or */
obj['data'] // => {}
In the second case, data is just a global variable, inside of an event handler, that is added executing the function.
var obj = new FormHandler();
obj.addSubmitHandler();
You access this variable like this:
data // => {}
I don't think it's a good idea to learn old JS. You would be out of date. You wouldn't be able to use latest technologies, and it would be harder to get a job.

JS ES6 IIFE + Symbol & Prototype - Adding to Instance?

I realize my question's title may be worded weirdly, so I apologize up front.
To be clear, I am referring to this:
var IIFE = (function () {
var a = Symbol("a");
function IIFE() {
this["a"] = null;
}
IIFE.prototype = {
get a() { return this[a]; },
set a(n) { this[a] = n; }
}
return IIFE;
}());
var iife = new IIFE;
I want to dynamically add 'b' & 'c' using an array:
var arrProps = ['b','c'];
to an instance of IIFE. I don't care how it gets done, so as long as the values specified within arrProps can be accessed & assigned the same as you would with 'a' inside the instance, outside the instance, and within prototype get/set. An example of using 'b' would be:
inside the instance: this["b"] = value;
outside of the instance: iife.b = value;
prototype set/get: this[b] = value;
As far as the get/set internals go, there is nothing more than just getting the value and setting value.
Any help would be very much appreciated.

Instead of using a Symbol, have the function return a Proxy instead, and you can use its get and set traps to check for accesses/assignments to arbitrary properties:
const proxy = new Proxy({}, {
get(obj, prop) {
console.log('getting');
return obj[prop];
},
set(obj, prop, newVal) {
console.log('setting');
return obj[prop] = newVal;
},
});
proxy.a = 'aVal';
console.log(proxy.a);
proxy.b= 'bVal';
proxy.c = 'cVal';
proxy.a = 'anotherAVal';

Loop through each new Object from Constructor

Firstly, sorry for my lack of terminology.
If I have a constructor
function myObject(name, value){
this.name = name;
this.value = value;
}
and I make a few objects from it
var One = new myObject("One", 1);
var Two = new myObject("Two", 2);
Can I loop through each new Object made from the myObject class, without putting each new Object into an Array?
would it be possible to add an Instantly Invoking Function to the constructor that adds the Object into an array?
e.g.
function myObject(name, value){
this.name = name;
this.value = value;
this.addToArray = function(){
theArray.push(this); // this is the IIFE
}();
}
that way any new objects created instantly run this function and get added to the array.
Is this possible? ( current syntax does not work, obviously )
EDIT Coming back to this one year later I can tell you that it IS possible. You just call the function inside the constructor like so:
function myObject(name, value){
this.name = name;
this.value = value;
this.addToArray = function(){
theArray.push(this);
};
this.addToArray();
}
Here is an example of this in JSFIDDLE, pushing each object into an array on instantiation and then calling each object's .speak() method directly from the array.
https://jsfiddle.net/Panomosh/8bpmrso1/

Without using an array, you can't, it is not the way it is meant to be used.
What you can do though, is watch over each instances created in a static member of myObject class
function myObject(name, value){
this.name = name;
this.value = value;
this.watch();
}
myObject.prototype.watch = function () {
if (myObject.instances.indexOf(this) === -1) {
myObject.instances.push(this);
}
};
myObject.prototype.unwatch = function () {
myObject.instances.splice(myObject.instances.indexOf(this), 1);
};
myObject.instances = [];

No, you cannot. You cannot do this with almost all programming languages.
You can, in the constructor, store a reference of every object you created into an array/map so that you can iterate over them any time. This, however, prevents all objects of this class from being garbage collected, so use it with care.
The WeakMap in JavaScript keeps only a week reference to the keys, but it, in turn, does not allow you to loop over all keys. So it is not an option either.

var MyClass = (function() {
var _instances = [];
function MyClass(name, value) {
_instances.push(this);
this.name = name;
this.value = value;
}
MyClass.each = function(cb) {
for (var i in _instances) {
if (_instances.hasOwnProperty(i)) {
cb(_instances[i]);
}
}
}
return MyClass;
})();
new MyClass('John', 10);
new MyClass('James', 20);
MyClass.each(function(item) {
console.log(item);
});

Preserve function property when created with "bind"

I have a function that looks like this:
var tempFun = function() {
return 'something';
}
tempFun.priority = 100;
Now I'm pushing it to an array and binding another object to it in the process like this:
var funArray = [];
var newObj = {};
funArray.push( tempFun.bind(newObj) );
and after this, I would like to acces the function's property like this:
funArray[0].priority
but it returns undefined. Is there some way to preserve the property on the function while binding a new object to it?

No, but you could write a function to do this yourself;
Function.prototype.bindAndCopy = function () {
var ret = this.bind.apply(this, arguments);
for (var x in this) {
if (this.hasOwnProperty(x)) {
ret[x] = this[x];
}
}
return ret;
};
... which you could then use via;
var funArray = [];
var newObj = {};
funArray.push( tempFun.bindAndCopy(newObj) );

No. Bind returns a new function, which "wraps" around the original one. All you can do is copy the properties on this new function:
var boundFun = tempFun.bind(newObj)
boundFun.priority = tempFun.priority;
funArray.push( boundFun );
If you want the properties to be in sync (changes in one visible on the other) you can do:
Object.defineProperty(boundFun, 'priority', {
get : function () { return tempFun.priority; },
set : function (val) { tempFun.priority = val; }
});

From MDN:
The bind() method creates a new function that, when called, has its
this keyword set to the provided value, with a given sequence of
arguments preceding any provided when the new function is called.
Hence, .bind() won't be useful for what you're trying to achieve. Besides using jQuery mappers or rewriting your code to use .prototype, a solution that I can think of is:
var obj = {};
for (var i in tempFun) {
if (tempFun.hasOwnProperty(i)) obj[i] = tempFun[i];
}

Create getter and setter in Javascript

I am following a tutorial to create getter and setter in Javascript, I have the code like this:
// Create a new User object that accept an object of properties
function User(properties) {
// Iterate through the properties of the object, and make
// sure it's properly scoped
for (var i in properties) { (function(){
// Create a new getter for the property
this['get' + i] = function() {
return properties[i];
};
// Create a new setter for the property
this['set' + i] = function(val) {
properties[i] = val;
};
})(); }
}
// Create a new User object instance and pass in an object of
// properties to seed it with
var user = new User({
name: 'Bob',
age: 28
});
// Just note that the name property does not exist, as it's private
// within the property object
console.log(user.name == null);
// However, we are able to access its value using the new getname()
// method, that was dynamically generated
console.log(user.getname());
However, console shows error saying user does not have method getname. The code is trying to dynamically generate getter and setter method, it looks ok to me. Any thoughts?

The other answers are correct in that you need to pass i into your anonymous function, but you could also do this with ES5 Getters and Setters:
// Create a new User object that accept an object of properties
function User(properties) {
var self = this; // make sure we can access this inside our anon function
for (var i in properties) {
(function(i) {
Object.defineProperty(self, i, {
// Create a new getter for the property
get: function () {
return properties[i];
},
// Create a new setter for the property
set: function (val) {
properties[i] = val;
}
})
})(i);
}
}
The benefit of using ES5 getters and setters is that now you can do this:
var user = new User({name: 'Bob'});
user.name; // Bob
user.name = 'Dan';
user.name; // Dan
Since they're functions, they modify the passed in properties, not just the object itself. You don't have to use getN or setN anymore, you can just use .N, which makes using it look more like accessing properties on an object.
This approach, however, isn't universally portable (requires IE 9+).
Here's what I'd probably do in practice though:
function User(properties) {
Object.keys(properties).forEach(function (prop) {
Object.defineProperty(this, prop, {
// Create a new getter for the property
get: function () {
return properties[prop];
},
// Create a new setter for the property
set: function (val) {
properties[prop] = val;
}
})
}, this);
}
The above gets rid of your for loop. You're already using an anonymous function, so might as well get the most of it.

Probably a closure issue:
function User(properties) {
// Iterate through the properties of the object, and make
// sure it's properly scoped
for (var i in properties) {
(function(i){
// Create a new getter for the property
this['get' + i] = function() {
return properties[i];
};
// Create a new setter for the property
this['set' + i] = function(val) {
properties[i] = val;
};
}.call(this, i));
}
}
Also, as #Paul pointed out, this was actually referring to the function which was contained in the for loop. Not the User function. I fixed that by using a call and assigning the User this to the function (no need for extra variable).

Your in-loop function is losing the this, do a var t = this; outside loop and refer to t inside. Also, pass i into your function.
function User(properties) {
var t = this, i;
for (i in properties) (function (i) {
t['get' + i] = function () { return properties[i]; };
t['set' + i] = function (val) { properties[i] = val; };
}(i));
}