DONATE  
MENU
PHP
CSS
JAVASCRIPT
AJAX
MYSQL
HTML
JSON

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Objects » Creating Objects
Share Tweet WhatsApp

Creating Objects

We can create objects in JavaScript:
  • Explicitly - we shall call such "Explicit objects" for the purpose of this tutorial.
  • Implicitly or using the Object() prototype - we shall also call such "Implicit objects".
  • Prototype definition - we shall call such "prototype objects" for the purpose of this tutorial.
Explicit Method (Explicit Objects) Explicit objects are those created the basic, easiest but limited way of creating objects from the Object() prototype. Limited because they are not a prototype from which we can create other objects using the new keyword rather they have a prototype(Object()). To create explicit objects, you simply enclose in curly braces({ }) the various properties and methods of the object arrange in name:value pair.
var obj = {app:"StackBeginner", version:"v2.1"};
NOTE:
  • The name:values must be separated from each other using a comma(,).
EXAMPLE
<script>
    
var product = {
//VALUE_NAME : VALUE
"product_id":"17839FHG" /*A property */,
"product_name": "Stack T - Shirt" /*A property */,
"product_price": 350 /*A property */,
"product_desc": "A T - shirt for stackbeginners." /*A property */,
"getInfo": function (){
return  [this.product_id, this.product_name, this.product_desc, this.product_price];
} /*A method*/,
"changePrice": function (new_price){
this.product_price = new_price;
} /*A method*/
};


alert(typeof(product));
</script>

Copy PRACTICE IT

You may decide to have the name associated with a value in quotes just as can be seen above. You may also decide not to. The implicit or new Object() Method (Implicit Objects) Objects created using the Object() prototype method possess same qualities or features as those created the explicit way. The difference is the syntax used in creating them.
<script>
var obj = new Object();
obj.name = "Joseph, Omamode"; //A property
obj.myFunc = function (){
}; //A method
alert(obj.name);
</script>

Copy PRACTICE IT

Above is an example of an object created using the Object() prototype. Both explicit and implicit objects are single objects having a prototype which is the Object() prototype. Using The Properties & Methods We can then use the properties and methods of objects created explicitly or implicitly as shown below,
<script>
    
var product = {
//VALUE_NAME : VALUE
"product_id":"17839FHG" /*A property */,
"product_name": "Stack T - Shirt" /*A property */,
"product_price": 350 /*A property */,
"product_desc": "A T - shirt for stackbeginners." /*A property */,
"getInfo": function (){
return  [this.product_id, this.product_name, this.product_desc, this.product_price];
} /*A method*/,
"changePrice": function (new_price){
this.product_price = new_price;
} /*A method*/
}

alert(product.product_name);
alert("Before invoking the changePrice() method, price was "+product.product_price);

product.changePrice(890); //invoking the object method to change the product price
alert("Price is now "+product['product_price']);
</script>

Copy PRACTICE IT

Explicit & Implicit Objects Can't Create Other Objects One of the concept of object oriented programming is instantiation where a variable can be assigned the properties and methods of an already defined class or object prototype using the new keyword. The new variable can then do whatever it desires with such properties and methods separately without affecting the parent class or object prototype. But JavaScript objects created explicitly or implicitly are not a class neither a prototype and as such, cannot create other objects on other variables rather they have already been created from a prototype(Object()). When you assign a variable containing an explicit or implicit object to another hoping the new variable is on its own, the truth is that whatever object method you invoke or object property you change with the new variable affects the parent object.
<script>
var product1 = {
"price": 560,
"changePrice": function (new_price){
this.price = new_price;
}
}; //The main object

var product2 = product1; //Assigning the main object to another variable

product2.changePrice(100);//The second variable using a method of the object

alert(product1.price); //The change will affect the parent or main object
</script>

Copy PRACTICE IT

Above, we created an explicit object(product1) and then, assigned the object to another variable(product2). Thereafter, we called a method (changePrice) of the object on the second variable(product2) but as you can see, it affected the main object(product1). Another explanation to the above is that, assuming there is a prototype from which a particular set of radios can be created, a radio created from that prototype cannot create other radios because it is not a prototype rather it was created from the prototype. Therefore, explicit and implicit objects are not prototype rather they were created from a prototype (Object()) and as such, can't create other objects. Implicit equivalent of above example.
<script>
var product1 = new Object();
product1.price = 560; 
product1.changePrice = function (new_price){
this.price = new_price;
};

var product2 = product1; //Assigning the main object to another variable

product2.changePrice(100);//The second variable using a method of the object

alert(product1.price); //The change will affect the parent or main object
</script>

Copy PRACTICE IT

ADD/CHANGE PROPERTY OR METHOD To change any property or method of an object created implicitly or explicitly at any given point in a program, you simply access that property or method and assign its new value or function definition to it.
<script>
var obj = {app: "StackBeginner",
version: "v1.2"};

alert("You are using "+obj.app+". Version:"+obj.version);
obj.version = "v1.3"; //changes the "version" value
alert("The version is now "+obj.version);
</script>

Copy PRACTICE IT

To add,
<script>
var obj = {app: "StackBeginner",
version: "v1.2"};

//ADD PROPERTY
obj.author = "Joseph Omamode"; //adds a new property "author"
alert(JSON.stringify(obj)); //converts the object to a string so that we can see its content. The new property shall be seen in it.
</script>

Copy PRACTICE IT

You will learn how to create objects using the prototype definition method in the next page. SUMMARY
  1. JavaScript objects can be created explicitly, implicitly or by defining a prototype to create such.
  2. Creating objects using the explicit method involves having the object values arranged in name:value pairs and enclose in curly braces ({ }).
  3. Remember to separate each object value from the other with a comma(,).
  4. You can also create objects through direct use of the Object() prototype. Objects created this way have same qualities as those created using the explicit method.
  5. Other objects can not be created from objects created using the explicit or Object() prototype method.
Take a short quiz on Creating Objects.
Ask a question or tell us if Creating Objects is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode