スイーツ（笑）と呼ばないで!!

先日、ちょっと頼まれて、html5のvideoタグを使って、mp4を再生しているソースを見ました。

html5を使うとAPIを使ってJavaScriptでいろいろと操作する機会も増えますよねー

今日はそんなJavaScriptについてのお話です。

テーマは「プログラム言語の異文化交流・・」と題して、
PHPバリバリ書いてるPGがJavaScriptを書くとうっかりやってしまうこと、
について書きたいと思います。

この世の中にはたくさんのプログラミング言語があり、
細かい違いはもちろんありますが、
条件分岐があったりループ処理があったりと、
すごーーーくざっくり言うと、似たようなもの、だったりしますね。

なので、PHPで一人前にプログラムを書けたりすると、
「ああ、JavaScriptではこう書くのね、了解ー」
という軽い感じでガリガリ書いてしまうというのもよく聞く話です。

でも、やっぱり言語にはそれぞれ固有の独自の仕様があったりするわけで、
そこを知らないと、それが理由でバグの温床になったりすることがあります。

JavaScriptの仕様で、意外と知られていないのがhoistingというやつです。
日本語だと「変数の巻き上げ」とか言ったりしますね。

以下、シンプルな例を用いて説明してみます。

var name=“yamada";　//グローバル変数nameを宣言し代入。

function printName(){
　console.log(name); //変数nameの中身をコンソールに出力。
}

printName(); //上で定義した関数printNameを実行。

このソースの実行結果は、yamadaと出力されます。
これはたぶんPHPプログラマの人もとても直感的に理解できると思います。

では、console.log(name);の下に1行だけ追加した以下のソースはどうなるでしょうか。

var name=“yamada";　//グローバル変数nameを宣言し代入。

function printName(){
　console.log(name); //変数nameの中身をコンソールに出力。
　var name=“tanaka”; //ローカル変数nameを宣言し代入。
}

printName(); //上で定義した関数printNameを実行。

普段PHP書いていて、JavaScriptも同じような感覚で書いているPGの方だと、もしかすると

「え? そのままグローバル変数のname読むから、結果はyamadaで変わらないでしょ?そもそも1行追加したの出力の下の行だし・・」

という回答をするかもしれません。

でも、JavaScriptでは、その期待は裏切られることになります。

実は、上記のJavaScriptは内部的にはhoisting(=変数の巻き上げ)により、

var name=“yamada";　//グローバル変数nameを宣言し代入。

function printName(){
　var name;
　console.log(name); //変数nameの中身をコンソールに出力。
　name=“tanaka”; //ローカル変数nameを宣言し代入。
}

printName(); //上で定義した関数printNameを実行。

と同じように解釈されます。

つまり、初期値の代入部分はそのままで、変数の宣言だけそのスコープ(この場合function)の先頭に巻き上がるんですねー

結果、上記ソースの出力は、初期化されていない変数の出力ということで「undefined」となります。

さて、JavaScriptにはこのようなhoisting(変数の巻き上げ)という仕様があるため、
そのスコープの途中で変数を宣言するのはバッド・プラクティスで、
そのスコープの最初でまとめて宣言するのがベスト・プラクティスと言われます。

つまり、functionの中であれば、functionの中のスコープで用いる変数はすべてそのスコープの頭で宣言すべきということですね。

言語によっては、変数の宣言はなるべく使うところの近くで行いましょう、という文化があるものもあります。

ただ、JavaScriptの場合は、そうではない、ということですね。

たまたま見たソースがスコープの途中で変数がたくさん宣言されていて、
「ああ、わかるわかる・・多くの人が通る道だな」
と思い、記事にしてみることにしました。

たくさんの言語があって、たくさんの文化があって、
なかなか深いところまで理解するのは大変です。

私も頑張らないとなーと思う今日このごろです^^;;;;

[0回]

• プログラミング
• COMMENT：0