Objects in Javascript

Objects, in JavaScript is it’s most important data-type and forms the building blocks for modern JavaScript. These objects are quite different from JavaScript’s primitive data-types(Number, String, Boolean, null, undefined and symbol) in the sense that while these primitive data-types all store a single value each (depending on their types) .

  • Objects are more complex and each object may contain any combination of these primitive data-types as well as reference data-types.
  • An object, is a reference data type. Variables that are assigned a reference value are given a reference or a pointer to that value. That reference or pointer points to the location in memory where the object is stored. The variables don’t actually store the value.
  • Loosely speaking, objects in JavaScript may be defined as an unordered collection of related data, of primitive or reference types, in the form of “key:value” pairs. These keys can be variables or functions and are called properties and methods, respectively, in the context of an object.

To understand this rather abstract definition, let us look at an example of a JavaScript Object :

let school = {
    name : "City School",
    location : "Delhi",
    established : 1995
}

In the above example “name”, “location”, “established” are all “keys” and “City School”, “Delhi” and 1995 are values of these keys respectively.

Each of these keys are referred to as properties of the object. An object in JavaScript may also have a function as a member, in which case it will be known as a method of that object.

Let us see such an example :



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
<script>
let school = {
    name : "City School",
    location : "Delhi",
    established : 1995,
    displayinfo : function() {
        document.write(this.name + " was established in "
             + this.established + " at " + this.location)
    }
}
  
// Outputs : City School was established 
// in 1995 at Delhi
school.displayinfo()
</script>
</body>
</html>    

chevron_right


Output:

City School was established in 1995 at Delhi

In the above example, “displayinfo” is a method of the school object that is being used to work with the object’s data, stored in its properties.

Properties of JavaScript Object

The property names can be strings or numbers. In case the property names are numbers, they must be accessed using the “bracket notation” like this :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
<script>
let school = {
    name : "City School",
    location : "Delhi",
    established : 1995,
    20 : 1000,
    displayinfo : function() {
        document.write(this.name + " was established in "
                    + this.established + " at " + this.location + '<br>')
    }
}
  
school.displayinfo()
// Outputs : 1000
// using the dot notation will result in an error
document.write(school['20']) ;
                      
</script>
</body>
</html>    

chevron_right


Output:

City School was established in 1995 at Delhi
1000 

But more on the bracket notation later.

Property names can also be strings with more than one space separated words. In which case, these property names must be enclosed in quotes :

let school = {
    "school name" : "City School",
}

Like property names which are numbers, they must also be accessed using the bracket notation.

Inherited Properties

Inherited properties of an object are those properties which have been inherited from the object’s prototype, as opposed to being defined for the object itself, which is known as the object’s Own property. To verify if a property is an objects Own property, we can use the hasOwnProperty method.



Property Attributes
Data properties in JavaScript have four attributes.

  • value : The property’s value.
  • writable : When true, the property’s value can be changed
  • enumerable : When true, the property can be iterated over by “for-in” enumeration. Otherwise, the property is said to be non-enumerable.
  • configurable : If false, attempts to delete the property, change the property to be an access-or property, or change its attributes (other than [[Value]], or changing [[Writable]] to false) will fail.

Creating Objects

There are several ways or syntax’s to create objects. One of which, known as the Object literal syntax, we have already used. Besides the object literal syntax, objects in JavaScript may also be created using the constructors, Object Constructor or the prototype pattern.

  1. Using the Object literal syntax : Object literal syntax uses the {…} notation to initialize an object an its methods/properties directly.
    Let us look at an example of creating objects using this method :

    var obj = {
        member1 : value1,
        member2 : value2,
    };
    

    These members can be anything – strings, numbers, functions, arrays or even other objects. An object like this is referred to as an object literal.This is different from other methods of object creation which involve using constructors and classes or prototypes, which have been discussed below.

  2. Object Constructor : Another way to create objects in JavaScript involves using the “Object” constructor. The Object constructor creates an object wrapper for the given value. This, used in conjunction with the “new” keyword allows us to initialize new objects.
    Example :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    var school = new Object();
    school.name = "City School";
    school.location = "Delhi";
    school.established = 1995;
      
    school.displayinfo = function() {
        document.write(this.name + " was established in "
                    + this.established + " at " + this.location)
    }
    school.displayinfo();
    </script>
    </body>
    </html>                                                            

    chevron_right

    
    

    Output:

    City School was established in 1995 at Delhi
    

    The two methods mentioned above are not well suited to programs that require creation of multiple objects of the same kind, as it would involve repeatedly writing the above lines of code for each such object. To deal with this problem, we can make use of two other methods of object creation in JavaScript that reduces this burden significantly, as mentioned below:

  3. Constructors : Constructors in JavaScript, like in most other OOP languages, provides a template for creation of objects. In other words, it defines a set of properties and methods that would be common to all objects initialized using the constructor.
    Let us see an example :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    function schools(name, location, established)
    {
      
        this.name = name;
        this.location = location;
        this.established = established;
      
        this.displayinfo = function() {
            document.write(this.name + " was established in "
                        + this.established + " at " + this.location + '<br>')
        }
    }
      
    let school1 = new schools("City School",
                            "Delhi", 1995);
    school1.displayinfo();
    let school2 = new schools("Delhi Public School ", "Kolkata", 1990);    
    school2.displayinfo();
    </script>
    </body>
    </html>                                                            

    chevron_right

    
    

    Output:

    City School was established in 1995 at Delhi
    Delhi Public School was established in 1990 at Kolkata
    

    Notice the usage of the “new” keyword before the function name. Using the “new” keyword in this manner before any function turns it into a constructor. What the “new schools()” actually does is :



    • It creates a new object and sets the constructor property of the object to schools (It is important to note that this property is a special default property that is not enumerable and cannot be changed by setting a “constructor: someFunction” property manually).
    • Then, it sets up the object to work with the schools function’s prototype object ( Each function in JavaScript gets a prototype object, which is initially just an empty object but can be modified.The object, when instantiated inherits all properties from its constructor’s prototype object).
    • Then calls schools() in the context of the new object, which means that when the “this” keyword is encountered in the constructor(schools()), it refers to the new object that was created in the first step.
    • Once this is finished, the newly created object is returned to school1 and school2(in the above example).

    Inside classes, there can be special methods named constructor().

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    class people {
        constructor()
        {
            this.name = "Adam";
        }
    }
      
    let person1 = new people();
      
    // Output : Adam    
    document.write(person1.name) 
    </script>
    </body>
    </html>    

    chevron_right

    
    

    Output:

    Adam 
    

    Having more than one function in a class with the name of constructor() results in an error.

  4. Prototypes : Another way to create objects involves using prototypes. Every JavaScript function has a prototype object property by default(it is empty by default). Methods or properties may be attached to this property. A detailed description of prototypes is beyond the scope of this introduction to objects.
    However you may familiarize yourself with the basic syntax used as below:

    let obj = Object.create(prototype_object, propertiesObject)
              // the second propertiesObject argument is optional
    

    An example of making use of the Object.create() method is:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    let footballers = {
        position : "Striker"
    }
      
    let footballer1
        = Object.create(footballers);
      
        // Output : Striker    
    document.write(footballer1.position)
                                                                           
    </script>
    </body>
    </html>    

    chevron_right

    
    

    Output:

    Striker 
    

    In the above example footballers served as a prototype for creating the object “footballer1”.

    All objects created in this way inherits all properties and methods from its prototype objects. Prototypes can have prototypes and those can have prototypes and so on. This is referred to as prototype chaining in JavaScript. This chain terminates with the Object.prototype which is the default prototype fallback for all objects. Javascript objects, by default inherit properties and methods from Object.prototype but these may easily be overridden. It is also interesting to note that the default prototype is not always Object.prototype.For example Strings and Arrays have their own default prototypes – String.prototype and Array.prototype respectively.

Accessing Object Members

Object members(properties or methods) can be accessed using the :

  1. dot notation :
    (objectName.memberName)
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    let school = {
        name : "City School",
        location : "Delhi",
        established : 1995,
        20 : 1000,
        displayinfo : function() {
            document.write(this.name + " was established in "
    + this.established + " at " + this.location)
        }
      
    }
      
    // Output : City School
    document.write(school.name + '<br>'
      
    // Output: 1995    
    document.write(school.established)             
    </script>
    </body>
    </html>    

    chevron_right

    
    

    Output:



    City School
    1995 
    
  2. Bracket Notation :
     objectName["memberName"]
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
    <script>
    let school = {
        name : "City School",
        location : "Delhi",
        established : 1995,
        20 : 1000,
        displayinfo : function() {
            document.write(this.name + " was established in "
                     this.established + " at " + this.location)
        }
      
    }
      
    // Output : City School
    document.write(school['name'] + '<br>'
      
    // Output: 1000
    document.write(school['20'])                                         
    </script>
    </body>
    </html>

    chevron_right

    
    

    Output:

    City School
    1000
    

Unlike the dot notation, the bracket keyword works with any string combination, including, but not limited to multi word strings.
For example:

somePerson.first name // invalid
    somePerson["first name"] // valid

Unlike the dot notation, the bracket notation can also contain names which are results of any expressions variables whose values are computed at run-time.
For instance :

let key = "first name" somePerson[key] = "Name Surname"

Similar operations are not possible while using the dot notation.

Iterating over all keys of an object

To iterate over all existing enumerable keys of an object, we may use the for...in construct. It is worth noting that this allows us to access only those properties of an object which are enumerable (Recall that enumerable is one of the four attributes of data properties).
For instance, properties inherited from the Object.prototype are not enumerable. But, enumerable properties inherited from somewhere can also be accessed using the for...in construct
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
<script>
let person = {
    gender : "male"
}
  
var person1
    = Object.create(person);
person1.name = "Adam";
person1.age = 45;
person1.nationality = "Australian";
  
for (let key in person1) {
// Output : name, age, nationality 
// and gender
    document.write(key + '<br>'); 
}                    
</script>
</body>
</html>    

chevron_right


Output:

name
age
nationality
gender

Deleting Properties

To Delete a property of an object we can make use of the delete operator. An example of its usage has been listed below:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
<script>
let obj1 = {
    propfirst : "Name"
  
// Output : Name
document.write(obj1.propfirst + '<br>'
delete obj1.propfirst
  
// Output : undefined
document.write(obj1.propfirst) 
</script>
</body>
</html>            

chevron_right


Output:

Name
undefined 

It is important to note that we can not delete inherited properties or non configurable properties in this manner.
For example :

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
<script>
let obj1 = {
    propfirst : "Name"
// Output : Name
document.write(obj1.propfirst + '<br>'
  let obj2 = Object.create(obj1)
  
 // Output : Name
  document.write(obj2.propfirst + '<br>')
    
  // Output : true.
  document.write(delete obj2.propfirst + '<br>'
  
    // Surprisingly Note that this will return true
    // regardless of whether the deletion was successful
  
    // Output : Name    
    document.write(obj2.propfirst)                         
</script>
</body>
</html>                                        

chevron_right


Output:

Name
Name
true
Name


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.