DEV Community

Tamilselvan K
Tamilselvan K

Posted on

Day-39 Today I Learned About JSON – A Beginner’s Guide

#webdev #programming #javascript #beginners

What is JSON?

JSON stands for JavaScript Object Notation. It's a lightweight data-interchange format that's easy for humans to read and write and easy for machines to parse and generate.

It’s widely used in web development, especially when exchanging data between a client and a server.

Why is JSON So Popular?

  • Human-readable
  • Language-independent
  • Works well with APIs
  • Simple structure

JSON Basics

A JSON file is basically made up of two structures:

1. Objects – key-value pairs enclosed in { } 

{ "name": "Tamilselvan", "age": 25, "isStudent": false }
Enter fullscreen mode Exit fullscreen mode

2. Arrays – an ordered list of values enclosed in [ ] 

[ "HTML", "CSS", "JavaScript" ]
Enter fullscreen mode Exit fullscreen mode

JSON can nest objects and arrays inside each other:

{ "name": "Tamilselvan", "skills": ["Python", "Node.js", "SQL"], "address": { "city": "Chennai", "country": "India" } }
Enter fullscreen mode Exit fullscreen mode

JSON Rules

  1. Data is in name/value pairs
  2. Names (keys) must be in double quotes
  3. Strings are in double quotes
  4. Values can be:
  • Strings
  • Numbers
  • Objects
  • Arrays
  • Booleans (true/false)
  • null

Where Is JSON Used?

  • APIs (like RESTful APIs)
  • Configuration files (package.json in Node.js)
  • Cloud platforms (like Firebase or AWS)
  • Frontend/backend communication in web apps

How to Use JSON in JavaScript

Parse JSON string to JavaScript object: 

const jsonData = '{"name":"Tamilselvan"}'; const obj = JSON.parse(jsonData); console.log(obj.name); // Tamilselvan
Enter fullscreen mode Exit fullscreen mode

Convert JavaScript object to JSON string: 

const data = { language: "JavaScript", level: "Beginner" }; const jsonString = JSON.stringify(data); console.log(jsonString);
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

Learning JSON is like unlocking a universal language for web development. Whether you're dealing with APIs, databases, or configs, JSON will be your constant companion.

Top comments (0)