Post
Ask Question

Manipulate JavaScript Object Like Dictionary

Introduction

 
Welcome to the “Advanced JavaScript” article series. As the name suggests, we are talking about a few object-oriented features of JavaScript. We have covered many more important topics; you can read them by visiting the following links.
You may find another article in this series that is exculsively written about objects in the JavaScript language and later I learnd that a few more important features need to be explained in the same context. This is the reason for writing another article that shows a few more interesting facts of JavaScript objects. Earlier articles have explained objects in JavaScript so there is no need to repeat that explanation. We will reach our target topic directly. How to use JavaScript objects like a Dictionary in C#. (Is there a Dictionary concept in any other language? I don’t know.) That’s fine so let’s implement our first example. 
 
Oh, do you want a small explanation? Ok, a JavaScript Object is very similar to a Dictionary<string,Object> in the sense that we can associate any arbitrary piece of data (any object) to any arbitrary string. If you are familiar with JSON notation then you know how to access objects using the dot (.) operator but the beauty of a JavaScript object is that we can access a property like a dictionary using the [] operator. Here is a sample representation of our explanation.
 
JavaScript Objects are Dictionaries
 
Please don’t consider jQuery functions (document.ready) in this example, we have done it to make life easy. (Ha..Ha..) We have declared a “name” object in this example and initialized a property of the name object using the [] operator. The [] operator is taking one string as the key and the value as data.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs"  
  2. Inherits="JavaScript.JavaScript" %>  
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <script type="text/javascript" src="Jquery.js"></script>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.        <script>  
  11.            $(document).ready(function () {  
  12.                var name = new Object();  
  13.                name["firstName"] = "Sourav";  
  14.                name["lastName"] = "Kayal";  
  15.                console.log(name["firstName"] + name["lastName"]);  
  16.            });  
  17.   
  18.         </script>  
  19.     </form>  
  20. </body>  
  21. </html>  
And please note that we are accessing the properties of the name object in the same way, using the [] operator. Is it not like Dictionary access in C# ? Here is the output of this example.
 
JavaScript Object are Dictionaries
 
Is it possible to update a Dictionary (read object) after creation?
 
Yes, it’s possible to update an object after creation. In this example, we will update the same object that we created in our previous example. Have a look at the following code.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs"  
  2. Inherits="JavaScript.JavaScript" %>  
  3. <head runat="server">  
  4.     <script type="text/javascript" src="Jquery.js"></script>  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8.        <script>  
  9.            $(document).ready(function () {  
  10.                var name = new Object();  
  11.                name["firstName"] = "Sourav";  
  12.                name["lastName"] = "Kayal";  
  13.                name["showName"] = function () {  
  14.                console.log(name["firstName"] + name["lastName"]);  
  15.                };  
  16.   
  17.                //Update name here  
  18.                name["firstName"] = "Manish";  
  19.                name["lastName"] = "Khanra";  
  20.                name.showName();  
  21.                 
  22.            });  
  23.   
  24.         </script>  
  25.     </form>  
  26. </body>  
  27. </html>  
Here are the output and we see that the value has been updated with a new value that we set after object creation.
 
 
Is it possible to set an anonymous function to an object property?
 
You might think, what is this silly question? By using the dot (.) operator we can set an anonymous method in an object’s property so why not in this way? Yes, it’s just similar to the dot (.) operator to attach an anonymous function to a property. In this case, instead of the dot (.), we will use the [] operator. Here is a sample implementation.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs"  
  2. Inherits="JavaScript.JavaScript" %>  
  3. <head runat="server">  
  4.     <script type="text/javascript" src="backbone/Jquery.js"></script>  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8.        <script>  
  9.            $(document).ready(function () {  
  10.                var name = new Object();  
  11.                name["firstName"] = "Sourav";  
  12.                name["lastName"] = "Kayal";  
  13.                name["showName"] = function () {  
  14.                    console.log('Name is :-'+ name["firstName"] + name["lastName"]);  
  15.                };  
  16.              name.showName();  
  17.            });  
  18.   
  19.         </script>  
  20.   
  21.     </form>  
  22. </body>  
  23. </html>  
This is the output.
 
 
Add an  object property after the definition
 
It’s also possible to add an object property after definition. The reason is JavaScript is a class-less programming language, in other words, there is no proper template of object creation. (Whereas it is strongly present in C# and Java and other languages). So where there is no proper template of an object, why is it necessary to create a property on the fly? Here is some code for you.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs"  
  2. Inherits="JavaScript.JavaScript" %>  
  3. <head runat="server">  
  4.     <script type="text/javascript" src="backbone/Jquery.js"></script>  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8.        <script>  
  9.            $(document).ready(function () {  
  10.                var name = new Object  
  11.                {  
  12.                    name["firstName"] = "Sourav";  
  13.                    name["lastName"] = "Kayal";  
  14.                    name["showName"] = function () {  
  15.                        console.log(name["firstName"] + '  '+ name["miffleName"] + ' ' + name["lastName"]);  
  16.                    };  
  17.                }  
  18.   
  19.                //Update name here  
  20.                name["miffleName"] = "Kumar";  
  21.                name.showName();  
  22.                 
  23.            });  
  24.   
  25.         </script>  
  26.     </form>  
  27. </body>  
  28. </html>  
In this example, the middle name is a property that has been appended after object creation and it’s working fine.
 
 
 

Conclusion

 
I consider myself a very beginner in JavaScript (and also in other languages) and learning day to day. When I saw those new features I could not stop myself from writing about it for others. I promise, if I see anything wonderful like this, I will write about it for you. Bye..Happy day.


Similar Articles