背景
過去にJavaScriptを使って動的にグローバル変数を呼び出そうとした際、とある初歩的な内容で困ったことが印象的だったため、自分への備忘録を兼ねて記事に残すことにした。
例題
以下のようなコードを実装しようとしていた。
// 変数はグローバル変数とする。
var a1 ="aa1";
var a2 ="aa2";
var a3 ="aa3";
・
・
・
var a98 ="aa98";
var a99 ="aa99";
var a100 ="aa100";
var array = ["aa0"];
for (var x = 1; x <= 100; x++) {
//変数xを使って、 array配列に変数a1~a100の値を順番に入れたい。
//最終結果：array = ["aa0","aa1","aa2","aa3",・・・,"aa98","aa99","aa100"]
//ただし、array.push(a1); ・・・array.push(a100); のように、
//a1~a100の変数を代入するコードを1行ずつ直接記載するのは無しとする。
}
困った理由
今までは「特定のタイミングで特定のグローバル変数を指定して呼び出す」ことが確定していたため、該当のグローバル変数を直接指定することで解決できていた。
しかし、今回のようにループ条件(変数xの値)のみで動的に特定のグローバル変数を呼び出す方法が不明だったため、とても困った。
※「array.push(a1);」 などを1つずつ書くのはメンテナンスが大変そうであり、可能な限り数行で抑えたかった。
解答例
以下のように記載することで対応可能。
// 変数はグローバル変数とする。
var a1 ="aa1";
var a2 ="aa2";
var a3 ="aa3";
・
・
・
var a98 ="aa98";
var a99 ="aa99";
var a100 ="aa100";
var array = ["aa0"];
for (var x = 1; x <= 100; x++) {
//呼び出したい変数名を文字列で確保する変数を作成
var variablename = "a" + x;
//変数名から該当変数を呼び出す
array.push(window[variablename]);
}
解説
「window[変数名]」で、「変数名」を持つ変数の値を参照しているが、これはJavaScriptのグローバル変数の仕組みがカギとなっている。
基本、グローバル変数を宣言する場合は、「var 変数名 = 値」のように宣言するのが一般的だが、この宣言方法は「var window.変数名 = 値」の短縮版となっている。
(この時の「window」は、「windowオブジェクト」と呼ぶ。)
短縮版(var 変数名 = 値)でグローバル変数を宣言した場合でも、本来の宣言方法(var window.変数名 = 値)で内部上処理されているため、解答例のように[]内に変数名の文字列を記載することで本件は解決できる。
まとめ
結果論だが、1,2行のコードで解決できる問題だった。
しかし、Javascriptに初めて触れてから約4年以上経っており、グローバル変数に関しては一通り認識していたつもりだったが、意外と根本的なところでつまずく結果となった。
今回のように、「初歩的だが、内部の具体的な処理方法を理解しきれていない」ことが他でも当てはまりそうなため、他の課題にぶつかった際も、今回のように原点回帰して解決策を探してみようと思う。