[JavaScript]コーディングパターンについて

※この記事を書いてる人はほぼ未経験の初心者です。

私は現職の会社で社内SE...みたいなことをさせていただいています。
なのでほぼ初心者みたいなものであるという前提でこの記事を読んでいただけると幸いです。

皆さんはどのように関数を定義していますか？

以下の2種類が主に使用されていると思います。

// functionキーワード
function multiplyNibai(num){
    return num * 2
}

// アロー関数
const multiplyNibai = num => num * 2;

コーディングパターン

パターン1 - functionキーワード

// グローバル変数はなるべく定義せず、名前空間汚染を防ぐためにオブジェクトとして定義します。
// ここにはオプションとなる定数などを定義します。
const App = {
    API_URL: "www.dokokano.api.com",
    LOADED: null
}

// メイン関数
async function main() {
    setupListeners()
    App.LOADED = await loadSomeNanika();
}
main();

// メイン関数の下に主要な関数を定義
function setupListeners() {
    // コールバック関数にはアロー関数で書くとスッキリ書けて良い
    document.querySelector(".someInput").addEventListener("change", e => {
        consoleLoger(e.target.value);
    })

    // 主要関数の一番下にサブ関数を定義
    function consoleLoger(message) {
        console.log(message);
    }
}

// 主要な関数
async function loadSomeNanika() {
    const response = await fetch(App.API_URL);
    const res = await response.json();
    const result = toUnti(res);
    return res;

    // 主要関数の一番下にサブ関数を定義
    function toUnti(data) {
        return data + "unti"
    }
}

パターン２ - アロー関数

const App = {
    API_URL: "www.dokokano.api.com",
    LOADED: null
}

// メイン関数の下に主要な関数を定義
const setupListeners = ()=>{
    // constなので上に書くしかないサブ関数
    const consoleLoger = (message) {
        console.log(message);
    }
    
    // コールバック関数にはアロー関数で書くとスッキリ書けて良い
    document.querySelector(".someInput").addEventListener("change", e => {
        consoleLoger(e.target.value);
    })
}

// 主要な関数
const loadSomeNanika = async()=>{
    // constなので上に書くしかないサブ関数
    const toUnti = ()=>{
        return data + "unti"
    }
    
    const response = await fetch(App.API_URL);
    const res = await response.json();
    const result = toUnti(res);
    return res;
}


// メイン関数
const main = async ()=>{
    setupListeners();
    App.LOADED = await loadSomeNanika();
}
main();

私は普段パターン1で書いていて、メイン関数を一番上に、主要な関数などを下に書くことでメイン関数の見通しがよくなると思っています。
この記事を読んでいただいた方はこのほうがよくね？俺はこう書いてる！とかあればぜひ気軽にコメントに書いてもらえると嬉しいです(';')！

function関数とアロー関数の主な違い

function関数
・巻き上げ(ホイスティング)が起こるのでスコープ内ならどこに書いてもよい

アロー関数
・超スッキリ書ける

たくさん違いがあるので詳しくは以下を読んでみてください。
https://typescriptbook.jp/reference/functions/function-expression-vs-arrow-functions