ローカル変数にグローバル変数の配列を代入したい。

Question

お世話になっております。今回は題名の通り、ローカル変数にグローバル変数の配列を代入したいと考えています。

Javascript

var i=0;
var number2018 = ['abc', 'cdf'];
var number2017 = ['fdsfsfa', 'hogehoge'];
var number2016 = ['mioonono', 'irewrln'];
for(var year = 2014; year<2030; year++){
　　var before_number = "number"+year;
　　var it_number = before_number.length;
　　console.log(it_number);
　　var selecter_number = "#"+year+"selecter";
　　while(i<it_number){
	　$(selecter_number).prepend('<iframe src="https://www.youtube.com/embed/'+before_number[i]+'?controls=2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="youtube"></iframe>');
	　i++;
　　}
}

HTML

<div id="2018selecter" class="youtube_frame_base" style="display: flex;"></div>
<div id="2017selecter" class="youtube_frame_base" style="display: flex;"></div>
<div id="2016selecter" class="youtube_frame_base" style="display: flex;"></div>

今回は今までHTML場でコピーアンドペーストしまくってyoutubeの一覧を作っていたものをもっと簡易的にしたいと考え、javascriptでfor文、while文を使用した記述方法に変更したいと考えました。

やりたいこととして、まずグローバル変数で各年度の動画の識別となる部分を配列で代入しておく。
for文内で各div要素内にコピーアンドペーストを自動的に記述を行なっていきたいという感じです。
問題はローカル変数であるbefore_numberです。この代入している値とグローバル変数の名前が一緒なのでこれで代入できてる？なんて考えていたのですが、代入ができていません。コンソールで確認したところ、変数内はしっかりと文字列が代入されているだけでした。

ここで質問なのですが、このローカル変数にグローバル変数にて定義した配列を代入することはどのように解決すればよいのでしょうか。
例　number2018=['abc','cdf']の値をローカル変数のbefore_numberの値が'number2018'になった時に、before_numberにグローバル変数のnumber2018の['abc','cdf']を代入したい。

よろしくお願いいたします。

修正後

var i=0;
const number = {
　　　'2018': ['abc', 'cdf'],
	'2017': ['fdsfsfa', 'hogehoge'],
	'2016': ['mioonono', 'irewrln'],
}								  
for(var year = 2016; year<2030; year++){
	var result = String( year );
	var before_number = number[result];
	if(before_number==undefined){
	　　　break;
	}
	var selecter_number = "#"+year+"selecter";
	for(var i=0; i<30; i++){
	　　　var atai = before_number[i];
	　　　if(atai==undefined){
		break;
	　　　}
	　　　$(selecter_number).prepend('<iframe src="https://www.youtube.com/embed/'+atai+'?controls=2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="youtube"></iframe>');
	}
}

さらに修正後

for(var year = 2016; year<2030; year++){
　　　　　var result = String( year );
　　　　　var before_number = number[result];
	if(before_number==undefined){
		break;
	}　
	var selecter_number = "#"+year+"selecter";
	before_number.forEach(function( index ) {
		$(selecter_number).prepend('<iframe src="https://www.youtube.com/embed/'+index+'" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="youtube"></iframe>');
	});
}

Answer 1

変数名に値を使うのではなく、連想配列として定義しましょう。

const number = {
  '2018': ['abc', 'cdf'],
  '2017': ['fdsfsfa', 'hogehoge'],
  '2016': ['mioonono', 'irewrln'],
}

Comments

[kuroishi]

ご回答いただきありがとうございます！
すみません、もう少し詳細に解説いただけると幸いです。なんとなくわかったつもりでいまいるので。
それをその後どのように活用していけばよいのでしょうか？

[mather]

なんとなくわかったつもり、というのであれば、あなたの考える方法を実装してみてください。
どうしてもわからなかったときには何がわからないのかをコメントしてください。
はじめから回答をもらってたら自分で修正できなくなりますよ。

[kuroishi]

ありがとうございました。
大変自分も今回は勉強になりました。
自分なりに完成した答えを改めて質問内容に記載させていただきました。
このコードみてここが悪いなどありましたらご指摘いただけると幸いです。
今後も日々精進したいと思います。

[mather]

before_number.length 自体は使っていいと思いますよ。30というマジックナンバーが埋め込まれてしまうことで30個を超える配列には対応できなくなってしまいます。
さらに言えば、before_number が配列なので、forEach を使うとループするための i も不要なのでもっとシンプルになると思います。

[kuroishi]

連想配列の場合、lengthは使えないとの記事がいくらか上がっていたのでその部分は破棄して、考えられるMAXの値30を代入しました。
forEach文を用いてこれからやってみようと思います！

[kuroishi]

すみません、訂正後の話ですね。訂正後であればbefore_numberはただの配列なのでlengthが使えるっていうことですね。誤解していました。

[kuroishi]

今まで何をやっていたんだレベルでかなり簡略できました。
本当に面白いですね！