演算子の実行順

JavaScript Advent Calendar 2018の10日目の記事です。

なんか今朝カレンダー見たら、空いてるじゃん！ラッk...
短めですが、結構悩んだので。

$(function () {
  var e;
  $(".show-hide").eq(0).show(), e = 1, setInterval(function () {
    var t;
    t = e - 1, 0 > t && (t = $(".show-hide").length - 1), $(".show-hide").eq(t).hide(), $(".show-hide").eq(e).show(), e++, $(".show-hide").length <= e && (e = 0)
  }, 1000)
})

今時jqueryかよとか言わずにお付き合い頂けますと...
まだ結構保守の現場だと普通なんですよね。

内容は show-hideクラスのついた要素を1000ms間隔で順番にshow/hideしていくというもの。
何が困ったかって、そう読めなかったのである。

問題部分は長ったらしいので置き換えて

A, B && C, D, E, F, G && H

とする。

ことの詳細は 演算子の優先順位 であり、

演算子の優先順位 (JavaScript)

こちらを見ていただければと思うが、,よりも&&が優先なのである。
決して頭から読んじゃいけない

つまり、
B && C 部分と G && H 部分が先に評価される。
なので例えば、 B = false, G = trueならば、

B && C → Bが返る
G && H → Hが返る

(&&演算子は左辺falseなら左辺をそうでないなら右辺を返すくらいの適当な説明にしておく)

よって、

A, B(=false), D, E, F, H

となり、この順で実行され(カンマ演算子は式をカンマで続けれるというだけ(全部実行される))、Hが評価された値が返る。

僕が読めるような形だとこんな感じ？

$(function () {
  var e;
  $(".show-hide").eq(0).show(), e = 1, setInterval(function () {
    var t;
    t = e - 1
    if (0 > t)
      (t = $(".show-hide").length - 1)
    $(".show-hide").eq(t).hide()
    $(".show-hide").eq(e).show()
    e++
    if ($(".show-hide").length <= e)
      (e = 0)
  }, 1000)
})

The End

読めるようになるとそうでもないけど、突然出るとしぬ...

四則演算では優先順位ちゃんとわかってるのに、なぜこうなるとわからなくなるのか...

何が大変だったって、(読めないって言う)後輩の前なのでいい格好しなきゃいけなかったこと。

※理解あってると信じたいですが、間違ってたら、そっと優しく編集リプください()