snippetjavascriptTip

Modeling complex JavaScript object collections in memory

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

Viewed 0 times

javascriptobjectmodelingmemorycollectionscomplex

Problem

I've been working with Ruby on Rails quite a lot lately. What I've come to like about it the most may be its ActiveRecord ORM (Object-Relational Mapping). I won't go into detail about here, but I wanted to share a similar sort of concept I put together for this very website using JavaScript.
> [!IMPORTANT]
>
> This article is part of a series. It is more of a show & tell, rather than a tutorial. It's fairly complex and quite advanced, so I won't be explaining every single detail. The hope is to <strong class="sparkles">inspire</strong> you to think about using more advanced JavaScript features and building some interesting things with them.
What I wanted to accomplish with this project is to have a way to load a fairly large amount of plain objects, which are related to each other. Instead of JavaScript's nesting, referencing and moving around things, I wanted something simple and elegant.

Solution

src/
├── core/
│   ├── model.js
│   └── recordSet.js
└── models/
    └── post.js

>
> This article is part of a series. It is more of a show & tell, rather than a tutorial. It's fairly complex and quite advanced, so I won't be explaining every single detail. The hope is to <strong class="sparkles">inspire</strong> you to think about using more advanced JavaScript features and building some interesting things with them.
What I wanted to accomplish with this project is to have a way to load a fairly large amount of plain objects, which are related to each other. Instead of JavaScript's nesting, referencing and moving around things, I wanted something simple and elegant.
ActiveRecord was my initial inspiration, but the implementation has delved a little bit away from it. Instead of relying on a database, my need was to do this on the fly, using memory. I also didn't have a need to update the data in the objects. What I was essentially after was a way to load a snapshot of data into memory, populate a bunch of models and then query them.
Before we move any further, I think it's wise to set up the directory structure, as well as some conventions for how files are loaded. I'm using ESM (ECMAScript Modules) for this project, so I can use import and export statements. ESM also comes with the ability to define an imports field in package.json, which allows me to define aliases for my imports.
The overall directory structure looks like this:

Code Snippets

src/
├── core/
│   ├── model.js
│   └── recordSet.js
└── models/
    └── post.js

// package.json
{
  "imports": {
    "#src/*": [
      "./src/*"
    ]
  }
}

### Model initialization

Having defined the `Model` class and its `prepare` method, we can now create a subclass of `Model` and call the `prepare` method on it inside a static initialization block. This will create an array for the subclass to store its instances.

Context

From 30-seconds-of-code: complex-object-collections-in-memory

Revisions (0)

No revisions yet.