bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Object Constructors

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.

Read More

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

See Also

What are JavaScript Objects?

What are Object Properties?

What are Object Methods?

What is this in Objects?

How to Display Objects

Advanced Chapters

JavaScript Object Definitions

JavaScript Object Advanced this

JavaScript Object Iterations

JavaScript Object Getters & Setters

JavaScript Object Management

JavaScript Object Protection

JavaScript Object Prototypes

JavaScript Object Reference

Previous

JavaScript Function apply()

Next

JavaScript Temporal PlainDate

This chapter

Overview
123

Lessons

539m

Read time

1. JavaScript Objects2. JavaScript Temporal Tutorial3. JavaScript Loops4. JavaScript Advanced Functions5. JavaScript Objects6. JavaScript Temporal Intro7. JavaScript Iterables8. JavaScript Function Definitions9. JavaScript Object Properties10. JavaScript Temporal vs Date11. JavaScript Iterators12. JavaScript Callbacks13. JavaScript Object Methods14. JavaScript Temporal Duration15. JavaScript Generators16. The JavaScript this Keyword17. JavaScript this Keyword18. JavaScript Temporal Instant19. JavaScript Function call()20. JavaScript Display Objects21. JavaScript PlainDateTime22. JavaScript Function apply()23. JavaScript Object Constructors24. JavaScript Temporal PlainDate25. JavaScript Function bind()26. JavaScript PlainYearMonth27. Self-Invoking Functions28. JavaScript PlainMonthDay29. JavaScript Closures30. JavaScript Temporal PlainTime31. JavaScript Objects - Advanced32. JavaScript ZonedDateTime33. JavaScript Object Definitions34. JavaScript Temporal Now35. this in JavaScript Objects36. JS Temporal Arithmetic37. JavaScript Object Iterations38. JS Temporal Differences39. JavaScript Object Accessors40. JS Temporal Compare41. JavaScript Object Management42. JavaScript Temporal Conversion43. JavaScript Object Protection44. Temporal Display Formats45. JavaScript Object Prototypes46. JavaScript Temporal Mistakes47. JavaScript Classes48. Migrate from Date to Temporal49. JavaScript Class Inheritance50. Temporal Standards51. JavaScript Static Methods52. Asynchronous JavaScript53. Asynchronous Programming54. JavaScript Timeouts55. JavaScript Callbacks56. JavaScript Promises57. JavaScript async and await58. JavaScript fetch API59. Debugging Async JavaScript60. JavaScript Modules61. JavaScript Modules Export62. JavaScript Modules Import63. JS Module Namespace64. JavaScript Dynamic Modules65. JavaScript Meta Programming66. JavaScript Reflect67. JavaScript Proxy68. JavaScript Typed Arrays69. Typed Array Methods70. JavaScript ArrayBuffer71. JavaScript DataView72. JavaScript Atomics73. JavaScript HTML DOM Navigation74. JavaScript HTML DOM Elements (Nodes)75. JavaScript HTML DOM Collections76. JavaScript HTML DOM Node Lists77. JavaScript Window - The Browser Object Model78. JavaScript Window Screen79. JavaScript Window Location80. JavaScript Window History81. JavaScript Window Navigator82. JavaScript Popup Boxes83. JavaScript Timing Events84. JavaScript Cookies85. Web APIs - Introduction86. JavaScript Fetch API87. Web Geolocation API88. Web History API89. Pointer Events API90. Web Storage API91. JavaScript Validation API92. Web Workers API93. AJAX Introduction94. AJAX - The XMLHttpRequest Object95. AJAX - XMLHttpRequest96. AJAX - Server Response97. AJAX XML Example98. AJAX PHP Example99. AJAX ASP Example100. AJAX Database Example101. XML Applications102. JavaScript JSON103. JSON Syntax104. JSON vs XML105. JSON Data Types106. JSON.parse()107. JSON.stringify()108. JSON Object Literals109. JSON Array Literals110. JSON PHP111. JSON HTML112. JSONP113. JavaScript / jQuery DOM Selectors114. JavaScript / jQuery HTML Elements115. JavaScript / jQuery CSS Styles116. JavaScript / jQuery HTML DOM117. JavaScript Graphics118. HTML Canvas119. Plotly.js120. Chart.js121. Google Chart122. D3.js123. JavaScript Interview Preparation

On this page

Object Constructor FunctionsProperty Default ValuesAdding a Property to an ObjectAdding a Property to a ConstructorConstructor Function MethodsAdding a Method to an ObjectAdding a Method to a ConstructorBuilt-in JavaScript ConstructorsDid You Know?