JavaScript - 同じスクリプトを複数回読み込む時の変数宣言エラーを回避する

JavaScriptで同一ページ内で再読み込みなしに同じスクリプトを複数回読み込む必要がある場合、変数や関数の宣言エラーを回避する方法と簡単なコード例です。

HMLには対象の要素を設置しています。

<div id="target">対象の要素</div>
<script id="test-js">let target = document.querySelector('#target');</script>

JavaScriptのremove()でHTML上からJavaScriptコードを削除しても、削除したコードで宣言済みの変数名や関数名は新たに宣言できずエラーとなります。

スクリプトの内容の宣言を編集しない場合、重複する宣言のエラーを回避するには、再度読み込むJavaScriptは即時関数（IIFE）を利用して記述します。
以下のコード例の場合、<script>タグを削除した後、新しくbody要素に追加していますが、即時関数（IIFE）を利用する事で変数の宣言による重複エラーを回避しています。

IIFEで記述していない場合、以下のエラーが発生します。
SyntaxError: Identifier 'target' has already been declared

// 読み込み済みのJavaScriptが書かれた<script>をDOMから削除する
document.querySelector('#test-js').remove();

// 削除したJavaScriptと同じ変数名で宣言しているJavaScriptコードを作成
let script = document.createElement('script');
// 内容のスクリプトはIIFEとして記述する
script.innerHTML = `(function() {let target = document.querySelector('#target');})();`;
script.id = 'test-js';
document.body.appendChild(script);