JavaScriptのよくわからないコード

Question

JavaScriptのよくわからないコードを発見しました。

onload = function() {
    var e = document.getElementById("e");
    var i = 0;
    (function move() {
        move.endTime || (move.endTime = Date.now() + 2000);
        var ratio = Math.min(1, 1 - (move.endTime - Date.now()) / 2000);
        e.style.left = e.style.top = 100 * ratio + "px";
        if(ratio < 1) {
            setTimeout(move, 10);
        }
    })();
};

即時関数内の、

move.endTime || (move.endTime = Date.now() + 2000);

はどういう読み方をすればいいのでしょう？
それとendTimeとはなんなのでしょうか？ググっても出てこなくて心が折れそうです。

どうぞ宜しくお願いいたします。

Answer 1

この||は、if文の代わりです。||は、左側がtrueとされる値だと右側が実行されないので、ifの代わりにもなります。

// これと同じ意味
if(!move.endTime) move.endTime = Date.now() + 2000;

また、moveは関数オブジェクトですが、JavaScriptのオブジェクトには勝手なプロパティを追加することもできます。move.endTimeも勝手に追加したプロパティで、特に固有の意味はありません。もっとも、外側で変数を宣言したほうがわかりやすいとは思います。

Comments

[退会済みユーザー]

ありがとうございます！！

Answer 2

すぐ横にかいてありますね。

move.endTime = Date.now() + 2000

の個所でmove.endTimeが発生しています。

よくJSの書き方で

let a = b || 1

みたいな書き方を見たことがないでしょうか？

上記の場合 bが定義されていればbの値がaに入り、無ければ 1を設定するという意味になります。

したがって

move.endTime || (move.endTime = Date.now() + 2000);

はmove.endTimeが存在しなければ(move.endTime = Date.now() + 2000)を実行することで

move.endTime に Date.now() + 2000) の結果が代入されます。

Comments

[退会済みユーザー]

ありがとうございます！！

Answer 3

等価なコードはこんな感じ.

if(!move.endTime){
  move.endTime = Date.now() + 2000;
}; 

演算子||は先に左の式を評価して「偽」と判定されたら次に右の式を評価し, その結果からtrueもしくはfalseを返します. 今回は式を実行することに意義があるので, 戻り値を使っていません.

Comments

[退会済みユーザー]

ありがとうございます！！

Answer 4

||は論理演算子に分類されるORです。
これはC言語由来でして、論理演算子は多くの言語が||はOR、&&はANDという感じで採用しています。

JavaScriptに於いて、論理のORはa || bという書き方をします。
左から順番に確認していきます。

• if文に突っ込んでtrueと判定されるものの場合、左辺をそのまま返します
• if文に突っ込んでfalseと判定されるものの場合、右辺を返します

なお、a || b || cという風に3つ以上の値を繋げて書く事も可能です。

※これはJavaScript特有の動作であり、他の言語は挙動が違う可能性があります。
例えばPHPでは、OR演算子が出てきた時点で最終的に帰ってくる値はBoolean固定になりますので、値の初期化処理のつもりでこの書き方をすると、いつの間にかBoolean値に変換されてしまい思わぬバグの原因になる事もあります。

move.endTime || (move.endTime = Date.now() + 2000);

処理を行う方向にもってきましたかー…
OR演算子を使って処理を書くことも可能ですが、
これは少々お行儀が良くないのでプロジェクトによっては禁止される事もあります。

endTime

maisumakunさんが仰るように、オブジェクト・配列・関数は全てObjectというものから派生したもので、
好き勝手にプロパティを宣言して値を格納することが出来ます。
（Array.length等、既に名前が予約されていて使えないものもあります）

これもお行儀が良くないですね。

---

もし私が書くとしたら、
こんな感じに平易な書き方にしますかね。
あ、アニメーションでsetTimeoutはカクカクの糞アニメになるのでrequestAnimationFrameに差し替えてます。

onload = function() {
  var e = document.getElementById("e");
  var length = 2000;
  var end = Date.now() + length;
  var move = function () {
    var progress = 1 - (end - Date.now()) / length;
    e.style.left = e.style.top = (100 * Math.min(1, progress)) + "px";
    if (progress < 1) {
      requestAnimationFrame(move);
    }
  };
  move();
};