JavaScript Tutorials

Overview

When many JavaScript objects of the same type need to be created, an “object type” can be be created using an object constructor function.

Creating an Object Type

function Car(type, model, year) {
    this.autoType = type;
    this.autoModel = model;
    this.autoYear = year;
}

Note

In the constructor function, “this” has no value. The value of “this” will become the new object when a new object is created.

Note

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

Creating Many Objects

The new to create many new objects based on the object type.

const myNewCar = new Car("Maserati", "Quattroporte", 2019);
const myOldCar = new Car("Alfa Romeo", "Guilia", 2019);
const myOlderCar = new Car("Maserati", "Ghibli", 2016);

Adding a Property to an Object

Adding a new property to an Object will be added only to that object. It will not be added to any other objects created by the object type.

myNewCar.autoColor = "white";

Setting Property Default Values

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

function Car(type, model, year) {
    this.autoType = type;
    this.autoModel = model;
    this.autoYear = year;
    this.autoColor = "white";
}

Adding a Property to a Constructor Using the “prototype” Method

A new property cannot be added to an object constructor.

Car.autoColor = "white"; // this will not work; the property will be "undefined"

The new property must be added using the constructor function prototype.

Car.prototype.autoColor = "white";

Constructor Function Methods

Methods can also be added to an object constructor.

function Car(type, model, year) {
    this.autoType = type;
    this.autoModel = model;
    this.autoYear = year;
    fullName: function() {
        return this.autoType + " " + this.autoModel; // this is a method stored as a property/value pair
    }
}

Adding a Method to an Object

The new method will be added to myNewCar. Not to any other Car objects.

myNewCar.changeColor = function (color) {
    this.autoColor = color;
}

Adding a Method to a Constructor Using the “prototype” Method

A new method cannot be added to an object constructor function.

The following will produce a TypeError.

Car.changeColor = function (color) {
    this.autoColor = color;
}

myNewCar.changeColor("red"); // TypeError: myMother.changeName is not a function

The new method must be added using the constructor function prototype.

Car.prototype.changeColor = function (color) {
    this.autoColor = color;
}

myNewCar.changeColor("red");

Built-in JavaScript Constructors

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

JavaScript Notes:

  • When using JavaScript, single or double quotation marks are acceptable and work identically to one another; choose whichever you prefer, and stay consistent
  • JavaScript is a case-sensitive language; firstName is NOT the same as firstname
  • JavaScript variables are case sensitive (x is not the same as X)
  • Arrays count starting from zero NOT one; so item 1 is position [0], item 2 is position [1], and item 3 is position [2] … and so on
  • JavaScript variables must begin with a letter, $, or _

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.