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

Question

前提

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

疑問に思うこと

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

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

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)); 
    

<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>

Answer 1

最初のfunctionなどの命令実行文を
１行目ではなく最終行目にあるのを見かけることがありますが
どういう理由からなのか教えていただけませんでしょうか。

すぐに思いつくのは、そのコードを書いた人がその順番で書いた方が読みやすいと思ったから、という理由です。コードの読みやすいさには主観が入ってきますので、「たとえ 関数宣言によって定義された関数でも、宣言の前に使うのはキモチワルイ」と思う人もいるでしょうし、逆に、「関数宣言はすべて下にして、関数の実行が先に書かれているほうが読みやすい（のだから、関数宣言の巻き上げを使わない手はない。）」という人もいるでしょう。

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

関数removeTransitionの先頭引数にthisパラメータを追加して、こうするとよいかと思います。

- function removeTransition(e: any) {
+ function removeTransition(this: Element, e: any) {

Comments

[skillUp]

やはり主観によって異なるだけなんですね。
もっと意味があるのかと疑問でした。
thisの型指定は引数に　そういうことも可能なのですね。
ありがとうございます。