Highlights of JavaScript — Objects and Constructors

To learn JavaScript, we must learn the basics.

In this article, we’ll look at the most basic parts of the JavaScript language.

Objects

We need objects to store values other than primitive values like numbers, strings, booleans, etc.

It servers as a container for all the items we want to store.

For example, we can define an object by writing:

const plan = {
  name: "Basic",
  price: 3,
  space: 100,
  transfer: 1000,
  pages: 10
};

We created the plan object with various properties.

name , price , space , transfer , and pages are property names.

The expressions after the colon are their values.

Properties are separated by a comma.

To access a property, we can write:

plan.name

plan.name ‘s value should be 'Basic' .

We can assign properties with different values.

For example, we can write:

plan.name = 'Deluxe';

Then name property’s new value is 'Deluxe' .

We can assign values with any data type with the assignment operator.

To check if a property is in an object, we can use the in operator.

For example, if we have:

'name' in plan

then that should return true since name is a property of plan .

But if we have:

'foo' in plan

then that returns false since foo isn’t a property of plan .

We need the property name in quotes since the left operand is a string.

Object Methods

Objects can have methods.

For example, we can write:

const plan = {
  name: "Basic",
  price: 3,
  space: 100,
  transfer: 1000,
  pages: 10,
  calcAnnualPrice() {
    return this.price * 12;
  }
};

to add the calcAnnualPrice method into the plan object.

this is the object itself, so this.price * 12 returns the value of the price property multiplied by 12.

Constructors

We can create objects with the same structure with constructors.

They’re the templates for objects.

To create a constructor, we can write:

function Plan(name, price, space, pages) {
  this.name = name;
  this.price = price;
  this.space = space;
  this.pages = pages;
}

We created the Plan constructor that takes the name , price , space , and pages parameters.

Then we assign them to properties of this with the same name.

When we invoke the constructor, this will be returned with all the properties we assigned.

To invoke it, we can write:

const plan = new Plan('basic', 3, 100, 10)

We use the new keyword to call the constructor and create the object.

The value of plan is:

{
  name: "basic"
  pages: 10
  price: 3
  space: 100
}

A better way to write the constructor is to use the class syntax.

For example, we can write:

class Plan {
  constructor(name, price, space, pages) {
    this.name = name;
    this.price = price;
    this.space = space;
    this.pages = pages;
  }
}

The constructor method is the same as the constructor function we have before.

It just looks different. This is the preferred way to create constructors since it’s consistent with other popular object-oriented languages.

Conclusion

We can create objects to store more than one piece of data in a container.

To create objects with the same structure, we can create constructors.