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?

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.