Open1
【React JSX】論理演算子「&&」による処理分岐の用法
yu.miyoshi概要
論理演算子「&&」は、基本的に「かつ」や「アンド」という意味合いで使用されるが、JSXでよくみるBooleanの記法についてまとめてみる
詳細
使用法について、以下の6種類にまとめてみた
sample
// 1. 一般的な AND の使い方
var val1 = true;
var val2 = false;
var res = val1 && val2;
console.log(res); // false と表示される
// 2. 一般的ではない AND の使い方
var val1 = 5;
var val2 = 10;
var res = val1 && val2;
console.log(res); // 10 と表示される
// 2.1 一般的ではない AND の使い方
var val1 = 10;
var val2 = 5;
var res = val1 && val2;
console.log(res); // 5 と表示される
// 3. 一般的ではない AND の使い方をした値の表示
var flg = false;
var val = flg && 'test';
console.log(val); // false と表示される
// 4. 一般的ではない AND の使い方をした値の表示
var flg = true;
var val = flg && 'test';
console.log(val); // test と表示される
// 5. 一般的ではない AND の使い方をした値の表示
var flg1 = true;
var flg2 = true;
var flg3 = false;
var val = flg1 && flg2 && flg3 && 'test';
console.log(val); // false と表示される
// 6. 一般的ではない AND の使い方をした値の表示
var flg1 = true;
var flg2 = true;
var flg3 = true;
var val = flg1 && flg2 && flg3 && 'test';
console.log(val); // test と表示される
1は一般的なANDの使用方法
val1, val2をAND条件で評価した値をログに出力
2系は「&&」の左辺を評価し、trueなので、左辺をresに代入し出力
3は「&&」の左辺がfalseのため、右辺評価をしない
4は「&&」の左辺がtrueのため、valにtestを代入し出力
5はflg3がfalseのためtestまでたどり着かないので、falseが出力
６はflg1,2,3ともにtrueなので、valにtestを代入し出力
結論
「&&」の左辺がtrueの場合、右辺を実行と考えて良い。
6は、以下の記述に変更してあげると、よりわかりやすい
6(別記載)
var flg1 = true;
var flg2 = true;
var flg3 = true;
var val =
flg1 &&
flg2 &&
flg3 && 'test';
console.log(val); // test と表示される
以下のAとBの記述は同義
sample2
// flg は boolean だとする
// A
var res = flg1 && flg2 && flg && value1;
// B
var res = null;
if (flg1 && flg2 && flg3) {
res = value1;
}
参考サイト