Highlights of JavaScript — Constructor Methods and Getting URLs

To learn JavaScript, we must learn the basics.

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

Constructor Methods

We can add methods to constructors or classes.

For example, we can write:

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

  calcAnnualPrice() {
    return this.price * 12;
  }
}

We add the calcAnnualPrice method to return the value of this.price * 12 .

this is the class instance, which is the object that’s created and returned when we invoke the Plan class.

So we get the price property from the object we create from the class and multiply it by 12.

To invoke the constructor and call the method on the created object, we can write:

const plan = new Plan('basic', 3, 100, 10)
console.log(plan.calcAnnualPrice())

We invoke the Plan constructor with the new keyword.

Then we call calcAnnualPrice on the plan object to get the annual price.

The class syntax is just syntactic sugar on top of prototype inheritance.

The calcAnnualPrice method is just a property of the Plan ‘s prototype property.

The prototype is the prototype of the Plan class, which is the object that it inherits from.

If we log the value of Plan.prototype.calcAnnualPrice :

console.log(Plan.prototype.calcAnnualPrice)

we see the code of the calcAnnualPrice method logged.

Checking for Properties and Methods

To check if a property or method is actually in the object itself rather than its prototype, we can use the hasOwnProperty method.

For example, if we created an object from the Plan class:

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

Then we can call hasOwnProperty by writing:

console.log(plan.hasOwnProperty('name'))

Then we should see true logged since name is a property of the plan object itself.

The hasOwnProperty method comes from Object.prototype , which is a property of almost all JavaScript objects.

If we want to list an object’s properties, we can write:

for (const prop in plan) {
  if (plan.hasOwnProperty(prop)) {
    console.log(prop);
  }
}

We loop through the plan ‘s property keys with the for-in loop.

The for-in loop loops through all then properties and its prototypes, so we have to use the hasOwnProperty method to check if a property is actually in the plan object itself.

prop is the property name itself.

Therefore, we should see:

name
price
space
pages

logged.

Getting the URL

We can get and set the URL of the page with JavaScript.

To get the URL, we can use the window.location.href property.

If we type that into the browser dev console, we should get the full URL of the page.

window.location.hostname has the hostname which is the first part of the URL.

For example, if we have the URL“https://jsfiddle.net/09t6La27/10/" , then window.location.hostname returns “jsfiddle.net” .

window.location.hash returns the part of the URL after the # sign.

For example, if we have http://example.com/#foo , window.location.hash returns “#foo” .

Conclusion

We can add methods to constructors or classes.

Also, we can get parts of a URL with the window.location object.