Reformatting a structured string like "a-b-c|A-B-C" into "a-A|b-B|c-C"
To start, I must say that I wish I was writing JS like this in 2016. I have only recently been becoming acquainted with the newer features ecmascript-6 has to offer. After looking at the other answers to the post you mentioned I would have suggested they consider using destructuring assignment, but I doubt it would help for your code.
For readability it can be a great idea to use functional code, but yes performance can suffer because each iteration calls a function, which adds to the call stack.
This code makes great use of template literals and arrow functions. It also has consistent indentation.
The template literal may be considered excessive, since it only contains interpolated values. The string concatenation could be achieved with the + operator - instead of:
 part.map((str, index) =&gt; 
       `${result[index]}${mainSep}${str}`

It could merely be:
 part.map((str, index) =&gt; 
       result[index] + mainSep + str

Which would save a few characters but also should be faster. See this jsBin for a comparison, as well as this answer to Most efficient way to concatenate strings in JavaScript?  which has a link to an updated JSPerf. The graphs don't appear to be loading in my browser but in MacOS FF 77 the concat appears to be fastest with the template literal 4% slower. In Chrome 83.04 the results were similar - template literals appeared to be 22% slower than appending.
I forgot that reduce() started with the 2nd element when no initialValue is supplied. While it may not be a huge improvement it does mean one less iteration...