👷‍♂️Intro to Objects and Constructors in JavaScript

¡

3 min read

Objects in JavaScript hold a collection of key-value pairs of which form a properties. Objects can be a collection of properties which all relate to each other and is reusable. For example, say you are creating a collection of data for football teams of which each team has a: name, league, stadium and capacity. Rather than manually adding the same attributes multiple times, you can set a constructor which then can be used a blueprint for an objects instantiation.

Creating a Constructor Function

A constructor for an object acts like a blueprint or form, it will show you the keys which need filling. You create a constructor function by writing the following, note the convention of capitalising the function name:

const Team1 = {
    name: 'Oxford United',
    league: 'League One',
    stadium: 'Grenoble Road',
    capacity: 12500,
}

function Team(data){
        /* Attributes for constructor functions */
    this.name= data.name
    this.league = data.league
    this.stadium = data.stadium
    this.capacity = data.capacity
}

As above, the Team(data) line specifies the name of the constructor function and you are passing in data - of which will be Team1. The ‘this’ keyword refers to the instantiated object you are referring to. Say for example, you have 10 different teams which used the team constructor method. The this keyword means you are referring to data and methods referenced by the specific teams object.

In order to create an object using the constructor function you can do so as follows:

const oxfordUnited = new Team(Team1)

This will instantiate the object called ‘oxfordUnited’ using the Team constructor method. From here, you can reference any values or methods within the constructor through the following:

console.log(oxfordUnited.name);
/* Prints out 'Oxford United' to console */

Adding methods

A constructor function is not only set values of data but can also hold another function but they shall be referred as methods, due to being inside of an object. So suppose in our example you want to a field to give you the max revenue a team can make per sold out game (capacity of ground * ticket price). You can write this method within the constructor function:

function Team(data){
    this.name= data.name
    this.league = data.league
    this.stadium = data.stadium
    this.capacity = data.capacity

    this.ticketRevenue = function(){
        let revenue = this.capacity*20
        return revenue
}

/* Assuming the object oxfordUnited has been created as per code above. */
console.log(oxfordUnited.ticketRevenue)

/* Console will log 250,000 (12,500 (capacity) * 20) */

Parsing object data with Object.assign()

There is a much cleaner way to write out the constructor function using Object.assign(), a brief explanation of this function is it takes two parameters, mapping the second objects values into a new array in the first object. This removes the need for this.value statements as it will achieve the same outcome by taking the referenced object by this and assigning it to the data item holding the values - creating them with less lines of code.

function Team(data){

    /*
    this.name= data.name
    this.league = data.league
    this.stadium = data.stadium
    this.capacity = data.capacity
    */

    Object.assign(this, data)

    this.ticketRevenue = function(){
        let revenue = this.capacity*20
        return revenue
}

Summary

  • Object is a collection of key-value pairs
  • Objects can be instantiated with constructor functions
  • Constructor functions can hold values as well as methods
  • Using Object.assign() allows for a cleaner assignment of values within the function
Â