Overview

Have you ever tried sending an object over a network, storing it in a database, or even just making a deep copy of an object—only to realize JavaScript doesn’t do it the way you expected? That’s where serialization and deserialization step in to save the day! 🦸‍♂️✨

Serialization is the process of converting an object into a format (like a string) so it can be easily stored or transmitted. Deserialization is the process of converting that format back into an object. It’s like packing your luggage for your me-time picnic(serialization) before a flight (you should definitely have a little picnic to freshen up yourself🧳) and unpacking it (deserialization) once you arrive (back to work at 2x mode🧑‍💻)!

Serialization is commonly used when:

Storing data in databases 📂
Sending data over a network 🌐
Caching data for later use 🕒
Creating deep copies of objects 🔄

But before we dive into the magic of serialization, let’s first understand how copying objects works, because it plays a huge role in this process.

1. The "Wait, What?" Problem

Let's start with something simple:

let obj = {
    name: "Tvisha"
};
obj.name = "Sparsh";
console.log(obj.name); // Sparsh

Did we expect this? Of course. We modified obj.name, so it changed. Simple, right? But what if we wanted to create a copy of obj without affecting the original?

2. The Shallow Copy Trick

So, what if we want to create a copy of our object and not mess with the original one? Meet the shallow copy:

let obj2 = {
    name: "Tvisha"
};
let user2 = { ...obj2 };  // Spread operator for shallow copy
user2.name = "Sparsh";

console.log(obj2.name); // Tvisha
console.log(user2.name); // Sparsh

Everything looks good! We changed user2.name, but obj2.name remains untouched. Victory! 🎉

But Wait... There’s a Problem!

Shallow copies only copy the reference for nested objects, not the actual data. Let’s see the problem in action:

let obj3 = {
    name: "Tvisha",
    address: {
        city: "Rajkot",
        state: "Gujarat"
    }
};
let user3 = { ...obj3 }; // Shallow copy

user3.address.city = "Gandhinagar";
console.log(obj3.address.city); // Gandhinagar (Wait, what?!)
console.log(user3.address.city); // Gandhinagar

Both objects got updated! This is because shallow copies only copy references of nested objects, not their actual values.

3. Enter Serialization & Deserialization 🏆

To create a true deep copy, avoid reference issues, and enable object storage or transmission, we use serialization and deserialization.

Serialization: Packing the Object into a String 🎁

Serialization allows us to convert complex objects into a string representation that can be easily stored or transferred. In JavaScript, we do this using JSON.stringify():

let obj4 = {
    name: "Tvisha",
    address: {
        city: "Rajkot",
        state: "Gujarat"
    }
};

let serializedData = JSON.stringify(obj4);
console.log(serializedData);
// Output: '{"name":"Tvisha","address":{"city":"Rajkot","state":"Gujarat"}}'

Boom! Now our object is a string and can be safely stored or sent over a network.

Deserialization: Unpacking the Object 📦

Deserialization is the process of converting the string back into an object. We use JSON.parse() for this:

let deserializedData = JSON.parse(serializedData);
console.log(deserializedData.address.city); // Rajkot

Just like that, our object is back! 🔄

Serialization in Real Life

Imagine sending data to a server. The server can't handle JavaScript objects directly, so we convert them to a string (serialization), send them, and then convert them back (deserialization) on the other side.

Example: Sending data to a backend API:

fetch("https://api.example.com/data", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(obj4)
});

Here, the object is serialized before sending. The server will deserialize it to process the data.

4. JSON Serialization Has Limitations... 🤔

Serialization using JSON.stringify() works great, BUT it doesn’t handle functions or special objects like Date.

Problem: Losing Functions and Dates

let obj5 = {
    name: "Tvisha",
    birthDate: new Date(),
    getData: function() {
        return "All data is here.";
    }
};

let serializedObj = JSON.stringify(obj5);
let deserializedObj = JSON.parse(serializedObj);

console.log(deserializedObj.birthDate); // Output: A string, not a Date object 😱
console.log(deserializedObj.getData); // Output: undefined 😭

Custom Serialization for Dates

One way to handle Date objects is by converting them manually before serialization:

let obj6 = {
    name: "Tvisha",
    birthDate: new Date().toISOString()
};

let serializedDate = JSON.stringify(obj6);
let deserializedDate = JSON.parse(serializedDate);

console.log(new Date(deserializedDate.birthDate)); // Now we get a Date object!

5. Alternative Solutions

If you need to serialize and deserialize functions or special objects, consider custom serialization strategies like:

Converting functions to strings manually (toString(), but note it won’t be executable when parsed)
Using specialized libraries for complex serialization needs

Conclusion

Serialization and deserialization are essential for handling data in JavaScript, whether you’re making deep copies, storing objects, or sending them over a network.

✅ Serialization: Convert objects to strings using JSON.stringify()

✅ Deserialization: Convert strings back to objects using JSON.parse()

✅ Limitations: JSON doesn’t support functions or dates

✅ Workarounds: Use manual conversion for Date, avoid functions in JSON, or use specialized serialization techniques

Next time you're copying or storing objects, serialize like a pro! 🚀🔥

Thanks for reading; Thanks for your time <3

Serialization & Deserialization - Turning Objects into Strings and Back!

Table of contents