Advantages of JSON in web programming

JSON example in web programming. It has many uses in web programming.

JSON stands for ‘JavaScript Object Notation’. We use JSON for storing and exchanging data between server and client (browser). However, there are other uses and advantages of JSON beyond this in web programming. Firstly, we have to understand what JSON is. We can only exchange data in text format. That is why, JSON is a text. Syntactically, JSON looks like a JavaScript object. For instance, the following two variables store a JavaScript object and a JSON respectively.

let javascriptObject = {name: 'NepcodeX', countryCode: 977}
let jsonObject = "{"name":"NepcodeX","countryCode":977}"

You can see in the above examples that, JavaScript object has keys and their values. On the other hand, the JSON string has all the keys as text. One thing we have to notice are the spaces. Because we use it to exchange data, we try to minify it. JSON is used in other programming languages as well. Moreover, JSON is quite lightweight and easier to use than its counterpart XML.

JSON vs JavaScript object in web programming

You can watch this video on chrome summit to understand why JSON parse is faster than Javascript objects. Mathias Bynens, a software engineer at chrome, explain why JSON being context-free grammar, makes it faster. In JSON, there is a single token, whereas in JavaScript, there are multiple tokens. Each key is an identifier and has a value. So, JavaScript has to perform harder to tokenize the script correctly.

Similarly, in JavaScript the curly braces has many more functions other than creating objects. For example, we use braces in JavaScript to include a block of code. Similarly, we can use it for destructuring purpose. For instance, let’s look at the following lines of code.

let x = 7;
let y = { x }; // y = {x: 7}
let z = { x } = {x: 77}; // z = x = {x: 77}
const func = ({ x }) => x;
func({ x: 777 }); // 777

As we can see in above examples that, JavaScript is context-sensitive, however JSON is not. Therefore, the JavaScript parser must look at the remaining code to identify the context. On contrary, when JSON parser sees an opening brace, it is either a valid or an invalid JSON. You can visit the following to see the benchmark.

https://github.com/GoogleChromeLabs/json-parse-benchmark

Copying objects in JavaScript

One of the major advantages of JSON is that, we can use it to copy JavaScript objects. As we know that, the JavaScript objects (array, objects) are mutable. For example, let’s look at the following lines of code.

let p = [1, 2, 3];
let q = p; // q = [1, 2, 3]
q[2] = 7; // p = q = [1, 2, 7]

In the example above, we see that, the new variable q doesn’t copy array p but references it. Now, if we want to copy the array, we have to find a different way. Here, JSON comes a lot handy tool. Let’s look further.

let p = [1, 2, 3];
let q = JSON.parse(JSON.stringify(p)); // q = [1, 2, 3]
q[2] = 7; // p = [1, 2, 3], q = [1, 2, 7]

Interestingly, now p and q are different arrays. The similar thing happens in other JavaScript objects too.

Hence, in this way, we can use JSON to build faster applications in web programming, since it has way more advantages than XML and JavaScript objects.

The one thing that many people struggle in web programming is to build an authentication system. If you are learning rest API in express.js, I have a tutorial on how to build an authentication system using passport.js module and JWT (JSON web token).

https://nepcodex.com/2019/10/jwt-authentication-in-express-js-using-passport-js/
I am a Computer Engineer from Pulchowk Campus, IOE. I love programming, and music. Python, Java, Php, Javascript, Django, Laravel, Spring, express.js, etc. are my specialities.

1 Comment

Leave a Reply

%d bloggers like this: