Skip to main content
Engineering LibreTexts

5.3: Basic Objects in JavaScript

  • Page ID
    27561
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    When thinking about OOP, remember that at its core OOP is an abstraction mechanism that defines objects by a set of data and behaviors that act on that data. Everything else, like interfaces and classes, are implementation details and not part of the definition.

    JavaScript’s has a view of an object that stores properties (data) and functions (behaviors) in a hash data structure (which we will call a property map).

    Property maps consist of object properties are stored as pairs of property names and property values. Since new properties can be added or deleted from the map, the map is does not have a static definition (e.g. it has no class definition). A JavaScript object is just a set of properties and values.

    This section will cover how to create, manipulate, and access objects. It will first cover how objects are property maps. It will then show how JavaScript Object Notation (JSON) is a natural way to serialize and store objects externally to the current program.

    5.2.1 Simple Objects

    Objects in JavaScript are prototype-based property maps. This is the central point of JavaScript objects, and everything else is just syntax. The syntax for a simple object just lists the property/value pairs separated by a “:” within a block defined by curly braces ({}).

    {
        property1 : “string”;            // String value
        property2 : 7;                   // number
        behavior1 : function() { ... };  // function
    }    
    

    The following example shows the creation and printing of a map object in JavaScript.

    Program 83 - Implementation of a simple Map object.
    
    <html>
        <head>
            <title>Object Example </title>
        </head>
        
        <body>
            <script>
                Let map = {
                    title : "MyMap",
                    resize: false,
                    recenter: true,
                    print: function() {
                        console.log("title = " + this.title);
                        console.log("resize = " + this.resize);
                        console.log("recenter = " + this.recenter);
                    }
                }
                
                map.print();
            </script>
        </body>
    </html>                                                         
    

    In this example, a map object is created that has properties: a title which is a string; resize and recenter Boolean variables; and a print variable that is set to a lambda function.

    While this might look similar to a class definition, it would be wrong to think of this map object as an instance of a class. The map object that is defined is not a template, but an instance variable (a value in the program). Remember that an object in JavaScript has no structure or template definition (class). Another variable based on this map definition as a template cannot be created.

    Note also the map object can be changed by adding and deleting properties (including functions). Functions and data are associated with the values of the variable. This is shown in the following example, where the variable center is added to the map object after it has been created. When the new property is added, functions needed to be added or changed for the new property are also set.

    Program 84 - Adding a center point to the simple map object
    
    <html>
        <head>
            <title>Object Example </title>
        </head>
        
        <body>
            <script>
                let map = {
                    title : "MyMap",
                    resize: false,
                    recenter: true,
                    print: function() {
                        console.log("title = " + this.title);
                        console.log("resize = " + this.resize);
                        console.log("recenter = " + this.recenter);
                    }
                }
                
                // Add a center point to a map
                map.center = [-77, 39];
                
                // Change the print function to print the center point.
                map.print = function() {
                    console.log("title = " + this.title);
                    console.log("resize = " + this.resize);
                    console.log("recenter = " + this.recenter);
                    console.log("center = " + this.center);
                }
                
                // Add a new method to get the center of the map
                map.getCenter = function() {
                    return center;
                }
                
                map.print();
                console.log(map.center);
            </script>
        </body>
    </html>                                                  
    

    5.2.2 Objects are Property Maps

    The following example is given to emphasize the point that objects are property maps, an example is provided to show that in JavaScript dereferencing an object and looking up a property in a property map are the same thing. The following program shows this equivalence. Here the dereference operator object.propertyname is used interchangeably with array processing using the object[propertyname], which accesses the variable from the property map using a key.

    Note that it is code like this that is impossible to understand if the reader insists on using their understanding of statically typed OOP to understand JavaScript.

    Program 85 - Printing an object out as a hash
    
    <html>
        <head>
            <title>Object Example </title>
        </head>
    
        <body>
            <script>
                let map = {
                    title : "MyMap",
                    resize: false,
                    recenter: true,
                    print: function() {
                        console.log("title = " + this.title);
                        console.log("resize = " + this.resize);
                        console.log("recenter = " + this.recenter);
                    }
                }
                
                // Add a center point to a map
                map.center = [-77, 39];
                
                // Print the variable via a dereference operator
                console.log(map.title);
                console.log(map.resize);
                console.log(map.recenter);
                console.log(map.center);
                
                for (let i in map) {
                    console.log("property " + i + " is " + map[i]);
                }
            </script>
        </body>
    </html>                                                
    

    5.2.3 JavaScript Object Notation (JSON)

    Serialization of an object is just transforming an object into a format that allows it to be represented in a format external to the program. In JavaScript this external format is a collection of named primitives (or variable: value pairs), stored in such a way as it looks like a JavaScript Object definition. This serialized format can then be used to reconstruct a semantically equivalent object spatially (to be used in another program, for example by sending the object over the network) or temporally (at a different time, for example by saving the object to a file).

    JSON is the most common notation for serializing JavaScript objects to be used externally from the JavaScript program. Over time JSON has gain in popularity and is now also a popular format for serializing objects in languages other than JavaScript.

    JSON syntax is very similar to how an object is defined in JavaScript. In fact, Douglas Crockford, who discovered JSON in 2001, wrote:

    I discovered JSON. I do not claim to have invented JSON, because it already existed in nature. What I did was I found it, I named it, I described how it was useful.

    To serialize a JavaScript object in JSON, objects that contain only variables that are primitives will have syntax with named variables and their primitive values. These objects will look very similar to the objects that have been presented in this text so far. There will be two differences: 1- The property names will be in quotes, and 2 – All functions will be removed from the objects. As an example, the map object that was seen earlier:

    Program 86 - Map object to be written to JSON format
    
    var map = {
        title : "MyMap",
        resize: false,
        recenter: true,
        print: function() {
            console.log("title = " + this.title);
            console.log("resize = " + this.resize);
            console.log("recenter = " + this.recenter);
        }
    )             
    

    Will be represented in JSON format as:

    Program 87 - JSON output of Map object
    
    {
        "title":"MyMap",
        "resize":false,
        "recenter":true
    } 
    

    JSON formatted objects are easily created using the JSON.stringfy function. The JSON formatted strings can then be used to reconstruct a semantically equivalent object using the JSON.parse function. The JSON object above was created and written to the console log using the following program, and then reconstructed as an example of using JSON.

    Program 88 - Program to stringify and parse a JSON object
    
    <html>
        <head>
            <title>Object Example </title>
        </head>
        
        <body>
            <script>
                let map = {
                    title : "MyMap",
                    resize: false,
                    recenter: true,
                    print: function() {
                        console.log("title = " + this.title);
                        console.log("resize = " + this.resize);
                        console.log("recenter = " + this.recenter);
                    }
                }
                
                console.log(JSON.stringify(map));
            </script>
        </body>
    </html>                                                
    

    5.2.4 JSON Serialization and Object Composition

    The example given above illustrates a fundamental problem with serialization of objects, and that is that most objects are not collections of primitives but can contain other objects. In fact, it is more common for objects to contain other objects or arrays than to contain only primitive values. Object containing other objects is called object composition34, implies that each object contained in the object graph must be serialized recursively until only primitives exist. The need to serialize all objects until only primitive values are referenced are not unique to JSON and exist in all object serialization mechanisms.

    The simplest case of serializing object composition is a tree graph structure35, To do serialization of an object graph represented by a tree, each node is walked recursively. If the node has primitives, output them to the JSON file. If the node references another object or array, create a new object or array, and continue to recursively process the nodes.

    To illustrate serialization of complex composed objects, consider the following example object tree.

    Figure 15 - Composite object to be written to JSON

    Screen Shot 2020-07-04 at 2.31.45 PM.png

    This program contains an array, named Arr, that consists of two objects, a and b. The first object, a, is composed of a variable title, which is the primate string “Object A”, and a variable func that is a function. Object a also contains two objects, c and d. Object c consists of a primate variable, count, set to the number 7, and object d contains a primitive variable, name, set to the string “Someone”. Object b is composed of a variable “myType”, which contains the string “B”. This would be written in JavaScript as the following:

    Program 89 - Complex object to be serialized to JSON
    
    <html>
        <head>
            <title>Serialize </title>
        </head>
        
        <body>
            <script>
                let c = {
                    count : 7,
                }
                
                let d = {
                    name : "Someone"
                }
                
                let a = {
                    title : "Object A",
                    ptr1 : c,
                    ptr2 : d,
                    func : function() {
                        letcnt = 7;
                    }
                }
                
                let b = {
                    myType: "B"
                }
                
                let Arr = [a,b];
                console.log(JSON.stringify(Arr));
            </script>
        </body>
    </html>                                                                                    
    

    To serialize an object composed of other objects, each internal object node must be serialized, and that process is repeated until only primitive elements exist. The following is the serialized version of this object, showing how the individual objects are decomposed until the entire object can be represented only as primitives. The tree graph of the object can clearly be seen in this representation of the object.

    Program 90 - JSON serialization of a complex object.
    
    [
        {    
            "title":"Object A",
            "ptr1":
            {
                "count":7
            },
            "ptr2":
            {
                "name":"Someone"
            }
        },
        {
            "myType":"B"
        }
    ]                            
    

    This JSON definition is sufficient to reconstruct the original array. There are a few points that should be noted here:

    1. The variable names (a, b, c, and d) are dropped. Variables are program entities, and not part of the data that make up the object definition. These variables are not needed to rebuild the original object.
    2. Arrays and objects must both be serialized, as both are not primitive values. Objects are serialized by enumerating their properties. Arrays are serialized using the JavaScript array syntax, with the array bounded by [], and each member of the array being comma separated.
    3. Serialization can result in cycles within the object definitions. These can be quite complex, and will be avoided in this book.
    4. As was pointed out earlier, functions are never serialized in JSON format. Unlike method definitions in Java/C#, there is no technical reason that a lambda function (which is data) could not be stored externally. The reason functions are not serialized is that it is inherently unsafe to store program code in an external format since the code could easily be changed, and the program could be made unsafe.

    This page titled 5.3: Basic Objects in JavaScript is shared under a CC BY license and was authored, remixed, and/or curated by Charles W. Kann III.

    • Was this article helpful?