Return value from largest object property in array - JS
<p>The title of this question might be a little misleading, but it was the closest to accurately describe the problem I was having.</p>

<p>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).</p>

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

<pre><code>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 }
];
</code></pre>

<p>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 <code>GetMaxSizes()</code> which will return <code>800</code> (largest height in the array) and <code>1000</code> (the largest width in the array).</p>

<p>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 <code>item_images</code>:</p>

<pre><code>function GetRequiredHeight()
{
    var req_height = 0, 
         req_width = 0;

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

    return { width: req_width, height: req_height };
}
</code></pre>
