script내 변수, function, event 등 순서에 관하여

[고양이실패단]

안녕하세요 코딩애플님, 강의 정말 잘 듣고 있습니다.
함수의 사용법에 익숙해지기 위해서 최대한 함수를 사용하는 연습을 하고 있는데요
문득 script내에 변수나 객체, 함수, 이벤트 등의 코드 순서를 어떻게 배치하는게 좋을지 고민이 됩니다.

    const products = [
      { id : 0, price : 70000, title : 'Blossom Dress' },
      { id : 1, price : 50000, title : 'Springfield Shirt' },
      { id : 2, price : 60000, title : 'Black Monastery' }
    ];
    const moreBtn = document.querySelector('.more-btn');
    let moreCount = 0;

    // 카드 생성 함수
    function createItem(array) {
      array.forEach((a, i) => {
        const template = 
          `<div class="col-sm-4">
            < img src="https://placehold.co/300x300" class="w-100">
            <h5>${array[i].title}</h5>
            <p>가격 : ${array[i].price}</p>
          </div>`
        document.querySelector('.row').insertAdjacentHTML('beforeend', template);
      });
    }
    createItem(products);

    // 더보기 버튼 클릭 이벤트
    moreBtn.addEventListener('click', function() {
      moreCount++;
      fetch(`https://codingapple1.github.io/js/more${moreCount}.json`)
        .then(res => res.json())
        .then(function(data) {
          createItem(data);
          if(moreCount >= 2) {
            moreBtn.style.display = 'none';
          }
      })
      .catch(function(error) {
        console.log('실패');
        moreCount--;
      })
    });

AJAX의 GET 요청으로 더보기 버튼의 기능을 만든 코드입니다.
전역변수, 함수, 함수 실행, 이벤트 순서로 되어있는데요
지금은 코드가 짧아서 괜찮지만 앞으로 실제로 작업을 하게 되어서 코드가 길어지게 되면
문제가 발생할 수 있을 것 같아서요 코드 순서에 대한 규칙이 있을까요?

• 이 게시글은 고양이실패단에 의해 8 월 전에 수정됐습니다.
• 이 게시글은 고양이실패단에 의해 8 월 전에 수정됐습니다.

[codingapple]

변수함수 정의는 위에 있고 실제 코드는 밑에 있는게 자연스러운데
함수들은 아마 다른 파일에서 import 해서 쓰는경우가 더 많을듯요 

[고양이실패단]

감사합니다~~

[글쓴이]

글