【jquery】if 内での変数取得が、var でなければできない理由とは？

Question

宣言（const、let、ver）の違いについて知りたいです。

スコープの範囲についての一般的な説明は一読したつもりですが、整合しない問題にぶつかってしまいました。

下記問題が発生する理由がご説明できる方はいらっしゃいますでしょうか？

###発生している問題
「クリックしたdata」を取得し、「関数sample(clicked_sample)」に送り、ifで条件分岐しています。

この条件分岐のところで、「変数mes」が取得できません。

しかし、宣言をconstやletでなく、varにすれば取得できます。

これはどのような理由によるのでしょうか？

<button type="button" data-sample="question">question</button>
<button type="button" data-sample="answer">answer</button>

$(function(){

function sample(clicked_sample){
	console.log('クリックしたのは' +clicked_sample+ 'です');
	if( clicked_sample == 'question' ){
		const mes = '質問です';
	}else if( clicked_sample == 'answer' ){
		const mes = '回答です';
	}
	console.log(mes); // ここで mes を取得したければ var で宣言しなければならないのはなぜ？
}

$('button').click(function() {
	const clicked_sample = $(this).attr('data-sample');
	sample(clicked_sample);
});

});
  

Answer 1

const や let はブロックスコープのため、中括弧でくくられた外からは参照できません。
ご提示のコードでは、 if 文の中のブロックで宣言されているため、 mes 変数のスコープが各条件分岐内のみとなり、宣言された次の行でスコープから出てしまっています。

一方で var で宣言された変数は関数内全体がスコープとなるため、この例では sample() 関数内全域で参照することができるため期待した動作になります。

以下のように修正すれば let を利用しても動くと思います。

function sample(clicked_sample){
    console.log('クリックしたのは' +clicked_sample+ 'です');
    let mes = null; // if文の外で宣言する
    if( clicked_sample == 'question' ){
        mes = '質問です';
    }else if( clicked_sample == 'answer' ){
        mes = '回答です';
    }
    console.log(mes);
}

Comments

[marimon]

できたりできなかったりしていままで悩んでいたのですが、yambejpさんのおっしゃる法則でやっと理解できました。R.Mizukamiさんの正しいソースコードにも感謝です！ありがとうございます。

Answer 2

ブロックスコープは外から持ち込めるけど中から持ち出せません

const a=1;
if(true){
  console.log(a); //外から持ち込んで1
}
if(true){
  const a=2;
  console.log(a); //中で宣言したので2
}
console.log(a); //中の宣言は無視されて1

ただし配列など、内容を変更できるものは別です

const a=[1];
if(true){
  console.log(a); //外から持ち込んで[1]
}
if(true){
  a[0]=2; //外から持ち込んだものの中身を書き換えて
}
console.log(a); //内側の処理が反映されて[2]
if(true){
  const a=[3];
  console.log(a); //中で宣言したので[3]
}
console.log(a); //中の宣言は無視されて[2]

Comments

[marimon]

>外から持ち込めるけど中から持ち出せません
なるほど！求めていたお答えです。ありがとうございました。