10.6 Object Constructors

Adding a Property to an Object

Adding a new property to an existing object is easy:

Example 2: JS Object Constructors - Add a Property to an Object

myFather.nationality = "English";

The property will be added to myFather. Not to myMother. (Not to any other person objects).

Adding a Method to an Object

Adding a new method to an existing object is easy:

Example 3: JS Object Constructors - Adding a Method to an Object

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

The method will be added to myFather. Not to myMother. (Not to any other person objects).

Adding a Property to a Constructor

You cannot add a new property to an object constructor the same way you add a new property to an existing object:

Example 4: JS Object Constructors - Adding a Property to a Constructor part 1

Person.nationality = "English";

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

Example 5: JS Object Constructors - Adding a Property to a Constructor part 2

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

This way object properties can have default values.

Example 6: JS Object Constructors - Adding a Property to a Constructor part 3

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

Object properties can have default values. However, the default value applies to all person objects.

Adding a Method to a Constructor

Your constructor function can also define methods:

Example 7: JS Object Constructors - Adding a Method to a Constructor

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

• You cannot add a new method to an object constructor the same way you add a new method to an existing object.
• Adding methods to an object constructor must be done inside the constructor function:

Example

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
} 

The changeName() function assigns the value of name to the person's lastName property.

Now You Can Try:

myMother.changeName("Doe");

Try it yourself

JavaScript knows which person you are talking about by "substituting" this with myMother.

Did You Know?

As you can see above, JavaScript has object versions of the primitive data types String, Number, and Boolean. But there is no reason to create complex objects. Primitive values are much faster:

• Use string literals "" instead of new String().
• Use number literals 50 instead of new Number().
• Use boolean literals true / false instead of new Boolean().
• 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().

Example 8: Did You Know?

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function