Loading lesson path

JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Object Constructors

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind JavaScript Object Constructors?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___ Person(first, last, age, eye) {

3Order

Put the learning moves in the order that makes the concept easiest to apply.

Adding a Property to an Object

Property Default Values

Object Constructor Functions

Sometimes we need to create many objects of the same type .

To create an object type we use an object constructor function .

It is considered good practice to name constructor functions with an upper-case first letter.

Object Type Person

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

In the constructor function, this has no value.

The value of this will become the new object when a new object is created.

JavaScript Object this .

Now we can use new Person() to create many new Person objects:

Example

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
const mySister = new Person("Anna", "Rally", 18, "green");
const mySelf = new Person("Johnny", "Rally", 22, "green");

Property Default Values

A value given to a property will be a default value for all objects created by the constructor:

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

Adding a Property to an Object

Adding a property to a created object is easy:

myFather.nationality = "English";

The new property will be added to myFather . Not to any other Person Objects .

Adding a Property to a Constructor

You can NOT add a new property to an object constructor:

Person.nationality = "English";

To add a new property, you must add it to the constructor function prototype:

Person.prototype.nationality = "English";

Constructor Function Methods

A constructor function can also have methods :

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.fullName = function() {
    return this.firstName + " " + this.lastName;
  };
}

Adding a Method to an Object

Adding a method to a created object is easy:

myMother.changeName = function (name) {
 this.lastName = name;
}

The new method will be added to myMother . Not to any other Person Objects .

Adding a Method to a Constructor

You cannot add a new method to an object constructor function.

Example

Person.changeName = function (name) {
 this.lastName = name;
}
myMother.changeName("Doe");

TypeError: myMother.changeName is not a function

Adding a new method to a constructor must be done to the constructor function prototype:

Person.prototype.changeName = function (name) {
 this.lastName = name;
}
myMother.changeName("Doe");

The changeName() function assigns the value of name to the person's lastName property, substituting this with myMother .

Built-in JavaScript Constructors

JavaScript has built-in constructors for all native objects:

Runnable example

new Object()   // A new Object object
new Array()    // A new Array object
new Map()      // A new Map object
new Set()      // A new Set object
new Date()     // A new Date object
new RegExp()   // A new RegExp object
new Function() // A new Function object

The Math() object is not in the list. Math is a global object. The new keyword cannot be used on Math .

Did You Know?

Use object literals {} instead of new Object() .

Use array literals [] instead of new Array() .

Use pattern literals /()/ instead of new RegExp() .

Use function expressions () {} instead of new Function() .

""; // primitive string
0; // primitive number
false; // primitive boolean
{}; // object object
[]; // array object
/()/ // regexp object
function(){}; // function

JavaScript Object Constructors

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind JavaScript Object Constructors?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___ Person(first, last, age, eye) {

3Order

Put the learning moves in the order that makes the concept easiest to apply.

Adding a Property to an Object

Property Default Values

Object Constructor Functions

Sometimes we need to create many objects of the same type .

To create an object type we use an object constructor function .

It is considered good practice to name constructor functions with an upper-case first letter.

Object Type Person

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

In the constructor function, this has no value.

The value of this will become the new object when a new object is created.

JavaScript Object this .

Now we can use new Person() to create many new Person objects:

Example

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
const mySister = new Person("Anna", "Rally", 18, "green");
const mySelf = new Person("Johnny", "Rally", 22, "green");

Property Default Values

A value given to a property will be a default value for all objects created by the constructor:

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

Adding a Property to an Object

Adding a property to a created object is easy:

myFather.nationality = "English";

The new property will be added to myFather . Not to any other Person Objects .

Adding a Property to a Constructor

You can NOT add a new property to an object constructor:

Person.nationality = "English";

To add a new property, you must add it to the constructor function prototype:

Person.prototype.nationality = "English";

Constructor Function Methods

A constructor function can also have methods :

Example

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.fullName = function() {
    return this.firstName + " " + this.lastName;
  };
}

Adding a Method to an Object

Adding a method to a created object is easy:

myMother.changeName = function (name) {
 this.lastName = name;
}

The new method will be added to myMother . Not to any other Person Objects .

Adding a Method to a Constructor

You cannot add a new method to an object constructor function.

Example

Person.changeName = function (name) {
 this.lastName = name;
}
myMother.changeName("Doe");

TypeError: myMother.changeName is not a function

Adding a new method to a constructor must be done to the constructor function prototype:

Person.prototype.changeName = function (name) {
 this.lastName = name;
}
myMother.changeName("Doe");

The changeName() function assigns the value of name to the person's lastName property, substituting this with myMother .

Built-in JavaScript Constructors

JavaScript has built-in constructors for all native objects:

Runnable example

new Object()   // A new Object object
new Array()    // A new Array object
new Map()      // A new Map object
new Set()      // A new Set object
new Date()     // A new Date object
new RegExp()   // A new RegExp object
new Function() // A new Function object

The Math() object is not in the list. Math is a global object. The new keyword cannot be used on Math .

Did You Know?

Use object literals {} instead of new Object() .

Use array literals [] instead of new Array() .

Use pattern literals /()/ instead of new RegExp() .

Use function expressions () {} instead of new Function() .

""; // primitive string
0; // primitive number
false; // primitive boolean
{}; // object object
[]; // array object
/()/ // regexp object
function(){}; // function