Page 28 -

홈런인지 검사하는 부분과 시도 횟수가 10번을 넘겼는지 검사하는 부분을 추가해 봅시다. 시
도 횟수는 따로 변수에 저장하기보다는 tries 배열의 length를 검사하면 됩니다. 이런 식으로

변수의 개수를 줄일 수 있다면 최대한 줄이는 게 좋습니다. 같은 내용을 표현하는 변수를 두
개 이상 사용할 필요가 없습니다.

$form.addEventListener('submit', (event) => {
event.preventDefault();
const value = $input.value;
$input.value = '';
const valid = checkInput(value);
if (!valid) return;
if (answer.join('') === value) {
$logs.textContent = '홈런!';
return;
}
if (tries.length >= 9) {
const message = document.createTextNode(`패배! 정답은 ${answer.join('')}`);
$logs.appendChild(message);
return;
}
// 몇 스트라이크 몇 볼인지 검사
});

앞 절에서 작성한 입력값 검증을 통과했는지 확인한 후 홈런인지 확인합니다. answer를 예를

들어, 배열에 들어 있는 값이 [1, 5, 4, 2]일 때 answer.join('')을 하면 '1542'라는 문자열
이 됩니다. 이 값을 value와 비교해 홈런인지를 판단할 수 있습니다. 홈런이라면 승리했므로
$logs 태그에 홈런이라고 표시합니다.

10번의 기회를 다 날리면 패배입니다. 이는 tries.length가 9 이상인지 검사하면 알 수 있습
니다. 순서도에서는 ‘10번 시도했는가?’로 표시했지만, 실제 코드에는 9 이상으로 작성해야 합
니다. 왜 10 이상이면 안 되는지는 직접 10번을 시도해서 확인해 보세요.

10번 시도했다면 패배했다고 알리고 정답을 공개합니다. 홈런 메시지를 표시할 때와 코

드가 다릅니다. 기존 $logs 태그의 내용을 유지하면서 추가로 다음 줄에 기록을 남기려면

254