An amusing but frustrating JavaScript episode

Writing JavaScript in a team can sometimes lead to interesting exchanges. I recall a day when I was going through some code left behind by a previous developer. It was a HTML string. It went something like this.

var templateString = "<div class='data-label'>Id</div><div class='data-value'>" + getUserCode(row.id) + "</div><div class='data-label'>Name</div><div class='data-value'>" + getFullUserName(row.title,row.name) + "</div><div class='data-label'>Designation</div><div class='data-value'>" + (row.userType==''?'user':row.userType) + "</div>";

Now, when faced with a long string like this, my first instinct is to break it up into something readable, and more importantly, maintainable. Also, keeping it in its original form would mean I had to scroll horizontally back and forth every time I wanted to examine it. So after I was done with it, it looked like this.

var rowString =
"<div class='data-label'>Id</div>" +
"<div class='data-value'>" + getUserCode(row.id) + "</div>" +
"<div class='data-label'>Name</div>" +
"<div class='data-value'>" + getFullUserName(row.title, row.name) + "</div>" +
"<div class='data-label'>Designation</div>" +
"<div class='data-value'>" + (row.userType == '' ? 'user' : row.userType) + "</div>";

This way, if I needed to add to the block or make adjustments, I could be reasonably sure my edits would not result in missing tags or poorly formed HTML. Sure, there was some unnecessary concatenation, but since they were split into different lines, I figured it should be harder to screw something up this way.

So far so good, right?

Well, something else came up and I had to hand this off to a colleague. When I came back to it and saw what he'd done, my jaw fell open. It now looked like this.

var rowString =
"<div class='data-label'>Id</div>" + "<div class='data-value'>" + getUserCode(row.id) + "</div>" + "<div class='data-label'>Name</div>" + "<div class='data-value'>" + getFullUserName(row.title, row.name) + "</div>" + "<div class='data-label'>Designation</div>" + "<div class='data-value'>" + (row.userType == '' ? 'user' : row.userType) + "</div>";

When I was done resisting the urge to strangle him, I asked him politely why he'd created this monstrosity. His reply?

"Oh, I just think it's more readable this way."

Seriously, what in the ever-loving fuck? This combined the worst of both worlds. It was long and cumbersome, concatenated strings where they didn't need to be concatenated (thus increasing the probability of introducing errors upon editing), and I would still have to scroll horizontally back and forth to read it!

No way in hell was that more readable!

That's the end of my story!

It was a brief one, all things considered.

No, the guy wasn't stupid. He was possibly an even better coder than me. But our minds work differently, and perhaps some coders are just less concerned about clarity.

That's the long and short of it...
T___T