JavaScript: Object Constructor

Object

Object
An object consists of its properties and their values.
object;  // {property1: 'value 1', property2: 'value 2'}
Creating object
By declaring object defined by its properties and values.
const object = {
    property1: "value 1",
    property2: "value 2",
};

object;  // {property1: 'value 1', property2: 'value 2'}
Accessing object property's value
An object and its property are dot-separated.
object.property
Changing property value
By assigning the new value to property's dot-separated notation.
object.property1 = "new value";

object;  // {property1: 'new value', property2: 'value 2'}
Adding a new value to a new property
By assigning a value to a new property's dot-separated notation.
object.newProperty = "value 3";

object;  // {property1: 'new value', property2: 'value 2', newProperty: 'value 3'}

Object constructor

Object type
We usually have multiple objects following similar structure. This is called object type.
objectA;  // TypeName {property1: 'value A1', property2: 'value A2'}
objectB;  // TypeName {property1: 'value B1', property2: 'value B2'}
Creating objects of the same type
2 steps:
  • Create an object constructor function as the blueprint.
  • Create each new object by calling the function using newkeyword.
Object constructor function
Objects with certain object type can be created using an object constructor function that works like a blueprint or a template.
function TypeName(value1, value2) {
    this.property1 = value1;
    this.property2 = value2;
};
Note: It's a good practise to name the object type with an uppercase first letter.
this keyword
Within the constructor function, the object is addressed with keyword this.
Inside the constructor function, this is not referring to any particular object. It doesn't have a value yet. It's a substitute for the new object that's later created when the function is called using new keyword.
new keyword
To create each new object, new keyword is used to call the constructor function.
Create each new objects using by calling the constructor function with new keyword
const objectA = new TypeName("value A1", "value A2");
const objectB = new Type("value B1", "value B2");
Enjoy your new objects
objectA;  // Type {property1: 'value A1', property2: 'value A2'}
objectB;  // Type {property1: 'value B1', property2: 'value B2'}
Example: Person objects
Creating Person object constructor function
function Person(first, last, year) {
    this.firstName = first;
    this.lastName  = last;
    this.birth     = year;
};
Creating new Person objects
const father  = new Person("John", "Doe", 1950);
const mother  = new Person("Sally", "Mae", 1955);
const sister  = new Person("Puff", "Tail", 1985);
const brother = new Person("Dodo", "Bird", 1980);
Results
father;   // Person {firstName: 'John', lastName: 'Doe', birth: 1950}
mother;   // Person {firstName: 'Sally', lastName: 'Mae', birth: 1955}
sister;   // Person {firstName: 'Puff', lastName: 'Tail', birth: 1985}
brother;  // Person {firstName: 'Dodo', lastName: 'Bird', birth: 1980}

Adding property and method to object

Adding a property to an object
object.newProperty = "value";
Example
father.location = "Bali";
Result
father;   // Person {firstName: 'John', lastName: 'Doe', birth: 1950, location: 'Bali'}
mother;   // Person {firstName: 'Sally', lastName: 'Mae', birth: 1955}
father.location;   // 'Bali'
mother.location;   // undefined
Adding a method to an object
object.methodName = function () {...; return ...;};
Example
father.name = Function() {return this.firstName + " " + this.lastName;};
Result
father;   // Person {firstName: 'John', lastName: 'Doe', birth: 1950, location: 'Bali', name: ƒ}
mother;   // Person {firstName: 'Sally', lastName: 'Mae', birth: 1955}
father.name;      // ƒ () {return this.firstName + " " + this.lastName;}
father.name();    // 'John Doe'
mother.name;      // undefined
mother.name();    // TypeError: mother.name is not a function

Adding property and method to constructor

Not with dot-separated property notation
Adding peroperty or method to constructor is not as simple as to the indivial objects.
The property dot-separated notation is for individual object, not for the object type.
father.location = "Bali";     // works
Person.location = "Bali";     // doesn't work
Person.location will give the value as the comment just like father.location as if it works, but if you check the constructor function amd individual objects, you'll see it doesn't get added anywhere.
A new property needs to be added directly to the constructor function
Existing Person constructor
function Person(first, last, year) {
    this.firstName = first;
    this.lastName  = last;
    this.birth     = year;
};
Created objects
const father  = new Person("John", "Doe", 1950);
const mother  = new Person("Sally", "Mae", 1955);
Add new property with default value to the constructor
function Person(first, last, year) {
    this.firstName = first;
    this.lastName  = last;
    this.birth     = year;
    this.location  = "Bali";
};
Let's create object using the constructor again
const sister  = new Person("Puff", "Tail", 1985);
const brother = new Person("Dodo", "Bird", 1980);
Results
father;   // Person {firstName: 'John', lastName: 'Doe', birth: 1950}
mother;   // Person {firstName: 'Sally', lastName: 'Mae', birth: 1955}
sister;   // Person {firstName: 'Puff', lastName: 'Tail', birth: 1985, location: 'Bali'}
brother;  // Person {firstName: 'Dodo', lastName: 'Bird', birth: 1980, location: 'Bali'}
Note that the new property only added to newly created objects after the addition, doesn't affect the previously made objects.
Similarly, a new method needs to be added directly to the constructor function
Existing Person constructor
function Person(first, last, year) {
    this.firstName = first;
    this.lastName  = last;
    this.birth     = year;
};
Created objects
const father  = new Person("John", "Doe", 1950);
Adding a function to the constructor
function Person(first, last, year) {
    this.firstName  = first;
    this.lastName   = last;
    this.birth      = year;
    this.changeName = function (name) {
        this.lastName = name;
    };
};
It takes effect only to objects created after the constructor update.
Results
father;                     // Person {firstName: 'John', lastName: 'Doe', birth: 1950}
father.changeName("Smith"); // TypeError
father;                     // Person {firstName: 'John', lastName: 'Doe', birth: 1950}

const mother  = new Person("Sally", "Mae", 1955);
mother;                     // Person {firstName: 'Sally', lastName: 'Mae', birth: 1955, changeName: ƒ}
mother.changeName("Doe")    // undefined
mother;                     // Person {firstName: 'Sally', lastName: 'Doe', birth: 1955, changeName: ƒ}

Built-in constructors

Built-in constructors for native objects
new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object
Despite so, using their primitive data types are better than create complex objects.Primitive values are much faster.
  • string literal ""
  • number literal 123
  • boolean literal true / false
  • object literal {}
  • array literal []
  • pattern literal /()/
  • function expression () {}
Examples
  • String object
    • Creating string as a primitive: name = "John"
    • Creating string as an object: name = new String("John")
    • Other than complicate the code and slow down execution, it also have unexpected results.
      • x = "John";               // "John"
y = new String("John");   // String {'John'}
z = new String("John"); 

typeof x;   // string
typeof y;   // object

x == y;     // true
x === y;    // false
y == z;     // false
y === z;    // false
  • Number object
    • Creating string as a primitive: x = 30
    • Creating string as an object: x = new Number(30)
    • Similarly, number should not be created as an object.
      • x = 123;                // 123
y = new Number(123);    // Number {123}
z = new Number(123);

typeof x;   // number
typeof y;   // object

x == y;     // true
x === y;    // false
y == z;     // false
y === z;    // false
  • Boolean object
    • Creating string as a primitive: x = false
    • Creating string as an object: x = new Boolean(false)
    • Similarly, boolean should not be created as an object.
      • x = true;               // true
y = new Boolean(true);  // Boolean {true}
z = new Boolean(true);

typeof x;   // boolean
typeof y;   // object

x == y;     // true
x === y;    // false
y == z;     // false
y === z;    // false
Note: Math() is a global object. The new keyword can't be used on Math

References