Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

Question

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

My objects can have one or more properties assigned, with a total of 5 different properties in my case.

To illustrate this, let's use a simple movie example where each movie can be assigned from 5 different genres.

I have come up with two methods to approach this:

Assign a boolean for each property of every object individually OR
Create an array containing the list of assigned properties for each object

Here are the options:

Option 1:

[{id: 1, name: 'some movie 1', comedy: true, thriller: true, drama: true, action: false, adventure: true},
{id: 2, name: 'some movie 2', comedy: false, thriller: true, drama: false, action: false, adventure: false},
{id: 3, name: 'some movie 3', comedy: true, thriller: true, drama: true, action: false, adventure: true},
{id: 4, name: 'some movie 4', comedy: true, thriller: true, drama: true, action: false, adventure: false}, ...]

Option 2:

[{id: 1, name: 'some movie 1', genre: ['comedy','thriller','drama']},
{id: 2, name: 'some movie 2', genre: ['thriller','drama']},
{id: 3, name: 'some movie 3', genre: ['comedy','thriller','adventure']},
{id: 4, name: 'some movie 4', genre: ['comedy','thriller']}, ...]

Personally, I prefer option 2 as it is more concise and does not store redundant data (false boolean values).

However, I am concerned about the performance implications. Using .include() to check arrays seems slower compared to a simple boolean check as seen in option 1.

This leads me to a dilemma between redundancy and performance. Is there a better solution that could address this issue like using a different data structure?

Thank you in advance!

javascript arrays angular typescript

Answer 1

Answer №1

When working with option 1, it's not necessary to explicitly define the false properties. Simply leave them as undefined, which is considered a falsy value.

const movies = [
  {id: 1, name: 'some movie 1', comedy: true, thriller: true, drama: true, adventure: true},
  {id: 2, name: 'some movie 2', thriller: true},
  {id: 3, name: 'some movie 3', comedy: true, thriller: true, drama: true, adventure: true},
  {id: 4, name: 'some movie 4', comedy: true, thriller: true, drama: true,}
];

const comedies = movies.filter(m => m.comedy);

console.log(comedies);

By following this approach, unnecessary data redundancy is eliminated without compromising filtering performance.

Answer 2

When working with option 1, it's not necessary to explicitly define the false properties. Simply leave them as undefined, which is considered a falsy value.

const movies = [
  {id: 1, name: 'some movie 1', comedy: true, thriller: true, drama: true, adventure: true},
  {id: 2, name: 'some movie 2', thriller: true},
  {id: 3, name: 'some movie 3', comedy: true, thriller: true, drama: true, adventure: true},
  {id: 4, name: 'some movie 4', comedy: true, thriller: true, drama: true,}
];

const comedies = movies.filter(m => m.comedy);

console.log(comedies);

By following this approach, unnecessary data redundancy is eliminated without compromising filtering performance.

Answer 3

Answer №2

Instead of having multiple keys for genres, consider using a single key with an integer representing different genres as flags:

comedy  drama   something else  
   1      0            1       === 1 * 2^2 + 0 * 2^1 + 1 === 5

This way you can simplify your data structure like this:

{
    id:1,
    name: "some",
    genre: 5
}

To check if 'comedy' is included in the genres, you would do:

(genre ^ 4) === (genre - 4)

For checking 'drama', it would be:

(5 ^ 2) === (5 - 2) //false

You have the flexibility to use bitmasking genre & 4 as well, according to your preference.

Answer 4

Instead of having multiple keys for genres, consider using a single key with an integer representing different genres as flags:

comedy  drama   something else  
   1      0            1       === 1 * 2^2 + 0 * 2^1 + 1 === 5

This way you can simplify your data structure like this:

{
    id:1,
    name: "some",
    genre: 5
}

To check if 'comedy' is included in the genres, you would do:

(genre ^ 4) === (genre - 4)

For checking 'drama', it would be:

(5 ^ 2) === (5 - 2) //false

You have the flexibility to use bitmasking genre & 4 as well, according to your preference.

Answer 5

Answer №3

It is not recommended to perform extensive data filtering on the client side. This can lead to slow computation of large datasets, causing the main browser thread to block and resulting in UI lag and slowdowns. The ideal approach is to establish a server with an API dedicated to handling such filtering tasks independently from the client. By querying the API, you can easily retrieve the filtered data without impacting client-side performance. If excessive data filtering on the client becomes a performance issue, it indicates a flaw in the app's structure.

If for some reason filtering must be done on the client side, utilizing a WebWorker is advised. This allows the filtering to occur in a background thread without affecting the UI responsiveness.

However, performing client-side filtering (with or without WebWorker) may encounter challenges across different browsers due to varying JavaScript implementations. Benchmarking different methods can help determine the most efficient approach. I conducted a benchmark test here which showcases differences in performance between Chrome, Firefox, and Safari.

https://i.stack.imgur.com/X1mLb.png

The results reveal that each browser, based on its JavaScript engine (V8, SpiderMonkey, Webkit), exhibits different speeds. For optimal performance across browsers, Array.includes() emerges as a reliable choice, displaying strong results in Chrome, decent performance in Firefox, and good performance in Safari.

Conclusion:

Create an API for filtering tasks whenever possible
If client-side filtering is necessary, utilize a WebWorker
For best results, consider using Array.includes()

Answer 6

It is not recommended to perform extensive data filtering on the client side. This can lead to slow computation of large datasets, causing the main browser thread to block and resulting in UI lag and slowdowns. The ideal approach is to establish a server with an API dedicated to handling such filtering tasks independently from the client. By querying the API, you can easily retrieve the filtered data without impacting client-side performance. If excessive data filtering on the client becomes a performance issue, it indicates a flaw in the app's structure.

If for some reason filtering must be done on the client side, utilizing a WebWorker is advised. This allows the filtering to occur in a background thread without affecting the UI responsiveness.

However, performing client-side filtering (with or without WebWorker) may encounter challenges across different browsers due to varying JavaScript implementations. Benchmarking different methods can help determine the most efficient approach. I conducted a benchmark test here which showcases differences in performance between Chrome, Firefox, and Safari.

https://i.stack.imgur.com/X1mLb.png

The results reveal that each browser, based on its JavaScript engine (V8, SpiderMonkey, Webkit), exhibits different speeds. For optimal performance across browsers, Array.includes() emerges as a reliable choice, displaying strong results in Chrome, decent performance in Firefox, and good performance in Safari.

Conclusion:

Create an API for filtering tasks whenever possible
If client-side filtering is necessary, utilize a WebWorker
For best results, consider using Array.includes()

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

Answer №1

Answer №2

Answer №3

Similar questions

How to prevent npm from being accessed through the command prompt

Arrow function returns itself, not the function

The functionality of a radio button triggering a form submission to different pages is experiencing issues with Firefox

JavaScript Application - Problem with Universal Windows Script

Trouble with parseJSON when handling form POST in Python

Error: Unable to split function. Attempting to retrieve API response via GET request using ngResource

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

What is the process behind Twitter's ability to quickly show my profile?

Attempting to include a new choice on a drop-down menu and ensure its visibility within the drop-down menu

The HTML select element fails to drop down over the THREE.js scene

knockout, loop within a loop

Is it acceptable to designate the db instance as a global variable so that it is always accessible without requiring the "require" statement in Node.js?

Tips for sending an input file to an input file multiple times

Full replacement of a cell within an HTML table

jQuery AJAX calls are unsuccessful, while NodeJS requests are running smoothly

Does a browser's cache utilize storage for XMLHttpRequest responses?

Encountering the error message "String length is invalid" during the execution of ng build for a library

The Handlebars template remains blank, failing to show any data or error messages

Using Typescript in combination with snowpack may result in nullish coalescing operators being generated when targeting a version lower than ES2020

Ways to identify whether a day is in Pacific Standard Time (PST) or Pacific Daylight