Difference between object in JavaScript

Question

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?

• jonrsharpe: One's a property, the other one's just a variable. There's no connection beyond having the same name.
• Mr.Gomer: Is a property. a object in JS as well ?
• jonrsharpe: Properties can be objects, yes.
• Chase: this might help- stackoverflow.com/questions/32491231/…

Answer 1

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

Answer 2

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.