【JavaScript基礎】論理演算子【&&||】

AND演算子(&&)
OR演算子(||)
論理演算子応用
- hello関数の引数nameに値が入っているかどうかで値を変えたい場合（初期値の設定）
- 変数nameに値が入っている時にhello関数を呼び出したい時

AND演算子(&&)

例えば判定式が(x && y)なら x -> yのように、(x && y && z)なら x -> y -> zのように、左にあるものから順に評価していき、trueなら右にいき、falseならそこでfalseを返す。全てtrueなら一番右の値を返す。

const x = true;
const y = false;

// x -> y の順に評価される
console.log(x && y); // => false

// 左辺がfalseであるなら、その時点でfalseを返す
// xは評価されない
console.log(y && x); // => false

OR演算子(||)

AND演算子と同じように左から順に評価をしていき、trueならそこでtrueを返す。falseなら右へすすむ。最後までfalseなら一番右の値を返す。

const a = true;
const b = false;

// aがtrueなのでbは評価されない
console.log(a || b); // => true

// bはfalseなのでaを評価した結果を返す
console.log(b || a); // => true

論理演算子応用

hello関数の引数nameに値が入っているかどうかで値を変えたい場合（初期値の設定）

const hello = (name) => {
  name = name || 'Tom';
  console.log("hello " + name);
}

const myName = "";
hello(myName);// => hello Tom

const yourName = "Steve";
hello(yourName); // => hello Steve

これは変数nameがfalseの時に右へ進み、Tomがtrueとして返されるOR演算子の特性を利用している。
ES6だと以下の記法も可能。

const hello = (name = 'Tom') => {
  console.log("hello " + name);
}
hello(); // => hello Tom

変数nameに値が入っている時にhello関数を呼び出したい時

const hello = (name) => {
  console.log(name);
}

let name = 'Bob';
if(name) {
  hello(name); // => hello Bob
}

name = '';
if(name) {
  hello(name); // => 非表示
}

簡略化すると以下で書ける。

const hello = (name) => {
  console.log(name);
}

let name = 'Bob';
name && hello(name);  // => hello Bob

name = '';
name && hello(name);  // => 非表示

falseならその場でfalseを返すAND演算子の特性を利用している。