JavaScript 変数の存在チェック is not defined の解決方法

Question

取得した値を元に、動的に変わる変数をtypeofで存在チェックをしているのですが、is not defined とエラー出力されてしまいます。
なにが間違っているのでしょうか？宜しくお願いします。

エラー内容
// ReferenceError: text5 is not defined

var text1 = 'hoge1',
    text2 = 'hoge2',
    text3 = 'hoge3';

var getNum = 5;
var setText = 'text' + getNum;

if(typeof eval(setText) !== 'undefined'){
    console.log(eval(setText));
} else {
    console.log('なし');
}

Comments

[m.ts10806]

エラーは要約したり省略したりせずにそのままコピペしてください。

[pinoko]

ご回答ありがとうございます。エラー内容は text5 is not defined になります。

[m.ts10806]

質問は編集できるので、この「質問への追記、修正の依頼」があったときには質問本文に追記して返してください。

[m.ts10806]

ちなみにこれeval()いれる意味ないですよね。typeof setText だけで同じ結果（今回の場合、getNumに1~3を入れるとhoge1~3が表示される）

[pinoko]

getNumで取得される値が必ずしも1～3ではないので、例えば5の値を取得した時、存在しない変数なら処理をしたいと思ったわけです。 eval()を入れないと式が評価されず、変数の確認が出来ないです。

Answer 1

取得した値を元に、動的に変わる変数をtypeofで存在チェックをしているのですが

こんな回りくどいことをせずに、配列あるいはオブジェクトとしてtexts変数を用意して、texts[getNum]のように使うようにしましょう。evalは、可能な限り使うことを避けてください。

Comments

[pinoko]

ご回答ありがとうございます。
元のソースが変数宣言されていて、そこに固執してしまって配列にするという考えが出てきませんでした。
配列で書き直しましたのでその問題は解決しました。
ただし質問したエラーの原因がわからないのでクローズせずもう少し質問を仰ぎたいと思います。

Answer 2

知りたいのは「理由」でしょうか。

なにが間違っているのでしょうか？宜しくお願いします。

typeof 未定義識別子 は確かにエラーを出しません。

しかし
typeof eval(未定義識別子) もエラーを出さないだろう、
というのは単なる思い込みで、

実際は、typeofより先に評価されるeval関数の中でエラーが発生してしまい
typeof にまで行かないで終わってしまう、ということでしょう。

＝＝＝

例えば5の値を取得した時、存在しない変数なら処理をしたいと思ったわけです。
eval()を入れないと式が評価されず、変数の確認が出来ないです。

evalを使わないで済む方法を推奨しますし、具体例はほかの回答者さんのとおりです。

しかし、万が一、どうしても、文字列から変数の有無を確認をしたいのであれば、
先にtypeofより先にeval単体で検査すればよい、ということが、上記の理屈から分かることと思います。

var text1 = 'hoge1',
    text2 = 'hoge2',
    text3 = 'hoge3';

var getNum = 5;
var setText = 'text' + getNum;

try{
  eval(setText);
}catch(error) {
  console.log("なし");
  setText='';
}

console.log(eval(setText));

Comments

[pinoko]

ご回答ありがとうございます。
まさにこの回答です。

evalでエラーを出していた、なので変数存在チェックをと思いましたが、そのエラーの意味を履き違えていたということですね。
eval自体がエラーで、その際の確認にtry catchが必要だったということですか。

勉強になりました。ありがとうございます。

Answer 3

エラーの原因は既出通りですが、try-catch を使用する必要はありません。

console.log(typeof setText !== 'undefined' ? eval(setText) : 'なし');

Re: pinoko さん

Comments

[taka-saan]

変数 setText には、'text5' という「変数名」が文字列で入っていて、
このとき 変数text5が未定義なのかどうかを判定したい、
という要件のようです。

すみません、私のコードがgetNum = 3になってます(ました)が、getNum = 5の時の話です。
修正しておきます。

[think49]

変数が未定義なら、typeof演算子は "undefined" を返しますので、そこで判定可能です。
undefined値とReferenceErrorを区別するなら使えませんが、String値が期待される変数にundefined値を定義済判定するメリットはないと判断しました。

Answer 4

どうしてもというならこうですかね？

var text1 = 'hoge1',
    text2 = 'hoge2',
    text3 = 'hoge3';
var getNum = 5;
var setText=(typeof this["text"+getNum]!=="undefined")?this["text"+getNum]:"none";
console.log(setText);

Comments

[pinoko]

ご回答ありがとうございます。
getNum = 2 でも none になってしまいます。
そもそもなぜ this["text"+getNum] の配列が登場するのかよくわからないです。
配列で作り直せばarray.indexOfで事足りるかと思いますが、ご提示頂いたソースは配列前提の話でしょうか？

[yambejp]

> getNum = 2 でも none になってしまいます。

chromeやfirefoxはちゃんとhoge2を返すみたいです
確認された環境はなんでしょうか？

var text1 = 'hoge1',
text2 = 'hoge2',
text3 = 'hoge3';
for(var getNum = 1;getNum<=5;getNum++){
var setText=(typeof this["text"+getNum]!=="undefined")?this["text"+getNum]:"none";
console.log(setText);
}

[pinoko]

jqueryの$(function(){ この中 });　または window.onload=function(){}の中に記述していたので動きませんでした。
全てnone
環境はwindows Chrome最新、Firefox developer editionなどです。

普通に書けば動きました。
ただ、そうなるとなぜ上記の場合だと動かないのか意味不明です。
DOMを読み込んだあとに実行してもなんら問題ないと思いますがなぜなんでしょう。

[yambejp]

> window.onload=function(){}の中

その場合はvarを指定しなければいけるのでは？
window.addEventListener('DOMContentLoaded', function(e){
text1 = 'hoge1',
text2 = 'hoge2',
text3 = 'hoge3';
for(var getNum = 1;getNum<=5;getNum++){
var setText=(typeof this["text"+getNum]!=="undefined")?this["text"+getNum]:"none";
console.log(setText);
}
});

[pinoko]

たしかに var を書かなければ大丈夫ですが、
ただし、“use strict”を使うと、変数の宣言をしていないわけなのでエラーになってしまいます。

そもそもなぜ var で宣言すると none になってしまうのかがわからないです…

[yambejp]

> use strict”を使う

そういうことなら、window.addEventListenerの外側で宣言してください

'use strict'
var text1 = 'hoge1',
text2 = 'hoge2',
text3 = 'hoge3';
window.addEventListener('DOMContentLoaded', function(e){
for(var getNum = 1;getNum<=5;getNum++){
var setText=(typeof this["text"+getNum]!=="undefined")?this["text"+getNum]:"none";
console.log(setText);
}
});

[pinoko]

いろいろありがとうございます。
スコープの問題でした。

1点だけ教えて欲しいですが、
text1～3まで普通の変数なわけですが、this["text"+getNum]で配列になってしまっているのですが、
これはどういう動きなんですか？
これでどうして値が取れるのかがどうも理解出来ないです。