Question

I want to understand the basic differences clearly between JavaScript object and JSON string.

Let’s say I create the following JavaScript variable:

var testObject = {one: 1,"two":2,"three":3};

Question 1. Is the key/property name valid both with/without quotes? (e.g., "one" : 1)

If yes, what is the difference?

Question 2: If I convert the above object using JSON.stringify(testObject), what’s the difference between the original JavaScript object and the JSON?

I feel they are almost the same. Please elaborate on this.

Question 3: For parsing a JSON string, is the method below recommended?

var javascriptObj = JSON.parse(jSonString);

Answer 1

1. Is the key/property name valid both with/without quotes?

The only time you need to enclose a key in quotes when using Object Literal notation is where the key is a reserved word or contains a special character (if, :, -, etc.). It is worth noting that a key in JSON must be enclosed in double quotes.

2. If I convert the above object to JSON using var jSonString = JSON.stringify(testObject);, what is the difference between the two (JavaScript obj and JSON)?

JSON is a data interchange format. It’s a standard which describes how ordered lists and unordered maps, strings, booleans and numbers can be represented in a string. Just like XML and YAML is a way to pass structured information between languages, JSON is the same. A JavaScript object on the other hand is a physical type. Just like a PHP array, a C++ class/ struct, a JavaScript object is a type internal to JavaScript.

Here’s a story. Let’s imagine you’ve purchased some furniture from a store, and you want it delivered. However the only one left in stock is the display model, but you agree to buy it.

In the shop, the chest-of-drawers you’ve purchased is a living object:

    var chestOfDrawers = {
        color: "red",
        numberOfDrawers: 4
    }

However, you can’t send a chest-of-drawers in the post, so you dismantle it (read, stringify it). It’s now useless in terms of furniture. It is now JSON. It’s in flat pack form.

    {"color":"red","numberOfDrawers":4}

When you receive it, you then rebuild the chest-of-drawers (read, parse it). It’s now back in object form.

The reason behind JSON, XML and YAML is to enable data to be transferred between programming languages in a format both participating languages can understand; you can’t give PHP or C++ your JavaScript object directly; because each language represents an object differently under-the-hood. However, because we’ve stringified the object into JSON notation; i.e., a standardised way to represent data, we can transmit the JSON representation of the object to another language (C++, PHP), they can recreate the JavaScript object we had into their own object based on the JSON representation of the object.

It is important to note that JSON cannot represent functions or dates. If you attempt to stringify an object with a function member, the function will be omitted from the JSON representation. A date will be converted to a string;

    JSON.stringify({
        foo: new Date(),
        blah: function () {
            alert('hello');
        }
    }); // Returns the string "{"foo":"2011-11-28T10:21:33.939Z"}"

3. For parsing a JSON string, is the method below recommended? var javascriptObj = JSON.parse(jSonString);

Yes, but older browsers don’t support JSON natively (before Internet Explorer 8). To support these, you should include json2.js.

If you’re using jQuery, you can call jQuery.parseJSON(), which will use JSON.parse() under the hood if it’s supported and will otherwise fallback to a custom implementation to parse the input.