JSON vs OBJECT in Javascript

JSON (JavaScript Object Notation):

JSON is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate.
It is a text-based format and closely resembles JavaScript object literal syntax, but it is a strict subset of JavaScript syntax.
JSON is primarily used for transmitting data between a server and a web client (browser) in web applications.
JSON is language-independent and is widely supported by various programming languages, including JavaScript.
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:

An object in JavaScript is a collection of key-value pairs.
Where keys are strings (or Symbols) and values can be of any data type (including other objects, arrays, functions, etc.).
Objects can be created using object literals, constructors, or classes in modern JavaScript.
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.

Blog

JSON vs OBJECT in Javascript

Anurag Affection

JSON (JavaScript Object Notation):

Object in JavaScript:

FAQs

Join Our Newsletter. No Spam, Only the good stuff.

Related