【JavaScript】変数と参照の振り返り⑤ AND条件とOR条件の応用

はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

目的

• 変数についての理解を深める

本題

1.AND条件とOR条件の応用

例

function hello(name){
  console.log("Hello" + name);
}
// Hello Bobと表示される
hello("Bob")
// 引数がない場合、Hello undefinedと表示される
hello()

これを避けるためにif文を使って、該当しなかった場合の処理を追記する。

function hello(name){
  // nameがundifine = falseな値である場合にTomと出力されればいいので
  // NOT演算子を条件式に加える
  if(!name){
    name = "Tom"
  }
  console.log("Hello" + name);
}
// 結果、ここでは「Hello Tom」と出力される
hello()

この書き方を更に簡略化するためにAND条件、OR条件で書き換える。

function hello(name){
  // OR条件の場合、trueな値が見つかった時点で出力する
  name = name || "Tom";
  console.log("Hello" + name);
}
// nameはundefined(空欄)なのでfalse,結果Tomが出力される
hello()
// ここではnameに”Bob”が入っているので上記のnameがtrueになった時点で出力されている
hello("Bob")

// ES6からはデフォルト引数が設けられるため以下でも同じ意味になる
function hello(name = "Tom"){
  // name = name || "Tom";
  console.log("Hello" + name);
}
// nameがTomじゃないからBobが出力される
hello("Bob")

OR条件を使う際の注意点

falseな場合に初期値を返すが、”数値”である場合は注意が必要

function hello(name){
  name = name || "Tom";
  console.log("Hello" + name);
}
// この場合、「Hello 0」と出力したいが0はfalseな値なのでTomと出力される
hello(0)

応用例

function hello(name){
  name = name || "Tom";
  console.log("Hello" + name);
}
hello()

let name = "Bob"
if(name){
  hello(name);
}
// nameがtrueである場合、Bobを呼ぶようにしたい

if文でも書くことができるが、AND条件を用いて簡略化すると、以下の通りになる。

function hello(name){
  name = name || "Tom";
  console.log("Hello" + name);
}
hello()
let name = "Bob"
// 下記のように記述すると最初のnameがfalseの場合、次のhello(name)は実行されない
name && hello(name)

function hello(name){
  name = name || "Tom";
  console.log("Hello" + name);
}
hello()
// 試しに下記のように、"Bob"を消してみると
let name 
// nameはfalseになるので、上記のhello()のみになる
name && hello(name)

今日はここまで！

参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム