JavaScriptのコードが、safariでfunctionを使用した時のみエラーになるので理由が知りたいです

Question

状況と質問内容

以下の「該当コードとエラー画面」にあるコードを実行すると、safariでfunctionを使用した場合のみReferenceError: Can't find variable: switcherと表示されてエラーになりました。
スコープなどの問題かと考えたのですが、あまりJavaScriptに詳しくなく、結論が出なかったため質問させていただきました。

以下質問内容になります。

質問1.
私の認識では、構文にも特に間違った部分はないと考えているのですが、これはコードの書き方の問題なのか、safari、chromeどちらかのブラウザのバグなのかどちらでしょうか？
コードが悪い場合、正しいコードに直していただけないでしょうか。

質問2. functionとアロー関数では何が違うのでしょうか？

該当コードとエラー画面

デモ： CodePen（https://codepen.io/w-muro/pen/GRWrPom?editors=1111）

const func = document.querySelector(".function");
if(func){
	const say = "Hello"
	const switcher = true
	function greeting(){
		if(switcher){
			console.log(say);
		}
	}
	func.addEventListener("click", greeting);
}

// arrow =============================================
const arrow = document.querySelector(".arrow");
if(arrow){
	const say = "Hello"
	const switcher = true
	const greeting = () => {
		if(switcher){
			console.log(say);
		}
	}
	arrow.addEventListener("click", greeting);
}

Answer 1

元来、function文（変数に代入するのではなくfunctionから書き始めるもの）は、コード全体もしくは関数のスコープで書かなければならず、ifなどのブロック内に書くことは文法外の実装となっていました。

ES2015以降のstrictモードでは、function文のブロックスコープが保証されるようになりましたが、strictにしていない場合は以前と同様、どのように動くか保証されません。

厳格モードは ES2015 に導入され、ブロック内の関数がそのブロックのスコープを持ちます。ES2015 より前では、ブロックレベルの関数は厳格モードで禁止されていました。（MDNより）

Comments

[maisumakun]

ブロック内でfunctionを書いても、関数式（let foo = function(){}など、関数リテラルを値として使うもの）は全く問題ありません。

const greeting = function(){ /* 略 */ };とするか、addEventListenerの引数に直接functionを書くかで対応できます。

[maisumakun]

> 私の認識では、構文にも特に間違った部分はないと考えているのですが

あまり目立ってはいませんが構文の問題です。

[TYABUDAI6]

ご回答ありがとうございます。

>const greeting = function(){ /* 略 */ };とするか、addEventListenerの引数に直接functionを書くかで対応できます。

エラーが発生しないことを確認できました。

>ES2015以降のstrictモードでは、function文のブロックスコープが保証されるようになりましたが、

こちらも、'use strict'; を追記することでエラーが発生しなくなりました。

今まで、function greeting(){} と const greeting = () => {} は同じものだと考えていましたが、function文と関数リテラルで違うものだと実感を持って理解することができました。
ありがとうございました。