Now that we have a basic understanding of JSON, let us work on our Hello World program. This is shown in the snippet that follows:
<!DOCTYPE html>
<html>
<head>
<title>Test Javascript</title>
<script type="text/javascript">
let hello_world = {"Hello":"World"};
alert(hello_world.Hello);
</script>
</head>
<body>
<h2>JSON Hello World</h2>
<p>This is a test program to alert Hello world!</p>
</body>
</html>
The preceding program will display Hello World on the screen when it is invoked from a browser.
Let us pay close attention to the script between the <script> tags:
let hello_world = {"Hello":"World"};
alert(hello_world.Hello);
In the first step, we are creating a JavaScript variable and initializing the variable with a JavaScript object. Similar to how we retrieve data from a JavaScript object, we use the key-value pair to retrieve the value. Simply put, JSON is a collection of key and value pairs, where every key is a reference to the memory location where the value is stored on the computer. Now let us take a step back and analyse why we need JSON if all we are doing is assigning JavaScript objects that are readily available. The answer is, JSON is a different format altogether, unlike JavaScript, which is a language.
Now, let us take a quick look at the similarities and differences between JSON and a normal JavaScript object. If we were to create a similar JavaScript object like our hello_world JSON variable from the earlier example, it would look like the JavaScript object that follows:
let hello_world = {"Hello":"World"};
The big difference here is that the key is not wrapped in double quotes. Since JSON key is a string, we can use any valid string for a key. We can use spaces, special characters, and hyphens in our keys, none of which are valid in a normal JavaScript object:
let hello_world = {"test-hello":"World"};
When we use special characters, hyphens, or spaces in our keys, we have to be careful while accessing them:
alert(hello_world.test-hello); //doesn't work
The reason the preceding JavaScript statement doesn't work is that JavaScript doesn't accept keys with special characters, hyphens, or strings. So, we have to retrieve the data using a method where we will handle the JSON object as an associative array with a string key. This is shown in the snippet that follows:
alert(hello_world["test-hello"]); //Hurray! It work
Another difference between the two is that a JavaScript object can carry functions within, while JSON object cannot carry any functions. The example that follows has the property getFullName, which has a function that alerts the name John Doe when it is invoked:
{
"studentid" : 101,
"firstname" : "John",
"lastname" : "Doe",
"isStudent" : true,
"classes" : [
"Business Research",
"Economics",
"Finance"
],
"getFullName" : function(){
alert(`${this.firstname} ${this.lastname}`);
}
}
Finally, the biggest difference is that a JavaScript object was never intended to be a data interchange format, while the sole purpose of JSON was to act as a data interchange format.
In the upcoming section, we are going to learn about JSON memory allocation.
