JavaScript Object vs JSON

Hey ya’ll!

Today I would be dismantling and demystifying JavaScript Object vs JSON (not so strong though, lol).

Before checking up this article, I am assuming you are already familiar with some basics of how the web works — in terms of building online projects with say HTML. You should also be familiar with JavaScript basics.

JavaScript and JSON sometimes can be really confusing for someone and that’s why I am writing this so it answers all your possible questions.

JSON stands for JavaScript Object Notation. It is basically a text format that makes it easy to share data between devices such as Clients and Servers. Its Origin is based on how JavaScript object works so in that sense, it is related/close to but not completely JavaScript Object. Regardless of the fact that it has its origin from JavaScript, it is widely used across many Languages like C, Ruby, Python, PHP just to mention a few. Because of the size and easiness to convert to a data structure, it is kind of a great alternative to other formats like XML.

A very good advantage of using JSON is how easy it can be to read.

Consider the snippet above. I have created a JSON object with a few key-value pairs. The keys are on the left-hand side (name, language and hobbies) while the values of the keys are on the right-hand side. This can easily be understood as an Object by JavaScript and to anyone reading it.

Another good advantage of JSON is the ability to pass the value or data into a JavaScript object. This can simply be done using a JavaScript command as shown below.

With that single line command, you can access anything from the object data. So, say you were to get the name value, all you would do is simply type:

userInfo.name; // Using the dot notation.

userInfo[“name”] // Using the bracket notation

Another good advantage is that it is leaner than XML. When you try to run the same command or script using XML, you would observe that passing an XML can be time consuming whereas with JSON, it is much faster.

Let’s take a look at how JSON strings are written.

Take a very good look at the keys. You would observe that they are written in quotes. The keys can also be any valid string. The JSON values can only be one of the six datatypes (strings, numbers, objects, arrays, Boolean, null). JavaScript values on the other hand can be any valid JavaScript Structure.

In the snippet above, you would notice that the keys are not wrapped in quotes. This is a typical example of a JavaScript Object. JavaScript Object values can be any datatype including a function (which you CANNOT do with JSON. Take a look at the snippet below showing a valid JavaScript Object.

Unlike JavaScript Object, a JSON Object has to be fed into a variable as a String and then parsed into JavaScript. A framework like jQuery can be very helpful when doing parsing.

There are quite some tools you can use to validate your JSON code and some of them are listed below:

· JSONLite

· JSON Editor Online

· Cocoa JSON Editor (MAC)

· JSONPad

· JSON view for Mozilla and Chrome etc.

Watch this space for more on Working with JavaScript Objects and JSON.

Hit that little heart so others can see this too!