DOM을 적극 활용해야 하는 javascript card-quiz 프로젝트를 진행하면서 맞닥뜨린 문제 중 하나는
코드가 너무나 길어진다는 것이었다...
작성자인 나는 기억을 더듬어 내 의도를 유추하면 이해가 가능하다해도 (사실 그마저도 너무 길어지다보니 쉽지 않음) 다른 사람이 볼 땐 가독성이 많이 떨어지는 단점이 있었다.
그래서,
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++;
});
//첫문제를 보여주는 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';
}
//퀴즈 초기화 후 처음부터 다시 진행
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';
});