DEV Community

loading...

Object-Oriented JavaScript — Objects and Constructors

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・3 min read

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 objects and constructors.

Accessing an Object’s Properties

We can access an object’s properties by using the square bracket notation or the dot notation.

To use the square bracket notation, we can write:

dog['name']
Enter fullscreen mode Exit fullscreen mode

This works for all property names, whether they’re valid identifiers or not.

We can also use them to access properties by passing in a property name dynamically with a string or symbol.

The dot notation can be used by writing:

dog.name
Enter fullscreen mode Exit fullscreen mode

This is shorter but only works with valid identifiers.

An object can contain another object.

For instance, we can write:

const book = {
  name: 'javascript basics',
  published: 2020,
  author: {
    firstName: 'jane',
    lastName: 'smith'
  }
};
Enter fullscreen mode Exit fullscreen mode

The author property has the firstName and lastName properties.

We can get nested properties by writing:

book['author']['firstName']
Enter fullscreen mode Exit fullscreen mode

or

book.author.firstName
Enter fullscreen mode Exit fullscreen mode

We can mix the square brackets and dot notation.

So we can write:

book['author'].firstName
Enter fullscreen mode Exit fullscreen mode

Calling an Object’s Methods

We can call a method the same way we call any other function.

For instance, if we have the following object:

const dog = {
  name: 'james',
  gender: 'male',
  speak() {
    console.log('woof');
  }
};
Enter fullscreen mode Exit fullscreen mode

Then we can call the speak method by writing:

dog.speak()
Enter fullscreen mode Exit fullscreen mode

Altering Properties/Methods

We can change properties by assigning a value.

For instance, we can write:

dog.name = 'jane';
dog.gender = 'female';
dog.speak = function() {
  console.log('she barked');
}
Enter fullscreen mode Exit fullscreen mode

We can delete a property from an object with the delete operator:

delete dog.name
Enter fullscreen mode Exit fullscreen mode

Then when we try to get dog.name , we get undefined .

Using this Value

An object has its own this value.

We can use it in our object’s methods.

For instance, we can write:

const dog = {
  name: 'james',
  sayName() {
    return this.name;
  }
};
Enter fullscreen mode Exit fullscreen mode

We return this.name , which should be 'james' .

Because this is the dog object within the sayName method.

Constructor Functions

We can create constructor functions to let us create objects with a fixed structure.

For instance, we can write:

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

We have the instance properties name , occupation and the this.whoAreYou instance method.

They’re all returned when we create a new object with the constructor.

Then we can use the new operator to create a new Person instance:

const jane = new Person('jane', 'writer');
Enter fullscreen mode Exit fullscreen mode

The value of this os set to the returned Person instance.

We should capitalize the first letter of the constructor so that we can tell them apart from other functions.

We shouldn’t call constructor functions without the new operator.

So we don’t write:

const jane = Person('jane', 'writer');
Enter fullscreen mode Exit fullscreen mode

The value of this won’t be set to the returned Person instance this way.

The Global Object

The global object in the browser is the window object.

We can add properties to it with var at the top level:

var a = 1;
Enter fullscreen mode Exit fullscreen mode

Then window.a would be 1.

Calling a constructor without new will return undefined .

So if we have:

const jane = Person('jane', 'writer');
Enter fullscreen mode Exit fullscreen mode

then jane is undefined .

The built-in global functions are properties of the global object.

So parseInt is the same as window.parseInt .

Conclusion

We can access object properties in 2 ways.

Also, we can create constructor functions to create objects with a set structure.

Discussion (0)

pic
Editor guide