サンプルプログラムにある処理の意味がわからない

Question

Vue.jsの勉強で入門系のサイト　vue.jsでテーブルの列をソート(並べ替え)する方法 | アールエフェクト
のプログラムを真似して書いていたら、

methods: {
  sortBy(key) {
    this.sort_key === key
      ? (this.sort_asc = !this.sort_asc)
      : (this.sort_asc = true);
    this.sort_key = key;
  },
},

という記述がありました。

三行目までは厳密判定に見えるのですが、
四行目からの"?"や":"の意味がわかりません。

条件分岐のような気がするのですが、"if"や"switch"のような宣言も見られませんし、
説明も載っていないので、混乱しています。

パッとみた感じ便利そうなので使ってみたいのですが、
これはどういう処理なのでしょうか。

Answer 1

動作するけどあまり見ないコーディングかなあ、という気がします。
自分だったら…

this.sort_key === key
      ? (this.sort_asc = !this.sort_asc)
      : (this.sort_asc = true);

↓

this.sort_asc = (this.sort_key === key) ? !this.sort_asc : true;

と思ったけど調べたらわりと使ってる人がいたので好みの問題かもしれません。
だったら素直に if文使えばいいのにって気もしますが。

if (this.sort_key === key) this.sort_asc = !this.sort_asc;
    else this.sort_asc = true;

Answer 2

多分、三項演算子だと思います。

ヒント1: MDN
ヒント2: javascript.info

Comments

[退会済みユーザー]

そのまましっかり載ってました。
ありがとうございました。