DEV Community

Anurag Affection
Anurag Affection

Posted on

2 2

JSON vs OBJECT in Javascript

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"]
}

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay