safariのみエラーが発生してしまう。

Question

前提・実現したいこと

ボタンを押したらページが出てくるタブメニューの部分なのですが、Chromeでは使用できるのですが、safariを使用するとエラーが発生してしまいます。

発生している問題・エラーメッセージ

ReferenceError: Can't find variable: tab_list

該当のソースコード

{
    const tab_list = document.querySelectorAll('.tab-menu4');
const content_box_list = document.querySelectorAll('.content-box2');
for(let i = 0;i < tab_list.length;i++){
    tab_list[i].addEventListener('click', tab_check,false);
}
function tab_check(e){
    let num;
    if(!e.target.classList.contains('is-active2')){
        for(let i = 0; i < tab_list.length;i++){
            if(tab_list[i].classList.contains('is-active2')){
                tab_list[i].classList.remove('is-active2');
            }
        }
        e.target.classList.add('is-active2');
        for(let i = 0; i < tab_list.length;i++){
            if(tab_list[i].classList.contains('is-active2')){
                num = i;
            }
        }
        content_check(num);
        }
}
function content_check(number){
    for(let i = 0; i < content_box_list.length;i++){
        if(content_box_list[i].classList.contains('is-active2')){
            content_box_list[i].classList.remove('is-active2'); 
        } 
    }
    content_box_list[number].classList.add('is-active2');
}
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

macbookairのm1を使用しています
safariはバージョン14.1.2です

Comments

[yambejp]

使用OSとsafariのバージョンを明記ください

[ryuki09]

申し訳ありません、今書きましたのでよろしくお願いします。

[m.ts10806]

他者がコピペで再現できるよう、HTMLも提示してください。

[FKM]

そのエラーはどこの行に対して示しているのでしょうか。

Answer 1

ブロック内で関数定義をする場合、定数や変数のスコープ・巻き上げに注意が必要です。
Safariのバグなのか解釈の違いなのかはよく分かりませんが、同様の報告がほかでも見受けられます。
例えばブロック内で関数定義を下記のようにした場合

{
	let i = 0;
	function getNext() {
		i ++;
		console.log(i);
	}
	getNext();
}

SafariでのみReferenceError: Can't find variable: iとエラーが出ます。
しかし、

{
	var i = 0;    // letではなくvar
	function getNext() {
		i ++;
		console.log(i);
	}
	getNext();
}

または

//{
	let i = 0;
	function getNext() {
		i ++;
		console.log(i);
	}
	getNext();
//}  ブロックから外す

のようにするとSafariでも他のブラウザ同様の動作になります。