この章では、いくつかの一般的な JavaScript のミスを示します。
JavaScript プログラムは、if 文で比較演算子(==)の代わりに誤って代入演算子(=)を使用すると、予期しない結果が生じます。
次の if 文は、x は 10 と等しくないため、(期待通りに)false を返します:
var x = 0;
if (x == 10)
Try it Yourself »
次の if 文は、10 が true であるため、(多分期待に反して)true を返します:
var x = 0;
if (x = 10)
Try it Yourself »
次の if 文は、0 が false であるため、(多分期待に反して)false を返します:
var x = 0;
if (x = 0)
Try it Yourself »
代入は常に代入の値を返します。(訳注:???何を言いたいやら)
通常の比較では、データ型は重要ではありません。次の if 文は true を返します;
var x = 10;
var y = "10";
if (x == y)
Try it Yourself »
厳密な比較では、データ型は重要です。この if 文は false を返します:
var x = 10;
var y = "10";
if (x === y)
Try it Yourself »
switch 文が厳密な比較を使用していることを忘れるのは共通した間違いです:
次の場合の switch はアラートを表示します:
var x = 10;
switch(x) {
case 10: alert("Hello");
}
Try it Yourself »
次の場合の switch はアラートを表示しません:
var x = 10;
switch(x) {
case "10": alert("Hello");
}
Try it Yourself »
加算は、数値を足すことです。
連結は、文字列を足すことです。
JavaScript では、両方の演算で同じ + 演算子を使用します。
これにより、数値を数値として加算するのと、数値を文字列として追加するのとでは、異なった結果になります:
var x = 10 + 5; //
the result in x is 15
var x = 10 + "5";
// the result in x is "105"
Try it Yourself »
2つの変数を加算すると、結果を予測するのが難しい場合があります:
var x = 10;
var y = 5;
var z = x + y;
// the result in z is 15
var x = 10;
var y = "5";
var z =
x + y;
// the result in z is "105"
Try it Yourself »
JavaScript のすべての数値は、64ビット浮動小数点数(Float)として格納されます。
JavaScript を含むすべてのプログラミング言語は、浮動小数点の値での精度には難点があります:
var x = 0.1;
var y = 0.2;
var z = x + y
// the result in z will not be 0.3
Try it Yourself »
上記の問題を解決するには、乗算と除算が手助けになります。
JavaScript では、文を2行に分割することができます:
しかし、文字列の途中で文を分割することはできません:
文字列の途中で文を分割する必要がある場合は "バックスラッシュ" を使用しなければなりません:
セミコロンが誤っているため、このコードブロックは x の値に関係なく実行されます:
if (x == 19);
{
// code block
}
Try it Yourself »
行末で自動的に文を閉じるのは、デフォルトの JavaScript の動作です。
このため、次の2つの例は同じ結果を返します:
JavaScript では、文を2行に分割することもできます。
従って、例3も同じ結果を返します:
しかし、次のように2行に return 文を分割するとどうなりますか?
この関数は undefined を返します!
どうして? JavaScriptは、意味を次のように解釈します:
文が次のように不完全な場合:
var
JavaScript は、次の行を読むことによって文を完成させようとします:
power = 10;
しかし、この文は完了しているので:
return
るJavaScript は自動的に次のように閉じます:
return;
これは、JavaScript ではセミコロンで文を閉じる(終了する)のがオプションであるために発生します。
それは完全な文なので、JavaScript は行末の return ステートメントを閉じます。
return 文は決して分割してはいけません。
多くのプログラミング言語では、名前付きインデックスで配列をサポートしています。
名前付きインデックスを持つ配列は、連想配列(またはハッシュ)と呼びます。
JavaScript は名前付きインデックスを持つ配列をサポートしていません。
JavaScript では、配列は番号付きインデックスを使用します。
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John"
Try it Yourself »
JavaScriptでは、オブジェクトは名前付きインデックスを使用します。
名前付きインデックスを使用すると、配列にアクセスするときに、JavaScript は配列を標準オブジェクトに再定義します。
自動再定義の後、配列メソッドとプロパティは未定義または不正確な結果を生成します:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined
Try it Yourself »
points = [40, 100, 1, 5, 25, 10,];
Some JSON and JavaScript engines will fail, or behave unexpectedly.
points = [40, 100, 1, 5, 25, 10];
person = {firstName:"John", lastName:"Doe", age:46,}
Some JSON and JavaScript engines will fail, or behave unexpectedly.
person = {firstName:"John", lastName:"Doe", age:46}
JavaScript では、null はオブジェクト用で、undefined は変数、プロパティ、メソッド用です。
null にするには、オブジェクトを定義する必要があります。それ以外の場合は undefined です。
オブジェクトが存在するかどうかをテストする場合は、オブジェクトが未定義の場合はエラーがスローされます:
if (myObj !== null && typeof myObj !== "undefined")
Because of this, you must test typeof() first:
if (typeof myObj !== "undefined" && myObj !== null)
JavaScript は各コードブロックに対して新しいスコープを作成しません。
多くのプログラミング言語で当てはまりますが、JavaScriptでは当てはまりません。
新しいJavaScript開発者の間で、次のコードが undefined を返すと信じるのは間違いです: