Question

I have some example

target = $this.attr('data-target') || e.preventDefault() || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')

but I don’t understand how its works (

If I use console.log()

console.log(target, e.preventDefault(),  (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7

I have get

#collapseTwo undefined #collapseTwo

yeah, I understand that e.preventDefault() returns result – “garbage”… but why e.preventDefault() uses with || operators?

How its works?

Answer 1

This does the following:
Upon some comments the revisited answer completely differs (in a sense 🙂 )
So what it does that if the clicked element dataTarget has a value (in which case it is assumed that the element is not an anchor with navigational click event to cancel) than that value is used for the navigation, otherwise the element must be an anchor, that has to be cancelled first, then its href attribute’s value used.

terse? 🙂

My original read of it was:
If the event target has dataTarget attribute, then the click event bubble is cancelled, and if the clicktarget has an href attribute specified then the browser is navigated there. The concept here is that the left to right evaluation logic is combined with actual side-effecting method execution.

This sort of chained writing is not really beneficial albeit terse. preventDefault is there because this way the call to it is chained and there is no need for a codeblock.