論理和演算子(||)について　　 〜または〜

ECMAScript の仕様書には次のような手順が書かれているようです。非常に解りやすい。

      1　左オペランドを評価する
　　　2　左オペランドの結果を Boolean に変換
　　　3　変換結果が true なら、左オペランドの評価結果を返す
　　　4　右オペランドを評価
　　　5　右オペランドの評価結果を返す

■ポイントは「Boolean に変換」というところ。どのように変換するか？。論理判定の基準は
　　　・trueになる値　･･･オブジェクトが存在、空で無い文字列、0でない数値、true
　　　・falseになる値　･･･オブジェクトが存在しない、空文字列 ("")、数値の0、false、
　　　　　　　　　　　　　null、undefined(未定義データ)、NaN

■具体的な例で見てみよう！
構文･･･ ( 左辺式 || 右辺式 )

 var a = 3;
 var b = "JavaScript";
 var c = "";
 var d = 0;
 x = ( a > 1 || a < 5)　　　// 左辺式を評価するとtrue、右辺式は評価しないで左辺式の評価結果＜true＞を返す
                                         alert( a > 1 || a < 5) ･･･→  
 x = ( a > 5 || a  == 3 )　　// 左辺式を評価するとfalse、なので右辺式の評価結果＜true＞を返す
　　　　　　　　　　　　　　　　　      alert(a > 5 || a == 3) ･･･→  
 x = ( a > 5 || 3 )　　　      // 左辺式を評価するとfalse、なので右辺式の評価結果＜3＞を返す
　　　　alert(a > 5 || 3) ･･･→    alert(a > 5 || a + 3) ･･･→  
 x = ( a || a  < 5 )　　　    // 左辺式を評価しBoolean値に変換するとtrue、なので左辺式の評価結果＜3＞を返す
　　　　alert(a || a < 5) ･･･→    alert(a + 2 || a < 5) ･･･→  
 x = ( b || b  ==3 )　// 左辺式を評価しBoolean値に変換するとtrue、なので左辺式の評価結果＜JavaScrip＞を返す
　　　　alert(b || b == 3) ･･･→    alert(b == a || b) ･･･→  
 x = ( c || b + a )　　// 左辺式を評価しBoolean値に変換するとfalse、右辺式の評価結果＜JavaScrip3＞を返す
　　　　alert(c || b + a) ･･･→    alert(c || "こんにちは！" + b) ･･･→  
 x = ( c || d )　// 左辺式を評価しBoolean値に変換するとfalse、右辺式の評価結果＜0＞を返す
   　　 (d は数値の 0 でboolean変換するとfalseだが、この場合変換しないで評価結果そのまま)
　　　　alert(ｃ || d ) ･･･→    alert(ｃ || d + a) ･･･→  
 x = ( d || c )　// 左辺式を評価しBoolean値に変換するとfalse、右辺式の評価結果の空文字のままを返す
   　　 (c は空文字 でboolean変換するとfalseだが、この場合変換しないで評価結果そのまま)
　　alert(d || c ) ･･･→  alert(d || c + d) ･･･→ (右辺の評価結果が返る）
 x = ( document.getElementById("samp") || b )　// 左辺式を評価し、このページ内に id="samp" を持つHTML要素が
　　　　　　　　　存在する。Boolean値に変換するとtrueなので、左辺式の評価結果を返す
 　　alert(document.getElementById("samp") || b )･･･→  
　　 alert(document.getElementById("xyz") || b) ･･･→  
　　　（このページ内には id="xyz" をもつHTML要素は存在しない。falseに変換され、右辺式の評価結果が返される）

■（今現在の、私流の解釈　････変わるかも　（●＾o＾●）
上は　x =　の代入式の例です。この場合、booleanへの変換値でなく評価結果が返される（true／falseも含め）。
しかし、〜または　〜(||)演算子は if(a || b) のような条件式でよく使われる。この場合は、左辺も右辺もboolean変換された値が返される。そうでなければ条件判断できないのではないでしょうか？。だからよく使われる「左辺または右辺のどちらかがtrueであればtrueを、それ以外はfalseを返す」という説明でよい。

（このあたりの詳しい解説をネットで探したが、今現在見つかっていません！、どっかないかァ）

Sample

いろいろ試してみました















　　　(変数の初期値設定によく使われる。y1に値が無い場合、5を初期値とする。

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var a = 3;
var b = "JavaScript";
var c = "";
var d = 0;
function Test(n){
　　if(n == 1)alert(a > 1 || a < 5);
　　if(n == 2)alert(a > 5 || a == 3);
　　if(n == 3)alert(a > 5 || 3);
　　if(n == 4)alert(a > 5 || a + 3);
　　if(n == 5)alert(a || a < 5);
　　if(n == 6)alert(a + 2 || a < 5);
　　if(n == 7)alert(b || b == 3);
　　if(n == 8)alert(b == a || b);
　　if(n == 9)alert(c || b + a);
　　if(n == 10)alert(c || "こんにちは！" + b);
　　if(n == 11)alert(c || d);
　　if(n == 12)alert(c || d + a);
　　if(n == 13)alert(d || c);
　　if(n == 14)alert(d || c + d);
　　if(n == 15)alert(document.getElementById("samp") || b);
　　if(n == 16)alert(document.getElementById("xyz") || b);
}

function Sample1(){
　　var y1 = "";
　　var x1 = y1 || 5;
　　alert(x1);
}
function Sample2(){
　　var x1 = 5;
　　var y1 = 3;
　　return x1 + y1;
}
//--></script>
</head>

<body>
<p>■具体的な例で見てみよう！<br>
構文･･･ ( 左辺式 || 右辺式 )<br>
<button onclick="Test(1)">やってみよう！</button>
<button onclick="Test(2)">やってみよう！</button>
<button onclick="Test(3)">やってみよう！</button>
<button onclick="Test(4)">やってみよう！</button>
<button onclick="Test(5)">やってみよう！</button>
<button onclick="Test(6)">やってみよう！</button>
<button onclick="Test(7)">やってみよう！</button>
<button onclick="Test(8)">やってみよう！</button>
<button onclick="Test(9)">やってみよう！</button>
<button onclick="Test(10)">やってみよう！</button>
<button onclick="Test(11)">やってみよう！</button>
<button onclick="Test(12)">やってみよう！</button>
<button onclick="Test(13)">やってみよう！</button>
<button onclick="Test(14)">やってみよう！</button>
<button onclick="Test(15)">やってみよう！</button>
<button onclick="Test(16)">やってみよう！</button>

<p>いろいろ試してみました</p>
<button onclick="alert(1 || 0);"></button>
<button onclick="alert(0 || 1);"></button>
<button onclick="alert(2 || 3);"></button>
<button onclick="alert(2<1 || 3);"></button>
<button onclick="alert(2<1 || 3 ==1)</button>
<button onclick="alert(2<1 || 3+1);"></button>
<button onclick="alert(0 || undefined);"></button>
<button onclick="alert(undefined || 0);"></button>
<button onclick="alert(undefined || undefined);"></button>
<button onclick="alert(null || 0);"></button>
<button onclick="alert(0 || null);"></button>
<button onclick="alert(NaN || 3);"></button>
<button onclick="alert('日本' || 3);"></button>
<button onclick="Sample1();"></button>
　　　(変数の初期値設定によく使われる。y1に値が無い場合、5を初期値とする。
<button onclick="alert(Sample2() || 3);">test1：＜alert(Samplet2() || 3)＞</button>
</p>　　

(最終更新:12/12/23)
フレーム構成になっています･･･＜[ホーム]　>>　[HTML整理ノート]＞