Help me understand this syntax

JavaScript
1 
b > I ? J ? (J = !1, L = z.offset().top - N.adminbar - (b - I), L + N.menu + N.adminbar < b + N.window && (L = b + N.window - N.menu - N.adminbar), z.css({
                        position: "absolute",
                        top: L,
                        bottom: ""
                    })) : !K && z.offset().top + N.menu < b + N.window && (K = !0, z.css({
                        position: "fixed",
                        top: "",
                        bottom: 0
                    })) : I > b ? K ? (K = !1, L = z.offset().top - N.adminbar + (I - b), L + N.menu > b + N.window && (L = b), z.css({
                        position: "absolute",
                        top: L,
                        bottom: ""
                    })) : !J && z.offset().top >= b + N.adminbar && (J = !0, z.css({
                        position: "fixed",
                        top: "",
                        bottom: ""
                    })) : c && (J = K = !1, L = b + N.window - N.menu - N.adminbar - 1, L > 0 ? z.css({
                        position: "absolute",
                        top: L,
                        bottom: ""
                    }) : f())
2

There is lots of nested ternary operators
You can try to replace them with regular IFs to make that mess more readable

3

That is horrible, horrible code…

2 Likes
4

Even then I would have trouble following single letter variable names.
Arguably it might save (IMHO negligible) bandwidth and processing load, but that is not developer friendly code.

1 Like
5

I think it’s extremely likely that this is minified code.

6

Thanks guys. Turns out it was pulled from minified WordPress admin JS and expanded. I will try to track down the original.

Thanks again.

7

This may be some really non-friendly code, but there are some seriously cool things happening in there.

for example one line is sort of like this

// 87 characters
let L, J = !0
J ? (J = !1, L = 5, L < 6 && (L = 9), console.log(J, L)) : console.log(J)
// false 9

that is the same as

// 115 characters
let L
let J = true

if (J) {
  J = false;
  L = 5
  if (L < 6) L = 9
  console.log(J, L)
} else {
  console.log(J)
}
// false 9

not many people know the comma , is just another operator like + or -, and this is a perfect example of when to actually use it.

also the use of bool && doSomething() or bool || doSomething() can be quite powerful. When we are doing react stuff, we use this pattern quite heavily to decide what or what not to show in a component, for example the following code will only show the image if a src is passed as a property

render () {
  const { name, src } = this.props

  if (name == null) return null

  return  <div className="Profile">
            <div className="Profile_name">{ name }</div>
            { !!src && <img src={ src } alt={ name }/> }
          </div>
}
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.