論理演算子
JavaScript には、|| (OR:論理和)、&& (AND:論理積)、! (NOT:論理否定)、?? (Null合体) *ES2020 の 4 つの論理演算子があります。
|| (OR:論理和)
if 文の中で条件のいずれかが真(true)であるかを確認する。
let x = 9 ; if ( x < 10 || x > 20 ) { console.log( 'TRUE' ) ; } else { console.log( 'FALSE' ) ; } // TRUE
JavaScript 特有の || (OR:論理和) の使い方。
result = value1 || value2 || value3 ;
value1 、value2 、value3 を Boolean に変換して最初の true を探します。
- value1 が true であれば value1 を result へ渡して停止します。
- value2 が true であれば value2 を result へ渡して停止します。
- value1 と value2 が false であれば value3 を result へ渡します。
falsy (偽値)
JavaScript の Boolean への変換例 falsy (偽値)
console.log( Boolean(0) ) ; // false *** console.log( Boolean(1) ) ; // true console.log( Boolean(2) ) ; // true console.log( Boolean(3) ) ; // true console.log( Boolean('') ) ; // false *** console.log( Boolean('A') ) ; // true console.log( Boolean('B') ) ; // true console.log( Boolean(null) ) ; // false *** console.log( Boolean( undefined ) ) ; // false *** console.log( Boolean( NaN ) ) ; // false ***
0 (数値型)、” (文字列型空文字)、 null、undefined 、NaN のときに false となります。
このように false 以外にも false と判定される値をのことを falsy (偽値)といいます。
この falsy を利用して、値が設定されていないときのみ初期値を設定する等のロジックに使われます。
function ini(val) { let ret = val || 'Initial value' ; // val が false なら 'Initial value' を返す。 return ret ; } console.log( ini( null ) ); // Initial value console.log( ini( undefined ) ); // Initial value console.log( ini( '' ) ); // Initial value console.log( ini( 'Hello World' ) ); // Hello World console.log( ini( 0 ) ); // Initial value console.log( ini( 10 ) ); // 10
?? (Null合体)
?? (Null合体)*ES2020 を使うと null と undefined のみが false となるので結果が変わります。
function ini(val) { let ret = val ?? 'Initial value' ; // val が null か undefined なら 'Initial value' を返す。 return ret ; } console.log( ini( null ) ); // Initial value console.log( ini( undefined ) ); // Initial value console.log( ini( '' ) ); // '' 空文字が返る *** console.log( ini( 'Hello World' ) ); // Hello World console.log( ini( 0 ) ); // 0 *** console.log( ini( 10 ) ); // 10
” (空文字) と 0(数値型)がそのまま返ります。
&& (AND:論理積)
if 文の中で条件のいずれもが真(true)であるかを確認する。
let x = 11 ; if ( x > 10 && x < 20 ) { console.log( 'TRUE' ) ; } else { console.log( 'FALSE' ) ; } // TRUE
JavaScript 特有の && (AND:論理積) の使い方。
result = value1 && value2 && value3 ;
value1 、value2 、value3 を Boolean に変換して最初の false を探します。
- value1 が false であれば value1 を result へ渡して停止します。
- value2 が false であれば value2 を result へ渡して停止します。
- value1 と value2 が false であれば value3 を result へ渡します。
function ini(val) { let ret = val && 'Initial value' ; // val が true なら 'Initial value' を返す。 return ret ; } console.log( ini( null ) ); // null console.log( ini( undefined ) ); // undefined console.log( ini( '' ) ); // '' 空文字 console.log( ini( 'Hello World' ) ); // Initial value *** console.log( ini( 0 ) ); // 0 console.log( ini( 10 ) ); // Initial value
! (NOT:論理否定)
true を false に false を true に反転します。
function ini(val) { let ret = !val ; return ret ; } console.log( ini( null ) ); // true console.log( ini( undefined ) ); // true console.log( ini( '' ) ); // true console.log( ini( 'Hello World' ) ); // false console.log( ini( 0 ) ); // true console.log( ini( 10 ) ); // false
参考リンク
MDN 開発者向けのウェブ技術 > Null 合体 (??)
MDN 開発者向けのウェブ技術 > 論理和 (||)
MDN 開発者向けのウェブ技術 > 論理積 (&&)
MDN 開発者向けのウェブ技術 > 論理否定 (!)
MDN 開発者向けのウェブ技術 > 式と演算子
MDN 開発者向けのウェブ技術 > JavaScript「再」入門