{"id":1633,"date":"2016-12-01T13:23:11","date_gmt":"2016-12-01T13:23:11","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=1633"},"modified":"2017-11-16T23:15:00","modified_gmt":"2017-11-16T23:15:00","slug":"javascript-lesson-34-creating-object-using-constructor-notation","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/javascript-lesson-34-creating-object-using-constructor-notation\/","title":{"rendered":"JavaScript Lesson 34: Creating an Object using Constructor Notation"},"content":{"rendered":"

<Previous Lesson><\/a>\u00a0[Table of Contents]<\/a>\u00a0<\/strong>\u00a0<Next Lesson><\/a><\/strong><\/h3>\n

We can create an object in JavaScript using the New keyword and the Object() constructor function. Bear in mind the O of the Object function must be a capital letter, otherwise it will not work.<\/p>\n

After creating the Object, you can then add properties and method to it using the dot notation. Please ensure that each element that adds a property or method should end with a semicolon.<\/p>\n

Example: A Car Object<\/h3>\n

The JavaScript<\/span><\/strong><\/p>\n

var<\/span> car=new<\/span> Object<\/span>();<\/span>\r\ncar.brand='Toyota';<\/span>\r\ncar.model='Camry';<\/span>\r\ncar.capacity='2000cc';<\/span>\r\ncar.stock=10000;<\/span>\r\ncar.booked=3000;<\/span>\r\ncar.checkBalance=function()<\/span>{\r\nreturn this<\/span>.stock-this<\/span>.booked;<\/span>\r\n};\r\nvar<\/span> carbrand=document<\/span>.getElementById(<\/span>'carbrand');<\/span>\r\ncarbrand.textContent=car.brand;\r\nvar<\/span> carmodel=document<\/span>.getElementById(<\/span>'carmodel');<\/span>\r\ncarmodel.textContent=car.model;\r\nvar<\/span> carbalance=document<\/span>.getElementById(<\/span>'balance');<\/span>\r\ncarbalance.textContent=car.checkBalance();<\/span>\r\n<\/pre>\n
In this example, checkBalance is a method, it is actually a function by itself.<\/p>\n
The corresponding HTML document<\/p>\n
<!DOCTYPE html>\r\n<html><\/span>\r\n<body><\/span>\r\n<h1<\/span>>Car brand:<b<\/span> id<\/span>=\"carbrand\"<\/span>><\/b><\/h1><\/span>\r\n<h1><\/span>Car Model:<b<\/span> id<\/span>=\"carmodel\"><\/b><\/h1><\/span>\r\n<h2><\/span>Number of Cars Left:<b<\/span> id<\/span>=\"balance\"<\/span>><\/b><\/h2><\/span>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"car.js\"<\/span>><\/script><\/span>\r\n\r\n<\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n
The Output<\/p>\n
Car brand:<\/b><\/h1>\n
Car Model:<\/b><\/h1>\n
Number of Cars Left:<\/b><\/h2>\n