Restructuring multiple variables into an array I'm using Groovy to grab properties from a page and each of the properties are grouped into a specific type:

Groovy:

String headerImage = null
String sidebarImage = null
String footerImage = null

String mainVideo = null
String sidebarVideo = null
String overviewVideo = null

//Images
headerImage = properties["headerImage"]
sidebarImage = properties["sidebarImage"]
footerImage = properties["footerImage"]

//Videos
mainVideo = properties["mainVideo"]
sidebarVideo = properties["sidebarVideo"]
overviewImage = properties["overviewImage"]


I'm then outputting those values into my jQuery plugin with JSTL like below. Is there a better way to output the values into a jQuery plugin maybe by grouping them into an array or something? Also I only added three in this example in reality I have about 10 in each section so you can image how ugly that looks when I'm putting those values in my jQuery plugin.

$(document).ready(function () {
    $('.mediaGallery').mediaFilters({
        images: '${headerImage},${sidebarImage},${footerImage}',
        videos: '${mainVideo},${sidebarVideo},${overviewImage}',            
    });
});
I don't quite understand why you are using individual variables for the various items since all you are doing is outputting them as a group. It would be much cleaner to collect them into a collection. Perhaps something like this:

//Images
List images = [
  properties["headerImage"],
  properties["sidebarImage"],
  properties["footerImage"]
]

//Videos
List videos = [
  properties["mainVideo"],
  properties["sidebarVideo"],
  properties["overviewImage"]
]


With the output looking like this:

$(document).ready(function () {
    $('.mediaGallery').mediaFilters({
        images: '${images.join(",")}',
        videos: '${videos.join(",")}',            
    });
});


That improves readability, and with the example you have given doesn't impact functionality.