JAVASCRIPT refactoring code : DRY principle
else if (guess > secretNumber) {
if (score > 1) {
document.querySelector('.message').textContent = 'Too High!!';
score--;
document.querySelector('.score').textContent = score;
} else {
document.querySelector('.message').textContent = 'You Lose!!';
document.querySelector('.score').textContent = 0;
}
//when lower
} else if (guess < secretNumber) {
if (score > 1) {
document.querySelector('.message').textContent = 'Too Low!!';
score--;
document.querySelector('.score').textContent = score;
} else {
document.querySelector('.message').textContent = 'You Lose!!';
document.querySelector('.score').textContent = 0;
}
}
다음과 같은 코드가 있다. 이는 정상 작동 하지만 너무 같은 코드가 겹치는 문제가 있다.
이런 문제를 해결하는 것을 refactoring 이라고 한다. refactoring을 하는 이유는 만약 나중에
코드를 고치게 될 때 같은 코드 여러 줄을 고치는 것 보다 한 줄을 고치는 게 효율적이기 때문이다.
else if (guess !== secretNumber) {
if (score > 1) {
document.querySelector('.message').textContent =
guess > secretNumber ? 'Too High!!' : 'Too Low!!';
score--;
document.querySelector('.score').textContent = score;
} else {
document.querySelector('.message').textContent = 'You Lose!!';
document.querySelector('.score').textContent = 0;
}
}
위의 코드를 간결하게 그리고 dry 원칙까지 지키면서 코드를 완성했다.
만약 계속해서 반복되는 코드가 나온다면 함수를 작성하는 것도 refactoring이다.
const displayMessage = function (message) {
document.querySelector('.message').textContent = message;
};
댓글
댓글 쓰기