Hello and welcome again.
Today I would be talking about JavaScript Object vs JSON.
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.
https://thepracticaldev.s3.amazonaws.com/i/4maihr1kpvv86c9ys6cc.jpg
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.
https://thepracticaldev.s3.amazonaws.com/i/4auer2ao0s2n4xctiikh.jpg
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.
https://thepracticaldev.s3.amazonaws.com/i/p09vp0pz1r2x9teo9t6d.jpg
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.
https://thepracticaldev.s3.amazonaws.com/i/u245wunnwrhecozexd0t.jpg
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.
https://thepracticaldev.s3.amazonaws.com/i/9cp24lyb34nmoqyl4yuu.jpg
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.
https://thepracticaldev.s3.amazonaws.com/i/80qhkpbkrowz5pov46ij.jpg
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.
Stay tuned for more on Working with JavaScript Objects and JSON.
Thanks.
Top comments (0)