Object-Oriented JavaScript — Constructors and Shorthands

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at constructors and object shorthands.

The constructor Property

The constructor property is part of an instance object.

It contains the reference to the constructor function.

So if we have:

function Person(name, occupation) {
  this.name = name;
  this.occupation = occupation;
  this.whoAreYou = function() {
    return `${this.name} ${this.occupation}`
  };
}

const jane = new Person('jane', 'writer');

Then:

jane.constructor

is the Person constructor function.

The instanceof Operator

The instanceof operator lets us check whether the object is created with the given constructor.

For instance, we can write:

jane instanceof Person

then we get true .

And if we write:

jane instanceof Object

and that’s also true .

Functions that Return Objects

A function that returns an object is called a factory function.

For instance, we can create a factory function by writing:

function factory(name) {
  return {
    name
  };
}

Then we can call it by writing:

const james = factory('james');

Then we get james.names is 'james' .

Constructors can also be written to return an object instead of return an instance of this .

For instance, we can write:

function C() {
  this.a = 1;
  return {
    b: 2
  };
}

Then if we invoke the construction:

const c = new C()

and then we get:

{b: 2}

Passing Objects

We can pass objects into a function.

For instance, we can write:

const reset = function(o) {
  o.count = 0;
};

Then we can use it by writing:

const obj = {
  count: 100
}
reset(obj);
console.log(obj);

And we get:

{count: 0}

from the console log.

Comparing Objects

We can’t compare objects with === since it only returns true if they have the same reference.

For instance, if we have:

const james = {
  breed: 'cat'
};
const mary = {
  breed: 'cat'
};

Then:

james === mary

returns false even if they have exactly the same properties.

The only way that it can return true is if we assign one to object to the other.

For instance, we write:

const james = {
  breed: 'cat'
};
const mary = james;

Then:

james === mary

returns true .

ES6 Object Literals

ES6 gives us a much shorter syntax for defining object literals.

For instance, if we have:

let foo = 1
let bar = 2
let obj = {
  foo: foo,
  bar: bar
}

Then we can shorten that to:

let foo = 1
let bar = 2
let obj = {
  foo,
  bar
}

We can also shorten methods.

For instance, instead of writing:

const obj = {
  prop: 1,
  modifier: function() {
    console.log(this.prop);
  }
}

We write:

const obj = {
  prop: 1,
  modifier() {
    console.log(this.prop);
  }
}

We can also use computed property keys.

For instance, we can write:

let vehicle = "car";
let car = {

}

We can do the same for methods.

Conclusion

Object literals can be written in various ways JavaScript.

We can check the constructor with the constructor property and instanceof .