１行目の実行文を最終行目に持ってくる理由

前提

画面内で「a」「s」「d」「f」「g」「h」などのキーを押すたびに
ブラウザコンソールにpropertyNameである「box-shadow」が表示されます。

疑問に思うこと

window.addEventListener から始まる１行目を最終行に持っていくことも可能です。
他の人のソースを見ていても
最初のfunctionなどの命令実行文を
１行目ではなく最終行目にあるのを見かけることがありますが
どういう理由からなのか教えていただけませんでしょうか。

また、this.classList.remove("active");　のthisに型を指定する記述を行う場合
どう付けるのが適切でしょうか。

Typescript

window.addEventListener('keydown', playSound);function playSound(e){ const sound = document.querySelector(`audio[data-key="${e.key}"]`); const key = document.querySelector(`.key[data-key="${e.key}"]`)!; if(!key) return; (sound as HTMLAudioElement).currentTime = 0; (sound as HTMLAudioElement).play(); key.classList.add("active");} function removeTransition(e:any){ if(e.propertyName !== 'box-shadow') return; this.classList.remove("active"); console.log(e.propertyName); } const keys = document.querySelectorAll('.key'); keys.forEach(key => key.addEventListener('transitionend', removeTransition));

HTML

<div class="sound_frame"> <div data-key="a" class="key"> <kbd>A</kbd> <span class="sound">ベース</span> </div> <div data-key="s" class="key"> <kbd>S</kbd> <span class="sound">ドラム</span> </div> <div data-key="d" class="key"> <kbd>D</kbd> <span class="sound">ギター1</span> </div> <div data-key="f" class="key"> <kbd>F</kbd> <span class="sound">ギター2</span> </div> <div data-key="g" class="key"> <kbd>G</kbd> <span class="sound">ピアノ1</span> </div> <div data-key="h" class="key"> <kbd>H</kbd> <span class="sound">ピアノ2</span> </div> </div> <audio data-key="a" src="sounds/bass01.wav"></audio> <audio data-key="s" src="sounds/drum01.wav"></audio> <audio data-key="d" src="sounds/guitar01.wav"></audio> <audio data-key="f" src="sounds/guitar02.wav"></audio> <audio data-key="g" src="sounds/piano01.wav"></audio> <audio data-key="h" src="sounds/piano02.wav"></audio>