オブジェクト指向初心者の私がJavaScriptにも再入門 「変数の扱い編」 〜JavaScriptパターン 学習2日目【逃げメモ】〜

2016/5/31 タイトルを変更しました。

必須パターン

グローバル変数はできるだけ使用しない

グローバル変数はどこからでもアクセスできる変数。そこに適当な変数を作っていると、複数人でコーディングを行ったり、どこかで拾ってきたコードを使用したりすると、予期せぬ所でその同じ変数名が使われていて正しく動作しないといった問題が起きる事があります。

そういう事を防ぐために、やたらめったらにグローバル変数は使用しないように心がける必要があります。

varで宣言する

JavaScriptは変数の宣言の時に、特に接頭に何もおかなければ、それはすべて グローバル変数として宣言した事となります。

function result(){
    ret = "結果がここに";
    return ret;
}

console.log(result());
console.log(ret);

のように書いたら値がretから値が取れる、とありましたが、ブラウザで表示してみた所ReferenceErrorと出ましたので、現在では暗黙的にグローバル変数となることはないのかな、と思いますが、接頭にvarを書いて宣言するクセを身につけておいた方が良いかなと思います。

function result(){
    var ret = "結果がここに";
    return ret;
}

console.log(result());
console.log(ret);

単独varパターン

変数を宣言する時にイチイチ一つ一つにvarを書くのは面倒な時にまとめて書くことができます。宣言が上から為されていくので、途中のsumも数値がキチンと入ります。

function func1 (){
    var i,
        l,
        a = 2,
        b = 3,
        sum = a + b;

        console.log(sum);
}

func1(); //5

巻き上げ

同一スコープ({}の中)でvarが散在していると、自動的にスコープの頭で一括して 宣言だけが行われるみたいです。ただ値の代入は書かれた所で行われるので、以下のコードのような事になる。このような挙動を 巻き上げという。

function func2 (){
    var i,
        l,
        a = 2,
        sum = a + b;

        console.log("sum" + sum); //NaN

        var b = 3;

        console.log("a:" + a + " b:" + b); // a:2 b:3
}

func2();

sum = a + b;の時点でbは宣言されていないのだけれども、スコープ内の下の方で宣言が行われているため宣言だけはスコープの開始時に行われている。ただ、値が入っていないので、sum = a + bの時点では、a + undefinedとなり、NaNが返ってくる事になります。

スコープ内の下の方で宣言が行われなかった場合(var b = 3;が無かった場合)は、ReferenceErrorが起こり、宣言されていないエラーとして扱われます。

forループ

配列や配列に似たオブジェクトに対してループをかけたい時に使います。

対象

• 配列
• HTMLCollection

HTMLCollectionはDOM標準以前から導入されたオブジェクトで、document.getElementsByName()やdocument.getElementsByClassName()やdocument.getElementsByTagName()で返ってくるオブジェクトのことです。

下記の方法が一般的な書き方ですが、forが回る毎にmyarray.lengthが呼ばれ、DOMを毎度舐めるので、処理が重たくなります。

for (var i = 0; i < myarray.length; i++){
	//処理
}

それを避けるために、for文の宣言に新たにmaxという変数に配列の個数を1度だけ取っておき、判定部分はそのmaxの値と比較するだけとなるので速度アップの向上が見込まれるという事です。

for (var i = 0, max = myarray.length; i < max; i++){
	//処理
}

for-inループ

配列以外のオブジェクトの繰り返し処理に向いているもの。順序が取れないもの（indexで管理されていない等）に使えます。

hasOwnPropertyは自分自身の持ち物であればtrueを返します。この仕組みを利用して、プロトタイプで追加されたプロパティは除外する一文を入れてあります。

//オブジェクト

//オブジェクト
var devices = {
    idevice:4,
    android:2,
    eink:2
};
//すべてのオブジェクトにメソッドを追加
Object.prototype.clone = function(){};

//オブジェクトのループ。ループ対象がオブジェクト自身の持ち物であれば出力
for (device in devices) if (devices.hasOwnProperty(device)) {
    console.log(device,devices[device]);
}
//idevice - 4
//android - 2
//eink - 2

evalは避ける

eval()は引数に文字列でJavaScriptの文章が入っているものを実行してしまう脆弱性の元となるようなものなので、絶対に使わないようにしましょう。

setInterval()なども文字列で実行できてしまったりするが、それもよろしくないので避けましょう。

リンク

次回はこちら

オブジェクト指向初心者の私がJavaScriptにも再入門 「オブジェクトとコンストラクタ編」 〜JavaScriptパターン 学習3日目【逃げメモ】〜

前回はこちら

オブジェクト指向初心者の私がJavaScriptにも再入門 「JavaScriptの基本編」 〜JavaScriptパターン 学習1日目【逃げメモ】〜