Object-Oriented JavaScript — Objects and Constructors
Tags: webdev, programming, javascript, beginners
Published: 2021-01-24 21:56:01

**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']
```

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
```

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'
  }
};
```

The `author` property has the `firstName` and `lastName` properties.

We can get nested properties by writing:

```
book['author']['firstName']
```

or

```
book.author.firstName
```

We can mix the square brackets and dot notation.

So we can write:

```
book['author'].firstName
```

### 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');
  }
};
```

Then we can call the `speak` method by writing:

```
dog.speak()
```

### 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');
}
```

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

```
delete dog.name
```

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;
  }
};
```

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}`
  };
}
```

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');
```

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');
```

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;
```

Then `window.a` would be 1.

Calling a constructor without `new` will return `undefined` .

So if we have:

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

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.