[JavaScript] 함수선언식으로 코드의 가독성 높이기

DOM을 적극 활용해야 하는 javascript card-quiz 프로젝트를 진행하면서 맞닥뜨린 문제 중 하나는
코드가 너무나 길어진다는 것이었다...

작성자인 나는 기억을 더듬어 내 의도를 유추하면 이해가 가능하다해도 (사실 그마저도 너무 길어지다보니 쉽지 않음) 다른 사람이 볼 땐 가독성이 많이 떨어지는 단점이 있었다.

그래서,

함수선언식으로 가독성을 높일 수 있다는 꿀팁! feedback을 받고 정리해본 예제모음 :)

---

예제 1.

callback 함수를 별도의 함수선언식으로 분리

const nextBtn = document.getElementById('next_question');
nextBtn.addEventListener("click", nextBtnClicked); 

function nextBtnClicked() { 
  removeElement(currentQuestionNumber); 
  updateQuestion(currentQuestionNumber); 
  currentQuestionNumber++; 
}

위 코드의 nextBtnClicked함수는 아래의 이벤트의 callback함수로 쓰인 function()과 같은 의미.
위와 같이 newline을 추가하고 callback함수를 함수선언식으로 이름까지 기입하면 직관적으로 대상함수를 찾기가 쉬워 가독성이 높아진다.

const nextBtn = document.getElementById('next_question');
nextBtn.addEventListener("click", function() { 
  removeElement(currentQuestionNumber); 
  updateQuestion(currentQuestionNumber); 
  currentQuestionNumber++; 
}); 

---

예제 2.

동일한 기능을 가진 코드들을 함수선언식으로 grouping 해주기

//첫문제를 보여주는 start함수 
function start() {
  console.log('start clicked');
  updateQuestion(currentQuestionNumber);
  currentQuestionNumber++;
  startBtn.remove();
  nextBtn.style.display = 'inline';
  displayInformation();
}

//퀴즈가 시작되면 맞춘개수 & 남은문제 시각화
function displayInformation() {
  const scores = document.querySelectorAll('span');
  for (var i = 0; i < scores.length; i++) {
    scores[i].style.display = 'inline';
  }
  leftQuestions.classList.add('left_question');
  const remainQ = document.getElementsByTagName('span')[1];
  remainQ.appendChild(leftQuestions);
  leftQuestions.textContent = `${leftQuestionNumber}`;
  numberOfCorrectAnswers.classList.add('correct_scores');
  const obtainedScores = document.getElementsByTagName('span')[0];
  obtainedScores.appendChild(numberOfCorrectAnswers);
  numberOfCorrectAnswers.textContent = '0/21';
}

위와 아래 모두 퀴즈가 시작되면 첫 문제와 맞춘문제개수, 남은문제개수를 보여주는 코드로, 위 코드의 displayInformation()은 주석과 같이 아래의 코드를 기능별로 묶어 두개의 함수로 나누어주는 역할을 한다.

위와 아래 모두 같은 효과를 내지만, 기능별로 분류가능한 코드라면 함수선언식을 이용해 가독성을 높일 것!

//첫문제를 보여주는 start함수 
function start() {
  console.log('start clicked');
  updateQuestion(currentQuestionNumber);
  currentQuestionNumber++;
  startBtn.remove();
  nextBtn.style.display = 'inline';
  const scores = document.querySelectorAll('span');
  for (var i = 0; i < scores.length; i++) {
    scores[i].style.display = 'inline';
  }//퀴즈가 시작되면 맞춘개수 & 남은문제 시각화
  leftQuestions.classList.add('left_question');
  const remainQ = document.getElementsByTagName('span')[1];
  remainQ.appendChild(leftQuestions);
  leftQuestions.textContent = `${leftQuestionNumber}`;
  numberOfCorrectAnswers.classList.add('correct_scores');
  const obtainedScores = document.getElementsByTagName('span')[0];
  obtainedScores.appendChild(numberOfCorrectAnswers);
  numberOfCorrectAnswers.textContent = '0/21';
}

---

예제 3.

함수선언식으로 코드감싸기

//퀴즈 초기화 후 처음부터 다시 진행
function addRestartBtn() {
  const restartBtn = document.getElementById('restart');
  restartBtn.style.display = 'inline';
  nextBtn.style.display = 'none';
  restartBtn.addEventListener('click', function() {
    console.log('restartBtn clicked');
    console.log(currentQuestionNumber);
    removeElement(currentQuestionNumber);
    currentQuestionNumber = 0;
    leftQuestionNumber = 21;
    start();
    restartBtn.style.display = 'none';
  });
}

//호출 시: addRestartBtn(); 

위의 addRestartBtn함수는 아래 코드와 동일한 효과를 내며, 이 기능에 필요한 코드를 모두 감싸 가독성을 높이고,
코드를 읽는 사람으로 하여금 하위 코드들이 어떤 역할을 하는지 유추할 수 있게 한다.

  const restartBtn = document.getElementById('restart');
  restartBtn.style.display = 'inline';
  nextBtn.style.display = 'none';
  //퀴즈 초기화 후 처음부터 다시 진행
  restartBtn.addEventListener('click', function() {
    console.log('restartBtn clicked');
    console.log(currentQuestionNumber);
    removeElement(currentQuestionNumber);
    currentQuestionNumber = 0;
    leftQuestionNumber = 21;
    start();
    restartBtn.style.display = 'none';
  });