【JavaScript】&&と||を使ったif文のショートハンド【1行でif文を書こう!】

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!

今回は&&と||を使ったif文のショートハンドについて学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • &&と||を使って1行でif文が書ける
便利なショートハンドを使おう!

AND演算子、&&を使ったショートハンド

&&を使ったショートハンドでは、
条件式がtrueのとき”のみ”特定の処理を実行できます。

■ 構文

条件式 && trueの場合の処理;

このように記述することが出来ます。
にわかには信じられないと思いますが、
こちらの処理を試しに動かしてみてください。

【JavaScript】ログを出してみよう!【console.log】
この記事を読むとこのような事ができるようになります! ・ログが出せるようになる ・実際のWebサイトでログが見れるようになる ・環境構築不要でJavaScriptが学べるようになる
// 定数の宣言
const name = "サメハック";

// 条件式             && trueの場合の処理;
name === "サメハック" && console.log("名前はサメハックです");
// → 名前はサメハックです

このように期待のログが取れるようになりました。
ちなみに、条件式の結果がfalseの場合は何もしません。

// 定数の宣言
const name = "サメたろう";

// 条件式             && trueの場合の処理;
name === "サメハック" && console.log("名前はサメハックです");
// → ※何も出力されない

このようにtrueの場合だけ、処理を実行したい場合に
AND演算子&&を用いて記述します。

※AND ORについて復習したい方はこちらをご参照ください

【JavaScript】AND条件とOR条件を簡単解説!【&&, ||】
この記事を読むと・・・ AND条件がわかる OR条件がわかる

なお、みなさんがご存知のif文に当てはめるとこのようになります。

if (name === "サメハック") {
    console.log("名前はサメハックです")
} else {
    // なにもしない
}
&&を使うと、条件式がtrueの場合のみ、処理を実行するよ!

OR演算子、||を使ったショートハンド

||を使ったショートハンドでは、
条件式がfalseのとき”のみ”特定の処理を実行できます。

■ 構文

条件式 || falseの場合の処理;

このように記述することが出来ます。
こちらの処理も試しに動かしてみてください。

// 定数の宣言
const name = "サメたろう";

// 条件式            || falseの場合の処理;
name === "サメハック" || console.log("名前はサメハックではありません");
// → 名前はサメハックではありません

このように期待のログが取れるようになりました。
先ほどと同様に、条件式の結果がtrueの場合は何もしません。

// 定数の宣言
const name = "サメハック";

// 条件式            || falseの場合の処理;
name === "サメハック" || console.log("名前はサメハックではありません");
// → ※何も出力されない

このようにfalseの場合だけ、処理を実行したい場合に
OR演算子||を用いて記述します。

こちらも、みなさんがご存知のif文に当てはめるとこのようになります。

if (name === "サメハック") {
    // なにもしない
} else {
    console.log("名前はサメハックではありません")
}

以下のような記述もできますね。
考え方の話なので、なんとなく腑に落ちたほうで理解していただけると良いと思います。

if (!(name === "サメハック")) {
    console.log("名前はサメハックではありません")
} else {
    // なにもしない
}
||を使うと、条件式がfalseの場合のみ、処理を実行するよ!

おまけ:問題

問題1:変数scoreが70以上の時のみ「合格です」と出力してください。

問題2:変数userが”サメハック”でない時のみ「こんにちは、ゲストさん」と出力してください

まとめ

  • &&と||を使うと、if文のショートハンドが書けます
  • AND演算子&&を使うと、条件式がtrueの場合のみ処理を実行します
  • 条件式 && trueの場合の処理;
  • OR演算子||を使うと、条件式がfalseの場合のみ、処理を実行できます。
  • 条件式 || falseの場合の処理;
if文のショートハンドが書けるようになってえらい!
便利な書き方だけど、乱用しないように注意だよ!

問題の答え

問題1の答え

let score = 100;

score >= 70 && console.log("合格です");
// → 合格です

問題2の答え


const user = "サメぽん"

user === "サメハック" || console.log("こんにちは、ゲストさん");
// → こんにちは、ゲストさん

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました