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

Leveraging Angular to retrieve images from Google Feed API

Retrieve the link of a nearby element

Updating a singular value in an array using jQuery/JavaScript

Having trouble injecting ActivatedRouteSnapshot into the component

Enliven the character limit reaction by incorporating a thrilling shake animation when it reaches

Dealing with website links in Next.js and Chakra-UI: Tips and Tricks

Guide for using two Async Pipe functions in Angular 7

Using jQuery and AJAX to send a post request in a Razor page and automatically redirect to the view returned by a MVC Action (similar to submitting

The Angular router is directed to an empty URL path instead of the specified URL

Ways to create a looping mechanism with specified number restrictions and limitations

I'm looking to eliminate the index from an array containing elements with a minimum length of 3 characters

Having trouble with retrieving JSONP data? Unsure how to access the information?

Loading an external javascript file dynamically within an Angular component

What is the best way to pass a mask without using a plug-in when dealing with an input value in Vue.js?

Determine whether a value contains a minimum of two words or more using JavaScript

I created a thorough duplicate that successfully addressed an issue with a table

Dispatch a websocket communication from a synchronous function and retrieve the information within the function itself

Each time a new client connects, socket.io replicates the information

Learn the steps for filling the color area between two points in HighCharts

Activate the Masterpage menu to emphasize its current state