Can someone tell me what is the main difference between a JavaScript object defined by using "Object Literal Notation" and JSON object?

According to a JavaScript book it says this is an object defined by using Object Notation:

var anObject = {
    property1 : true,
    showMessage : function (msg) { alert(msg) }
};

Why isn't it a JSON object in this case? Just because it is not defined by using quotation marks?

14 upvote
  flag
"Why it is not a JSON object in this case?": Because your keys must be strings, and a function is not a valid JSON value. – Matt
3 upvote
  flag
4 upvote
  flag
@LightnessRacesinOrbit wondering why you marked a 4 year old question as a duplicate of 3 year old question. It should be the other way around, right..? – T J
upvote
  flag
@TilwinJoy: No, not necessarily. The age of each post is pretty much irrelevant. Anyway, they're both four years old. – Lightness Races in Orbit
2 upvote
  flag
@LightnessRacesinOrbit actually this one says "asked 4 years ago," and the other one 3 years ago. Why i asked is because i got 4 results when i googled, so i thought of marking the new ones as duplicate of oldest then found that you had marked the oldest as dup. Never mind :) – T J
upvote
  flag
@TilwinJoy I get the full dates written out: May 2010 and October 2010, respectively. Are you on mobile? – Lightness Races in Orbit
1 upvote
  flag
@LightnessRacesinOrbit You're looking below the question, i'm looking at the stats in sidebar :) – T J
upvote
  flag
@TilwinJoy: Hah - never even spotted that was there (consciously) :D Okay then – Lightness Races in Orbit

7 Answers 11

up vote 207 down vote accepted

Lets clarify first what JSON actually is. JSON is a textual, language-indepedent data-exchange format, much like XML, CSV or YAML.

Data can be stored in many ways, but if it should be stored in a text file and be readable by a computer, it needs to follow some structure. JSON is one of the many formats that define such a structure.

Such formats are typically language-independent, meaning they can be processed by Java, Python, JavaScript, PHP, you name it.

In contrast, JavaScript is a programming language. Of course JavaScript also provides a way to define/describe data, but the syntax is very specific to JavaScript.

As a counter example, Python has the concept of tuples, their syntax is (x, y). JavaScript doesn't have something like this.


Lets look at the syntactical differences between JSON and JavaScript object literals.

JSON has the following syntactical constraints:

  • Object keys must be strings (i.e. a character sequence enclosed in double quotes ").
  • The values can be either:
    • a string
    • a number
    • an (JSON) object
    • an array
    • true
    • false
    • null
  • Duplicate keys ({"foo":"bar","foo":"baz"}) produce undefined, implementation-specific results; the JSON specification specifically does not define their semantics

In JavaScript, object literals can have

  • String literals, number literals or identifier names as keys (since ES6, keys can now also be computed, which introduces yet another syntax).
  • The values can be any valid JavaScript expression, including function definitions and undefined.
  • Duplicate keys produce defined, specified results (in loose mode, the latter definition replaces the former; in strict mode, it's an error).

Knowing that, just be looking at the syntax, your example is not JSON because of two reasons:

  1. Your keys are not strings (literals). They are identifier names.
  2. You cannot assign a function as a value to a "JSON object" (because JSON doesn't define any syntax for functions).

But most importantly, to repeat my explanation from the beginning: You are in a JavaScript context. You define a JavaScript object. If any, a "JSON object" can only be contained in a string:

 var obj = {foo: 42}; // creates a JavaScript object
 var json = '{"foo": 452}'; // creates a string containing JSON

That is, if you're writing JavaScript source code, and not dealing with a string, you're not dealing with JSON. Maybe you received the data as JSON (e.g., via ajax or reading from a file), but once you or a library you're using has parsed it, it's not JSON anymore.


Only because object literals and JSON look similar, it does not mean that you can name them interchangeably. See also There's no such thing as a "JSON Object".

7 upvote
  flag
Also note that JSON is a subset of Object Literal Notation – Sean Kinsey
11 upvote
  flag
@SeanKinsey: Except that it isn't: timelessrepo.com/json-isnt-a-javascript-subset – mpen
1 upvote
  flag
Might be worth noting that typically you'd expect a JavaScript object literal in a context where comments are legal, and the JSON spec doesn't allow for comments (see this post. – Brian Henry
upvote
  flag
keys in object literal are always strings, despite you use "" or not. – overexchange
1 upvote
  flag
@overexchange: "keys in object literal are always strings" You are mixing two things here, but I can't blame you because I also didn't draw a clear line here. You have to distinguish between an object literal and an object value. A literal is the character sequence you write in the source code. The value is what's created by interpreting the source code. The object literal (syntax) allows you do use identifier names, string literals or number literals. You are correct that at runtime, those are all converted to strings (but we have symbols now as well). – Felix Kling
1 upvote
  flag
Don't know why I haven't seen this answer before. Excellent. – T.J. Crowder

JSON has a much more limited syntax including:

  • Key values must be quoted
  • Strings must be quoted with " and not '
  • You have a more limited range of values (e.g. no functions allowed)
1 upvote
  flag
Liked this "no function Allowed". – Karan Kaw
upvote
  flag
Comments are not allowed either. For questionable reasons. (Heard them questioned few times.) This is the main difference i"d say. – user7610

As far as I understand the main difference is the flexibility.

JSON is a kind of wrapper on "JavaScript Object Notation" which forces users to obey more strict rules for defining the objects. And it does this by limiting the possible object declaration ways provided by JavaScript Object Notation feature.

As a result we have a simpler and more standardized objects which suits better on data-exchange between platforms.

So basically, the newObject in my example above is an object defined by using JavaScript Objeect Notation; but it is not a 'valid' JSON object because it does not follow the rules that JSON standards require.

This link is also quite helpful: http://msdn.microsoft.com/en-us/library/bb299886.aspx

1 upvote
  flag
The purpouse of JSON and object notation is completely different: the first is used only for data interchanging and the second is for creating JS objects for internal use only. They are not more and less strict versions of the same thing. – ilyo

According to JSON in JavaScript,

JSON is a subset of the object literal notation of JavaScript.

In other words, valid JSON is also valid JavaScript object literal notation but not necessarily the other way around.

In addition to reading the documentation, as @Filix King suggested, I also suggest playing around with the JSONLint online JSON validator. That's how I learned that the keys of JSON objects must be strings.

2 upvote
  flag
Just to notice: It is not an exact subset, there are some JSON strings that were invalid as JS object literals – Bergi

There is really no such thing as a "JSON Object".

The JSON spec is a syntax for encoding data as a string. What people call a "JSON Object" ( in javascript ) is really just an ordinary javascript object that has (probably) been de-serialized from a valid JSON string, and can be easily re-serialized as a valid JSON string. This generally means that it contains only data ( and not functions ). It also means that there are no dates, because JSON does not have a date type ( probably the most painful thing about JSON ;)

Furthermore, (side-rant...) when people talk about a "JSON Object", they almost always mean data that has the "curly-braces" at the top-level. This corresponds nicely to a javascript object. However, the JSON spec does not require that there be a single "curly-braces" object at the top-level of a JSON string. It is perfectly valid JSON to have a list at the top-level, or even to have just a single value. So, while every "JSON Object" corresponds to valid JSON, not all valid JSON strings correspond to what we would call a "JSON Object"! ( because the string could represent a list or an atomic value )

5 upvote
  flag
There is an error in your answer: it is invalid JSON to have an atomic value at the top level. JSON allows the top to be either an object or an array, but nothing else. RFC4627, the standard, describes JSON’s grammar as JSON-text = object / array. – Rory O'Kane

For the ones who still think that RFC are more important than blogs and opinion based misconceptions, let's try to answer clarifying some points. I'm not going to repeat all the correct differences already mentioned in previous answers, here I'm just trying adding value summarizing some crucial part rfc7159

Extracts from https://tools.ietf.org/html/rfc7159

  1. JavaScript Object Notation (JSON) is a text format for the serialization of structured data. It is derived from the object literals of JavaScript, as defined in the ECMAScript Programming Language Standard, Third Edition [ECMA-262].
  2. JSON can represent four primitive types (strings, numbers, booleans, and null) and two structured types (objects and arrays).
  3. An object is an unordered collection of zero or more name/value pairs, where a name is a string and a value is a string, number, boolean, null, object, or array.
  4. begin-object = ws %x7B ws ; { left curly bracket
  5. end-object = ws %x7D ws ; } right curly bracket
  6. A JSON value MUST be an object, array, number, or string, or one of the following three literal names: false null true
  7. An object structure is represented as a pair of curly brackets
  8. The names within an object SHOULD be unique. object = begin-object [ member *( value-separator member ) ] end-object
  9. An object whose names are all unique is interoperable in the sense that all software implementations receiving that object will agree on the name-value mappings. When the names within an object are not unique, the behavior of software that receives such an object is unpredictable.
  10. Examples (from page 12 of RFC)

    This is a JSON object:

          {
            "Image": {
                "Width":  800,
                "Height": 600,
                "Title":  "View from 15th Floor",
                "Thumbnail": {
                    "Url":    "http://www.example.com/image/481989943",
                    "Height": 125,
                    "Width":  100
                },
                "Animated" : false,
                "IDs": [116, 943, 234, 38793]
              }
          }
    

    Its Image member is an object whose Thumbnail member is an object and whose IDs member is an array of numbers.

There is really no such thing as a "JSON Object".

Really?

upvote
  flag
Davi, it's not a Object, it's a String. Thanks – abu abu

🔫 JSON: The Fat-Free Alternative to XML

JSON has been widely adopted by people who found that it made it a lot easier to produce distributed applications and services. The official Internet media type for JSON is application/json RFC 4627. JSON filenames use the extension .json.


► JavaScript Object Notation (JSON) is a lightweight, text-based, language-independent data interchange format. JSON has been used to exchange data between applications written in any Programming language.

The JSON object is a single object that contains two functions, parse and stringify, that are used to parse and construct JSON texts.

  • JSON.stringify produces a String that conforms to the following JSON grammar.
  • JSON.parse accepts a String that conforms to the JSON grammar.

The parseJSON method will be included in the Fourth Edition of ECMAScript. In the meantime, a JavaScript implementation is available at json.org.

var objLiteral = {foo: 42}; // JavaScript Object
console.log('Object Literal : ', objLiteral ); // Object {foo: 42}foo: 42__proto__: Object

// This is a JSON String, like what you'd get back from an AJAX request.
var jsonString = '{"foo": 452}';
console.log('JOSN String : ', jsonString ); // {"foo": 452}

// This is how you deserialize that JSON String into an Object.
var serverResposnceObject = JSON.parse( jsonString );
console.log('Converting Ajax response to JavaScript Object : ', serverResposnceObject); // Object {foo: 42}foo: 42 __proto__: Object

// And this is how you serialize an Object into a JSON String.
var serverRequestJSON = JSON.stringify( objLiteral );
console.log('Reqesting server with JSON Data : ', serverRequestJSON); // '{"foo": 452}'

JSON is subset of JavaScript. Javascript was derived from the ECMAScript Programming Language Standard.


► ECMAScript

ECMAScript has grown to be one of the world's most widely used general purpose programming languages. It is best known as the language embedded in web browsers but has also been widely adopted for server and embedded applications. ECMAScript is based on several originating technologies, the most well-known being JavaScript (Netscape Communications)) and JScript (Microsoft Corporation).). Though before 1994, ECMA was known as "European Computer Manufacturers Association", after 1994, when the organization became global, the "trademark" "Ecma" was kept for historical reasons.

ECMAScript is the language, whereas JavaScript, JScript, and even ActionScript are called "Dialects".

Dialects have been derived from the same language. They are are quite similar to each other as they have been derived from the same language but they have undergone some changes. A dialect is a variation in the language itself. It is derived from a single language.

  • SQL Language - Hibernate MySQL Dialect, Oracle Dialect,.. which have some changes or added functionality.

Information about the browser and computer of your users.

navigator.appName // "Netscape"

ECMAScript is the scripting language that forms the basis of JavaScript. JavaScript language resources.

ECMA-262 Links
Initial Edition, June 1997 PDF.
2nd Edition, August 1998 PDF.
3rd Edition, December 1999 PDF.
5th Edition, December 2009 PDF.
5.1 Edition, June 2011 HTML.
6th Edition, June 2015 HTML.
7ᵗʰ Edition, June 2016 HTML.
8th edition, June 2017 HTML.
9th Edition, 2018 HTML.

NOTE « 4th edition of ECMAScript not published as the work was incomplete.


JSON defines a small set of formatting rules for the portable representation of structured data.

  1. ► Key values must be quoted, only Strings are allowed for keys. If you use other than String it will convert to String. But not recommended to use keys other than String's. Check an example like this - { 'key':'val' } over RFC 4627 - jsonformatter

    var storage = {
      0 : null,
      1 : "Hello"
    };
    console.log( storage[1] ); // Hello
    console.log( JSON.stringify( storage ) ); // {"0":null,"1":"Hello","2":"world!"}
    
    var objLiteral = {'key1':'val1'};
        var arr = [10, 20], arr2 = [ 'Yash', 'Sam' ];
        var obj = { k: 'v' }, obj2 = { k2: 'v2' };
        var fun = function keyFun() {} ;
    
    objLiteral[ arr ] = 'ArrayVal';     objLiteral[ arr2 ] = 'OverridenArrayVal';
    objLiteral[ obj ] = 'ObjectVal';    objLiteral[ obj2 ] = 'OverridenObjectVal';
    objLiteral[ fun ] = 'FunctionVal';
    
    console.log( objLiteral );
    // Object {key1: "val1", 10,20: "ArrayVal", Yash,Sam: "OverridenArrayVal", [object Object]: "OverridenObjectVal", function keyFun() {}: "FunctionVal"}
    console.log( JSON.stringify( objLiteral ) );
    // {"key1":"val1","10,20":"ArrayVal","Yash,Sam":"OverridenArrayVal","[object Object]":"OverridenObjectVal","function keyFun() {}":"FunctionVal"}
    console.log( JSON.parse( JSON.stringify( objLiteral ) ) );
    // Object {key1: "val1", 10,20: "ArrayVal", Yash,Sam: "OverridenArrayVal", [object Object]: "OverridenObjectVal", function keyFun() {}: "FunctionVal"}
    
    console.log('Accessing Array  Val : ', objLiteral[ [10,20] ] );
    console.log('Accessing Object Val : ', objLiteral[ '[object Object]' ] );
    console.log('Accessing Function Val : ', objLiteral[ 'function keyFun() {}' ] );
    
  2. ► JSON Strings must be quoted with " and not '. A string is very much like a C or Java string. Strings should be wrapped in double quotes.

    • Literals are fixed values, not variables, that you literally provide in your script.
    • A string is a sequence of zero or more characters wrapped in quotes with backslash escapement, the same notation used in most programming languages.
      • 🔫 - Special Symbols are allowed in String but not recomended to use.
      • \" - Special characters can be escaped. But not recomended to escape (') Single Quotes. In Strict mode it will throw and Error - SyntaxError: Unexpected token ' in JSON

    Check with this code { "Hai\" \n Team 🔫":5, "Bye \'": 7 } over online JSON Edtions. ModesnotStrict,Strinct.

    var jsonString = "{'foo': 452}"; // {'foo': 452}
    var jsonStr = '{"foo": 452}'; // {"foo": 452}
    
    JSON.parse( jsonString ); // Unexpected token ' in JSON at position 1(…)
    JSON.parse( jsonStr ); // Object {foo: 452}
    
    objLiteral['key'] = 'val'; // Object {foo: 42, key: "val"}
    objLiteral.key2 = 'val';
    
    // objLiteral.key\n3 - SyntaxError: Invalid or unexpected token
    objLiteral['key\n3'] = 'val'; // Object {"foo": "42", key: "val", key2: "val", "key↵3": "val"}
    
    JSON.stringify( objLiteral ); // {"foo":"42","key":"val","key2":"val","key\n3":"val"}
    

Object Property accessors provide access to an object's properties by using the dot notation or the bracket notation.

  1. ► You have a more limited range of values (e.g. no functions allowed). A value can be a string in double quotes, number, boolean, null, object, or array. These structures can be nested.

    var objLiteral = {};
    objLiteral.funKey = function sayHello() {
        console.log('Object Key with function as value - Its outcome message.');
    };
    
    objLiteral['Key'] = 'Val';
    
    console.log('Object Literal Fun : ', objLiteral );
    // Object Literal Fun :  Object {Key: "Val"}Key: "Val"funKey: sayHello()__proto__: Object
    console.log( JSON.stringify( objLiteral ) ); // {"Key":"Val"}
    

enter image description here


JavaScript is the most popular implementation of the ECMAScript Standard. The core features of Javascript are based on the ECMAScript standard, but Javascript also has other additional features that are not in the ECMA specifications/standard. Every browser has a JavaScript interpreter.

JavaScript is a dynamically typed language. That means you don't have to specify the data type of a variable when you declare it, and data types are converted automatically as needed during script execution.

Literals :

'37' - 7    // 30
'37' + 7    // "377"
+'37' + 7   // 44
+'37'       // 37
'37'        // "37"

parseInt('37');     // 37
parseInt('3.7');    // 3

parseFloat(3.7);    // 3.7

// An alternative method of retrieving a number from a string is with the + (unary plus) operator:
+'3.7'              // 3.7

Object literals RFC 7159

An object structure is represented as a pair of curly brackets surrounding zero or more name/value pairs (or members). A name is a string. A single colon comes after each name, separating the name from the value. A single comma separates a value from a following name. The names within an object SHOULD be unique.

ECMAScript supports prototype-based inheritance. Every constructor has an associated prototype, and every object created by that constructor has an implicit reference to the prototype (called the object’s prototype) associated with its constructor. Furthermore, a prototype may have a non-null implicit reference to its prototype, and so on; this is called the prototype chain.

In a class-based object-oriented language, in general, state is carried by instances, methods are carried by classes, and inheritance is only of structure and behavior. In ECMAScript, the state and methods are carried by objects, and structure, behavior, and state are all inherited.

A prototype is an object used to implement structure, state, and behavior inheritance in ECMAScript. When a constructor creates an object, that object implicitly references the constructor’s associated prototype for the purpose of resolving property references. The constructor’s associated prototype can be referenced by the program expression constructor.prototype, and properties added to an object’s prototype are shared, through inheritance, by all objects sharing the prototype.

Not the answer you're looking for? Browse other questions tagged or ask your own question.