Return value from largest object property in array - JS

Question

The title of this question might be a little misleading, but it was the closest to accurately describe the problem I was having.

I am currently working on a custom lightbox script, similar to the one that can be found on Facebook and airbnb. Once the user clicks on an image, the lightbox is not resized to the content, rather the image is centered with a black area around it (if you're a regular FB user, you should know what I mean).

I am storing the images to be used for the lightbox in an JS array as follows (generated from a MySQL database:

var item_images = [
    { 'id': 2, 'url': '50929ab7ae8e5.jpg', 'caption': 'My Photo # 1', 'width': 1000, 'height': 750 },
    { 'id': 7, 'url': '50929ab7ae8e8.jpg', 'caption': 'My Photo # 1', 'width': 1000, 'height': 800 },
    { 'id': 3, 'url': '50929ac161d10.jpg', 'caption': 'My Photo # 2', 'width': 1000, 'height': 750 },
    { 'id': 4, 'url': '50929acbe8dc8.jpg', 'caption': 'My Photo # 3', 'width': 1000, 'height': 750 }
];

I need a function in JS to find the largest width and largest height required for the images. For example, given the data above, I'd like a function GetMaxSizes() which will return 800 (largest height in the array) and 1000 (the largest width in the array).

Is there a more efficient way than looping over the entire array and comparing everything? My concern is this will become slow if there are lots of elements inside item_images:

function GetRequiredHeight()
{
    var req_height = 0, 
         req_width = 0;

    for(var i in item_images)
    {
        var image = item_images[i];
        if(image.width > req_width) { req_width = image.width };
        if(image.height > req_height) { req_height = image.height };
    }

    return { width: req_width, height: req_height };
}

I don't think there is a more efficient way. Besides your algorithm is O(n) which scales linearly with the size of the input, so I don't think it should be of your concern. — Masiar
– Masiar, Commented Nov 6, 2012 at 11:28

skalee · Accepted Answer · 2012-11-06 11:34:04Z

1

This is O(n) complexity, and I can't imagine anything better than that. Iteration through array having 10000 elements is not a big deal for many many years. How many pics would you like to store here? Milions? If your algorithm slows down, I would search for different reasons.

I assume you do this iteration once. If you want to alter this array frequently, some optimizations could be done to avoid traversing whole array whole the time. I have some good idea but it's more writing, so if you need it please comment this answer.

answered Nov 6, 2012 at 11:34

skalee

12.8k6 gold badges57 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BenM Over a year ago

Thanks for your comments. The function will only ever be called at load-time, and once called, the structure of the array will not be changed. Thanks.

Collectives™ on Stack Overflow

Return value from largest object property in array - JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related