Javascript first argument gets ignored in nested functions with spread arguments-CodePudding

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

CodePudding user response：

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
   )
)

CodePudding user response：

    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
       )
    )

Ok I just found out that I had to spread the array returned by the inner Transform to make the transform applied on each element. Do you think there is a better way to achieve the same result in a more intuitive way?