Javascript first argument gets ignored in nested functions with spread arguments

Question

I have this really simple variadic function that cycle through its arguments and adds a string "Transformed" to them.

function Transform(...children) {
    return children.map(child=> child + " Transformed")
}
document.write(
    Transform(
       Transform(" test1", " test2"), //only test2 gets double transformed
       Transform(" test3") //here the first argument gets double transformed though
   )
)

For some strange reason when nesting them if I have only 1 argument it acts as expected but if I have more than one it won't affect the first argument.

How can I make the function add the string Transformed onto the end of all of the arguments? (You can see that test1 does not have two Transformed after it, but test2 and test3 do).

Answer 1

You need to re-spread the array out when you call the function as well (look at the arguments to the outer Transform):

function Transform(...children) {
    return children.map(child=> child + " Transformed")
}
document.write(
    Transform(
       ...Transform(" test1", " test2"), //only test2 gets double transformed
       ...Transform(" test3") //here the first argument gets double transformed though
   )
)

If you want the function to handle both cases, then simply check whether each element is an array or not, and if the element is an array then handle it with Transform as well:

function Transform(...children) {
    return children.map(child => Array.isArray(child) ? Transform(...child) : child + " Transformed");
}
document.write(
    Transform(
       Transform(" test1", " test2"), //only test2 gets double transformed
       Transform(" test3") //here the first argument gets double transformed though
   )
)

Slightly more verbose version:

function Transform(...children) {
    return children.map(child => {
      if (Array.isArray(child)) return Transform(...child)
      else return child + " Transformed";
    });
}
document.write(
    Transform(
       Transform(" test1", " test2"), //only test2 gets double transformed
       Transform(" test3") //here the first argument gets double transformed though
   )
)