JSON vs OBJECT in Javascript
Tags: javascript, object, json, webdev
Published: 2024-04-10 07:49:47

## **JSON (JavaScript Object Notation):**

1. JSON is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate.

2. It is a text-based format and closely resembles JavaScript object literal syntax, but it is a strict subset of JavaScript syntax.

3. JSON is primarily used for transmitting data between a server and a web client (browser) in web applications.

4. JSON is language-independent and is widely supported by various programming languages, including JavaScript.

5. JSON supports only primitive data types (strings, numbers, booleans, null), arrays, and objects (nested key-value pairs).

Example of JSON
```
{
  "name": "John",
  "age": 30,
  "address": {
    "city": "New York",
    "country": "USA"
  },
  "hobbies": ["reading", "gardening", "traveling"]
}

```

Accessing value of JSON

```
// Example JSON string
const jsonString = '{"name": "John", "age": 30, "city": "New York"}';

// Parse JSON string into a JavaScript object
const jsonObject = JSON.parse(jsonString);

// Access values using dot notation
console.log(jsonObject.name); // Output: John
console.log(jsonObject.age); // Output: 30
console.log(jsonObject.city); // Output: New York

// Access values using bracket notation
console.log(jsonObject['name']); // Output: John
console.log(jsonObject['age']); // Output: 30
console.log(jsonObject['city']); // Output: New York

```
---


## **Object in JavaScript:**

1.  An object in JavaScript is a collection of key-value pairs.
 
2. Where keys are strings (or Symbols) and values can be of any data type (including other objects, arrays, functions, etc.).

3. Objects can be created using _object literals_, _constructors,_ or _classes_ in modern JavaScript.

4. Objects in JavaScript are dynamic and mutable, meaning their properties can be added, modified, or deleted at runtime.

_**Object Literal:**_
```
// Creating an object using object literal
let person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  }
};

// Accessing properties and calling method
console.log(person.name); // Output: John
console.log(person.age); // Output: 30
person.greet(); // Output: Hello, my name is John and I am 30 years old.

```
_**Constructor:**_

```
// Defining a constructor function
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log('Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.');
  }
}

// Creating an object using the constructor function
let person1 = new Person('John', 30);

// Accessing properties and calling method
console.log(person1.name); // Output: John
console.log(person1.age); // Output: 30
person1.greet(); // Output: Hello, my name is John and I am 30 years old.

```
_**Class (ES6+):**_

```
// Defining a class
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Creating an object using the class
let person2 = new Person('John', 30);

// Accessing properties and calling method
console.log(person2.name); // Output: John
console.log(person2.age); // Output: 30
person2.greet(); // Output: Hello, my name is John and I am 30 years old.

```

---


## **FAQs**

-  Are both _JSON & Object_ store values as key-value pair?

> Yes, both JSON (JavaScript Object Notation) and JavaScript objects store data in a key-value pair format.
 


- 2. Does JSON support Function or Method as values ?

> No, JSON (JavaScript Object Notation) does not support functions as values. It only supports a limited set of data types, including strings, numbers, booleans, arrays, objects, and null.