Often new programmers get confused between JSON and JavaScript Object Literals. As JSON and Object Literals have the almost same syntax, they look the same, but they are not. In this article, you will get to know everything about JSON vs JavaScript Object Literal.

What is JSON?

JSON i.e. JavaScript Object Notation is nothing but a language independent data format that is used for storing and transferring the data, most often between a server and a web page. JSON is light, simple, and supported by every programming language. It has become the most popular data exchange language format used to transfer messages these days.

It can be visualized like a hashmap or hashtable, where you represent data in key-value pairs. A common JSON response looks something like this:

{ "key": "value" }

The structure of a JSON file consists of:

• A collection of key-value pairs.
• An ordered list of such collections.

Data Types supported in JSON files:

{
  "Person_1": {
    "Name": "Peter", // String
    "Age": 39, // Number
    "Hobbies": [  
      "Reading",
      "Gardening",
      "Painting"
    ], // Array
    "Adult": true // Boolean
  },
  "Person_2": {
    "Name": "Jack",
    "Age": 16,
    "Hobbies": null, // Null
    "Adult": false
  }
}

What is JavaScript Object Literal?

JavaScript Objects are also key-value pairs where the key would be a string and the value could be anything like an object or even a function. They can be more complex as there can be a combination of primitive data types also.

var person = {
    Name: "Peter",
    Age: function() {
        return 39;
    },
 // function
    Adult: true
}

JavaScript Objects are mutable i.e. you can change the value for a respective key.

var data = person;
person.Name = "Samual" 
console.log(person.Name) // Output: Samual

In JavaScript objects, you can access their information in two ways:

• Bracket Notation

//Bracket Notation
var book = {
    Name: "The First Ever Book",
    auther: "David"
}
console.log(book["Name"]); // Output: The First Ever Book

• Dot Notation

//Dot Notation
var book = {
    bookName: "The First Ever Book",
    autherName: "David"
}
console.log(book.Name); // Output: The First Ever Book

Differences between JSON and JavaScript Object Literals

Before understanding the difference between the two, this needs to be clarified that JSON format is derived from the JavaScript object literal syntax but with some more restrictions in it. So, JSON and JavaScript Object Literals have many things in common. Both provide a way to structure data, both are human readable and both can be used as the source for another source.

Object Literals is a way to create JavaScript Objects. For example

var book = {
    bookName: "The First Ever Book",
    autherName: "David"
}

This syntax of object literals is valid only for JavaScript, on the other hand, the syntax of JSON is language independent. JSON is a string whereas JavaScript Object Literals are objects. JSON and JavaScript object literal are two different ways to represent data. JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

JSON's syntax is almost same as JavaScript Object Literal. For example

{
   "bookName":"The First Ever Book",
   "autherName":"David"
}

Firstly, you can see information is not saved into any object or variable, this information can be used through any programming language. Secondly, in JSON you must use double quotes in a Key i.e. in object property also. In JavaScript, you can use single quotes in place of double quotes, but it is not valid in JSON. The thing to notice is that an object created using JSON format will be treated by JavaScript Engine as like it would have created using object literal. 

In case of JavaScript objects, you can access their information in two ways as explained earlier in this article.

Moreover, JavaScript has in-built methods to do conversation between JSON data and Object Literal and you can use a JavaScript program to convert JSON data into JavaScript Objects and vice versa.

Convert JSON into JavaScript Object Literal

You can convert a JSON data into a JavaScript object with the help of JSON.parse(). Suppose you have data in JSON format in a variable named data, you must pass it as an argument in the above-mentioned function like this.

JSON.parse(data)

Convert JavaScript Object Literal into JSON

To convert a JavaScript Object into JSON, you can use JSON.stringify() method for this. Just to clarify if you have a JavaScript object named obj, you can pass it in the function like this.

JSON.strigify(obj)

JSON is a text format for storing and exchanging data. It is derived from JavaScript object literal syntax. There are libraries available in most programming languages for processing JSON data.

JSON is a fantastic way to transfer data between web applications. Data is typically transferred as JSON and then used to generate a JavaScript Object.

If you are still confused between JSON Vs JavaScript Object Literal, feel free to comment below, I would love to clear your doubts.