2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptのif文を三項演算子を「使わずに」一行で書く

Last updated at Posted at 2021-01-04

三項演算子を使ってif文を一行にするというTipsはよく見ます。しかし、僕はelseのない通常のif文すらも一行にしたい…といつも思っていました。これが実はいとも簡単に実現できたので、ここに残したいと思います。

#まずは基本フォーマットから
通常のif文はこちら。

三項演算子を「使わない」基本フォーマット
if (a === b) {
  console.log("Yesなら処理");
} else {
  console.log("Noなら処理");
}

これを三項演算子を使って一行にしようとすると、下記のようになります。

三項演算子の基本フォーマット
a === b ? console.log("Yesなら処理") : console.log("Noなら処理");

#elseのない通常のif文を一行で書く

三項演算子を使わずに1行で書く
a === b && console.log("Yesなら処理");

え?って思うかも分かりませんが、(条件文)&&(処理) とするだけでOK。この「&&」はif文の条件文内で、複数条件が「全て正の時」とする際に使います。しかし、本当の意味は、「左辺が正の時、右辺を処理する」です。よって、上記の条件式では、「a === b」が正なら、「console.log("Yesなら処理")」を処理する、という意味になり、逆に「a === b」が誤なら、「console.log("Yesなら処理")」を処理しません。

実はこれには応用が効きます。「&&」を、おなじみの「||」にすれば、逆の意味、つまり「左辺が誤の時、右辺を処理する」となります。

三項演算子を使わなずに1行で書く
// a === b が誤なら (a !== b なら) console.log("Noなら処理")を処理する
a === b || console.log("Noなら処理");

便利ですね!これでかなりコードを短く、かつシンプルで分かりやすくすることができます。最近流行りのReact.jsでも同様に使えます。

2
3
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?