JavaScript 一般的な誤り

❮ 前章へ 次章へ ❯

この章では、いくつかの一般的な 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 »

代入は常に代入の値を返します。(訳注:???何を言いたいやら)


緩い(Loose)比較を期待する

通常の比較では、データ型は重要ではありません。次の 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 »

上記の問題を解決するには、乗算と除算が手助けになります。

var z = (x * 10 + y * 10) / 10;       // z will be 0.3
Try it Yourself »

JavaScript 文字列の分割

JavaScript では、文を2行に分割することができます:

例 1

var x =
"Hello World!";
Try it Yourself »

しかし、文字列の途中で文を分割することはできません:

例 2

var x = "Hello
World!";
Try it Yourself »

文字列の途中で文を分割する必要がある場合は "バックスラッシュ" を使用しなければなりません:

例 3

var x = "Hello \
World!";
Try it Yourself »

誤ったセミコロン

セミコロンが誤っているため、このコードブロックは x の値に関係なく実行されます:

if (x == 19);
{
    // code block 
}
Try it Yourself »

リターン文の分割

行末で自動的に文を閉じるのは、デフォルトの JavaScript の動作です。

このため、次の2つの例は同じ結果を返します:

例 1

function myFunction(a) {
    var power = 10 
    return a * power
}
Try it Yourself »

例 2

function myFunction(a) {
    var power = 10;
    return a * power;
}
Try it Yourself »

JavaScript では、文を2行に分割することもできます。

従って、例3も同じ結果を返します:

例 3

function myFunction(a) {
    var
    power = 10; 
    return a * power;
}
Try it Yourself »

しかし、次のように2行に return 文を分割するとどうなりますか?

例 4

function myFunction(a) {
    var
    power = 10; 
    return
    a * power;
}
Try it Yourself »

この関数は undefined を返します!

どうして? JavaScriptは、意味を次のように解釈します:

例 5

function myFunction(a) {
    var
    power = 10; 
    return;
    a * power;
}
Try it Yourself »

説明

文が次のように不完全な場合:

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}

Undefined は Null ではありません

JavaScript では、null はオブジェクト用で、undefined は変数、プロパティ、メソッド用です。

null にするには、オブジェクトを定義する必要があります。それ以外の場合は undefined です。

オブジェクトが存在するかどうかをテストする場合は、オブジェクトが未定義の場合はエラーがスローされます:

Incorrect:

if (myObj !== null && typeof myObj !== "undefined") 

Because of this, you must test typeof() first:

Correct:

if (typeof myObj !== "undefined" && myObj !== null) 

ブロックレベル・スコープの期待

JavaScript は各コードブロックに対して新しいスコープを作成しません

多くのプログラミング言語で当てはまりますが、JavaScriptでは当てはまりません

新しいJavaScript開発者の間で、次のコードが undefined を返すと信じるのは間違いです:

for (var i = 0; i < 10; i++) {
    // some code
}
return i;
Try it Yourself »

❮ 前章へ 次章へ ❯