Factory and Constructor Functions | Cheat Sheet Modern JS

 

1. Factory Function

A Factory function is any function that returns a new object for every function call.

The Function name should follow the camelCase naming convention.

Syntax:

function functionName(parameter1, parameter2, ...) {

return {

property1: parameter1,

property2: parameter2,

...

...

}

}

let myObject = functionName(arg1, arg2, ...)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function createCar(color, brand) {

return {

color: color,

brand: brand,

start: function() {

console.log("started");

}

};

}

let car1 = createCar("blue", "Audi");

let car2 = createCar("red", "Tata");

let car3 = createCar("green", "BMW");

console.log(car1); // Object { color: "blue", brand: "Audi", start: ƒ() }

console.log(car2); // Object { color: "red", brand: "Tata", start: ƒ() }

console.log(car3); // Object { color: "green", brand: "BMW", start: ƒ() }

JAVASCRIPT

Collapse

1.1 Shorthand Notations

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function createCar(color, brand) {

return {

color,

brand,

start() {

console.log("started");

}

};

}

let car1 = createCar("blue", "Audi");

let car2 = createCar("red", "Tata");

let car3 = createCar("green", "BMW");

console.log(car1); // Object { color: "blue", brand: "Audi", start: ƒ() }

console.log(car2); // Object { color: "red", brand: "Tata", start: ƒ() }

console.log(car3); // Object { color: "green", brand: "BMW", start: ƒ() }

JAVASCRIPT

Collapse

2. Constructor Function

A regular function that returns a new object on calling with the

new

operator. The created new object is called an Instance.

The Function name should follow the PascalCase naming convention.

Syntax:

function FunctionName(parameter1, parameter2, ...) {

this.property1 = parameter1;

this.property2 = parameter2;

...

...

}

let myObject = new FunctionName(arg1, arg2, ...)

2.1 The new Operator

When a function is called with the

new

operator, it does the following steps:

• Creates an empty object and assigns it to 
  this
• Return 
  this

1

2

3

4

5

6

7

8

9

10

function Car(color, brand) {

this.color = color;

this.brand = brand;

this.start = function() {

console.log("started");

};

}

let car1 = new Car("blue", "Audi");

console.log(car1); // Car { }

JAVASCRIPT

Here,

• car1
   is instance
• car1.start()
   is instance method
• car1.color
  , 
  car1.brand
   are instance properties

2.2 Factory vs Constructor Functions

Factory Functions	Constructor Functions
Follows camelCase notation	Follows PascalCase notation
Doesn't need  new  operator for function calling	Needs  new  operator for function calling
Explicitly need to return the object	Created object returns implicitly

Try out the Factory and Constructor Functions in the JavaScript Code Playground.

3. JS Functions

Similar to Objects, Functions also have properties and methods.

3.1 Default Properties

• name
• length
• constructor
• prototype, etc.

3.2 Default Methods

• apply()
• bind()
• call()
• toString(), etc.

3.3 Function Properties

3.3.1 The name Property

This property returns the name of the function.

1

2

3

4

5

6

7

8

function Car(color, brand) {

this.color = color;

this.brand = brand;

this.start = function() {

console.log("started");

};

}

console.log(Car.name); // Car

JAVASCRIPT

3.3.2 The length Property

This property returns the number of parameters passed to the function.

1

2

3

4

5

6

7

8

function Car(color, brand) {

this.color = color;

this.brand = brand;

this.start = function() {

console.log("started");

};

}

console.log(Car.length); // 2

JAVASCRIPT

3.3.3 The 

typeof

 function

1

2

3

4

5

6

7

8

function Car(color, brand) {

this.color = color;

this.brand = brand;

this.start = function() {

console.log("started");

};

}

console.log(typeof(Car)); // function

JAVASCRIPT

4. The Constructor Property

Every object in JavaScript has a constructor property.

The constructor property refers to the constructor function that is used to create the object.

1

2

3

4

5

6

7

8

9

function Car(color, brand) {

this.color = color;

this.brand = brand;

this.start = function() {

console.log("started");

};

}

let car1 = new Car("blue", "Audi");

console.log(car1.constructor); // f Car(color, brand) {}

JAVASCRIPT

5. Built-in Constructor Function

These are the Constructor functions provided by JavaScript.

• function Date()
• function Error()
• function Promise()
• function Object()
• function String()
• function Number(), etc.

In JavaScript, date and time are represented by the Date object. The Date object provides the date and time information and also provides various methods.

5.1 Creating Date Objects

There are four ways to create a date object.

• new Date()
• new Date(milliseconds)
• new Date(datestring)
• new Date(year, month, day, hours, minutes, seconds, milliseconds)

5.1.1 new Date()

You can create a date object without passing any arguments to the

new Date()

constructor function.

For example,

1

2

3

4

let now = new Date();

console.log(now); // Tue Feb 02 2021 19:10:29 GMT+0530 (India Standard Time) { }

console.log(typeof(now)); // object

JAVASCRIPT

Here,

new Date()

creates a new date object with the current date and local time.

Note

1. Coordinated Universal Time (UTC) - It is the global standard time defined by the World Time Standard. (This time is historically known as Greenwich Mean Time, as UTC lies along the meridian that includes London and nearby Greenwich in the United Kingdom.)
2. Local Time - The user's device provides the local time.

5.1.2 new Date(milliseconds)

The

Date

object contains a number that represents milliseconds since 1 January 1970 UTC.

The

new Date(milliseconds)

creates a new date object by adding the milliseconds to zero time.

For example,

1

2

3

4

5

6

let time1 = new Date(0);

console.log(time1); // Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time) { }

// 100000000000 milliseconds from 1 Jan 1970 UTC

let time2 = new Date(100000000000);

console.log(time2); // Sat Mar 03 1973 15:16:40 GMT+0530 (India Standard Time) { }

JAVASCRIPT

Note

1000 milliseconds is equal to 1 second.

5.1.3 new Date(date string)

The

new Date(date string)

creates a new date object from a date string.

Syntax:

new Date(datestring);

1

2

3

let date = new Date("2021-01-28");

console.log(date); // Thu Jan 28 2021 05:30:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

You can also pass only the year and month or only the year. For example,

1

2

3

4

5

let date = new Date("2020-08");

console.log(date); // Sat Aug 01 2020 05:30:00 GMT+0530 (India Standard Time) { }

let date1 = new Date("2020");

console.log(date1); // Wed Jan 01 2020 05:30:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

Short date format

1

2

3

// short date format "MM/DD/YYYY"

let date = new Date("03/25/2015");

console.log(date); // Wed Mar 25 2015 00:00:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

Long date format

1

2

3

// long date format "MMM DD YYYY"

let date1 = new Date("Jul 1 2021");

console.log(date1); // Thu Jul 01 2021 00:00:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

Month and Day can be in any order

1

2

let date2 = new Date("1 Jul 2021");

console.log(date2); // Thu Jul 01 2021 00:00:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

The month can be full or abbreviated. Also, month names are case insensitive.

1

2

3

4

5

6

let date3 = new Date("July 1 2021");

console.log(date3); // Thu Jul 01 2021 00:00:00 GMT+0530 (India Standard Time) { }

// commas are ignored

let date4 = new Date("JULY, 1, 2021");

console.log(date4); // Thu Jul 01 2021 00:00:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

5.1.4 new Date(year, month, day, hours, minutes, seconds, milliseconds)

It creates a new date object by passing a specific date and time.

For example,

1

2

let time1 = new Date(2021, 1, 20, 4, 12, 11, 0);

console.log(time1); // Sat Feb 20 2021 04:12:11 GMT+0530 (India Standard Time) { }

JAVASCRIPT

Here, months are counted from 0 to 11. January is 0 and December is 11.

The passed argument has a specific order.

If four numbers are passed, it represents the year, month, day and hours.

For example,

1

2

let time1 = new Date(2021, 1, 20, 4);

console.log(time1); // Sat Feb 20 2021 04:00:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

Similarly, if two arguments are passed, it represents year and month.

For example,

1

2

let time1 = new Date(2020, 1);

console.log(time1); // Sat Feb 20 2021 04:00:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

Warning

If you pass only one argument, it is treated as milliseconds. Hence, you have to pass two arguments to use this date format.

5.2 AutoCorrection in Date Object

When you assign out of range values in the Date object, it auto-corrects itself.

For example,

1

2

3

let date = new Date(2008, 0, 33);

// Jan does not have 33 days

console.log(date); // Sat Feb 02 2008 00:00:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

33 days are auto corrected to 31 (jan) + 2 days in feb.

5.3 Instance Methods

There are methods to access and set values like a year, month, etc. in the Date Object.

Method	Description
now()	Returns the numeric value corresponding to the current time (the number of milliseconds passed since January 1, 1970, 00:00:00 UTC)
getFullYear()	Gets the year according to local time
getMonth()	Gets the month, from 0 to 11 according to local time
getDate()	Gets the day of the month (1–31) according to local time
getDay()	Gets the day of the week (0-6) according to local time
getHours()	Gets the hour from 0 to 23 according to local time
getMinutes	Gets the minute from 0 to 59 according to local time
getUTCDate()	Gets the day of the month (1–31) according to universal time
setFullYear()	Sets the full year according to local time
setMonth()	Sets the month according to local time
setDate()	Sets the day of the month according to local time
setUTCDate()	Sets the day of the month according to universal time

1

2

3

4

let date1 = new Date(1947, 7, 15, 1, 3, 15, 0);

console.log(date1.getFullYear()); // 1947

console.log(date1.getMonth()); // 7

JAVASCRIPT

5.3.1 Setting Date Values

1

2

3

4

5

let date1 = new Date(1947, 7, 15);

date1.setYear(2021);

date1.setDate(1);

console.log(date1); // Sun Aug 01 2021 00:00:00 GMT+0530 (India Standard Time) { }

JAVASCRIPT

Try out the JS function properties and Date Methods in the JavaScript Code Playground.