JavaScript Kodum Daha Temiz Yazılabilir mi?

Merhaba, Bir Web Tasarımı Hazırlıyorum.
JavaScript'i yeni öğrenmeye başladım. Daha önceden hep hazır kodlar ile çalışıyordum.
Aşağıda Paylaşmış olduğum kodu kendim hazırladım. Sorunsuz çalışmakta. Fakat Kullanımı Doğrumu pek emin değilim.
Bu şekilde kullanmamın bana ileride bir problemi olurmu? veya daha temiz yazılabilirmi sizlere danışmak istedim

const selectBody			= document.querySelector('#body'),
	    selectTopbar		= document.querySelector('#topbar'),
 	    selectHeader		= document.querySelector('#header'),
 		selectButton		= document.querySelector('.menu-btn'),
		selectBack			= document.querySelector('.backdrop'),
 		selectMenu			= document.querySelector('.menu'),
		selectNextEl 		= selectHeader.nextElementSibling;
let 	topbarHeight		= selectTopbar.offsetHeight;

selectButton.onclick = () => {
	selectBody.classList.toggle('overflow-hidden');
	selectBack.classList.toggle('active');
	selectMenu.classList.toggle('active');
};

let headerScrolled = () => {
	if( window.scrollY > selectTopbar.offsetHeight ) {
		selectHeader.classList.add('scrolled');
		selectNextEl.style = 'margin-top: '+ (selectHeader.offsetHeight + 30) +'px;';
		topbarHeight = 0;
		styleUpdate();
	} else {
		selectHeader.classList.remove('scrolled');
		selectNextEl.style = 'margin-top: 30px;';
		topbarHeight = selectTopbar.offsetHeight;
		styleUpdate();
	}
}
addEventListener('scroll', headerScrolled);

function styleUpdate() {
	if( document.body.clientWidth < 769 ) {
		let top = topbarHeight + selectHeader.offsetHeight;
		selectBack.style = 'top: '+top+'px;';
		selectMenu.style = 'top: '+top+'px;';
	}
};

addEventListener('resize', styleUpdate);

styleUpdate();

Şimdiden yardımcı olabilecek arkadaşlara çok teşekkür ederim.

const select = (selector) => document.querySelector(selector);
const selectAll = (selector) => document.querySelectorAll(selector);

const selectBody = select('#body'),
      selectTopbar = select('#topbar'),
      selectHeader = select('#header'),
      selectButton = select('.menu-btn'),
      selectBack = select('.backdrop'),
      selectMenu = select('.menu'),
      selectNextEl = selectHeader.nextElementSibling;

let topbarHeight = selectTopbar.offsetHeight;

selectButton.onclick = () => {
  selectBody.classList.toggle('overflow-hidden');
  selectBack.classList.toggle('active');
  selectMenu.classList.toggle('active');
};

const headerScrolled = () => {
  const scrollY = window.scrollY;
  const scrolled = scrollY > selectTopbar.offsetHeight;
  
  selectHeader.classList.toggle('scrolled', scrolled);
  selectNextEl.style.marginTop = scrolled ? `${selectHeader.offsetHeight + 30}px` : '30px';
  topbarHeight = scrolled ? 0 : selectTopbar.offsetHeight;
  styleUpdate();
};

addEventListener('scroll', headerScrolled);

const styleUpdate = () => {
  if (document.body.clientWidth < 769) {
    const top = topbarHeight + selectHeader.offsetHeight;
    selectBack.style.top = `${top}px`;
    selectMenu.style.top = `${top}px`;
  }
};

addEventListener('resize', styleUpdate);
styleUpdate();

Böyle bişey