Creating Combinations in JavaScript

Question

Lets say I have several sets of options in Javascript

var color = ["red", "blue", "green","yellow"];
var size = ["small", "medium", "large"];
var weight = ["heavy", "light"];

what is an efficient algorithm to get all the combinations of these options in an array that looks like this

["red and small and heavy", "red and small and light", "red and medium and heavy" ...]

Here's the caveat though

This function must be able to take any number of sets of options

I have a feeling that the proper way to do this is through some sort of tree traversal, but its too early to have fully thought this through and I haven't had my coffee yet

Answer 1

function permutations(choices, callback, prefix) {
 if(!choices.length) {
 return callback(prefix);
 }
 for(var c = 0; c < choices[0].length; c++) {
 permutations(choices.slice(1), callback, (prefix || []).concat(choices[0][c]));
 }
}
var color = ["red", "blue", "green","yellow"];
var size = ["small", "medium", "large"];
var weight = ["heavy", "light"];
permutations([color, size, weight], console.log.bind(console));

Seems to work...

[ 'red', 'small', 'heavy' ]
[ 'red', 'small', 'light' ]
[ 'red', 'medium', 'heavy' ]
[ 'red', 'medium', 'light' ]
[ 'red', 'large', 'heavy' ]
[ 'red', 'large', 'light' ]
[ 'blue', 'small', 'heavy' ]
[ 'blue', 'small', 'light' ]
[ 'blue', 'medium', 'heavy' ]
[ 'blue', 'medium', 'light' ]
[ 'blue', 'large', 'heavy' ]
[ 'blue', 'large', 'light' ]
[ 'green', 'small', 'heavy' ]
[ 'green', 'small', 'light' ]
[ 'green', 'medium', 'heavy' ]
[ 'green', 'medium', 'light' ]
[ 'green', 'large', 'heavy' ]
[ 'green', 'large', 'light' ]
[ 'yellow', 'small', 'heavy' ]
[ 'yellow', 'small', 'light' ]
[ 'yellow', 'medium', 'heavy' ]
[ 'yellow', 'medium', 'light' ]
[ 'yellow', 'large', 'heavy' ]
[ 'yellow', 'large', 'light' ]

• Greg Guida: doesn't work in the chrome debugger unless you wrap console.log in an anonymous function. either way awesome job!
• AKX: Sorry, yeah. I tested this in node.js 0.6.x, not the browser. Forgot to mention that in the post.
• Meetai.com: The console.log function mentioned in #1 above should be as: function log(message){ if(typeof console == "object"){ console.log(message); } } Then, change the call to the function to: combinations([color, size, weight], log)
• zaphod1984: 'bind' is your friend: combinations([color, size, weight], console.log.bind(console))

Answer 2

That would be the cartesian product of those sets: http://en.wikipedia.org/wiki/Cartesian_product

Also see: https://stackoverflow.com/questions/4796678/javascript-golf-cartesian-product

• Greg Guida: Awesome, this is great. I knew this had to be something that had already been done.
• Wicket: The "JavaScript Golf..." page was deleted :(

Answer 3

Tree traversal is the way to go, well recursion to be exact.

The working principle is, at each depth you would iterate through all the options for that depth, in your case the options for a list. When you choose element form last depth, you have one full set.

Answer 4

The console.log function mentioned in #1 above should be as:

function log(message){
 if(typeof console == "object"){
 console.log(message);
 }
}

Then, change the call to the function to:

combinations([color, size, weight], log);