snippetjavascriptTip

Modeling complex JavaScript object serialization

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptobjectmodelingserializationcomplex

Problem

> [!IMPORTANT]
>
> This article is part of a series, picking up where Modeling complex JavaScript object scopes left off. Make sure to read previous articles in the series before continuing. The entire series is more of a show & tell, aiming to <strong class="sparkles">inspire</strong> you to use more advanced JavaScript features and patterns in your projects.
In the last installment, we covered a lot of ground towards making our model queries reusable. Our Model and RecordSet classes are now capable of handling complex queries, and we can even compose them in a way. Our two models, Post and Author are now fully functional and our code is well-optimized. However, we still have one problem to solve - serialization.
As usual, before diving into the code, let's check the directory structure of our project. This time around, we're adding a new class, Serializer, as well as a new directory, called serializers.

Solution

src/
├── core/
│   ├── model.js
│   ├── recordSet.js
│   └── serializer.js
├── models/
│   ├── author.js
│   └── post.js
└── serializers/
    ├── postSerializer.js
    └── postPreviewSerializer.js

> This article is part of a series, picking up where Modeling complex JavaScript object scopes left off. Make sure to read previous articles in the series before continuing. The entire series is more of a show & tell, aiming to <strong class="sparkles">inspire</strong> you to use more advanced JavaScript features and patterns in your projects.
In the last installment, we covered a lot of ground towards making our model queries reusable. Our Model and RecordSet classes are now capable of handling complex queries, and we can even compose them in a way. Our two models, Post and Author are now fully functional and our code is well-optimized. However, we still have one problem to solve - serialization.
As usual, before diving into the code, let's check the directory structure of our project. This time around, we're adding a new class, Serializer, as well as a new directory, called serializers.
> [!TIP]
>
> If you need a code refresher without going into all the details, check out the code summary from the previous article.

Code Snippets

src/
├── core/
│   ├── model.js
│   ├── recordSet.js
│   └── serializer.js
├── models/
│   ├── author.js
│   └── post.js
└── serializers/
    ├── postSerializer.js
    └── postPreviewSerializer.js

const author = new Author({
  id: 1,
  name: 'John',
  surname: 'Doe',
  email: 'j.doe@authornet.io'
});

const post = new Post({
  id: 1,
  title: 'Hello, World!',
  content: 'Lorem ipsum dolor sit amet.',
  publishedAt: new Date('2024-12-01') ,
  authorId: 1
});

// Sample of a serialized post (PostSerializer)
// {
//   title: 'Hello, World!',
//   content: '<p>Lorem ipsum dolor sit amet.</p>',
//   date: 'Sun, Dec 01, 2024',
//   author: {
//     name: 'John Doe',
//     email: 'j.doe@authornet.io'
//   }
// }

// Sample of a serialized post preview (PostPreviewSerializer)
// {
//   title: 'Hello, World!',
//   date: 'Dec 01, 2024',
//   author: 'John Doe',
//   url: '/posts/1'
// }

Before we can do anything meaningful with this class, we'll need to define a way to dictate the **serializable attributes**. Drawing inspiration from previous implementations, we can utilize our old friend, the [**static initialization block**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks). Using this trick, we can define a `prepare` function, much like we did with the `Model` class.

_But what will this function do?_ you may be asking. Simply put, it will accept the serializer subclass and an **array of attribute names**. Then, it will store these attributes in a static property of the subclass. This way, we can easily access them later on.

Context

From 30-seconds-of-code: complex-object-serialization

Revisions (0)

No revisions yet.