[JavaScript] 끝말잇기 (2)

[JavaScript] 끝말잇기 (1)

 

5. 현재 제시어와 이전 제시어 정의

이제 이전 제시어의 마지막 글자와 현재 제시어의 첫 글자의 일치 여부를 확인하여 일치할 경우에 다음 제시어를 변경하고, 일치하지 않을 경우에는 변경하지 않도록 해야 한다.

따라서 현재 제시어를 nowWord,  이전 제시어를 prevWord라는 변수로 정의한다.

 

변수를 추가한 만큼 기존 코드에도 변수를 입력하여 수정할 필요가 있다.

 

[기존 코드]

wordBtn.addEventListener('click', function(){
  wordDisplay.textContent = wordInput.value;
  wordInput.value = '';
});

[수정한 코드]

let wordInput = document.querySelector('input');
let wordBtn = document.querySelector('button');
let wordDisplay = document.querySelector('#word');
let nowWord;
let prevWord;

wordBtn.addEventListener('click', function () {
  prevWord = wordDisplay.textContent;
  nowWord = wordInput.value;
  wordDisplay.textContent = nowWord;
  wordInput.value = '';

  console.log(nowWord);
  console.log(prevWord);
});

 

현재 제시어를 input 요소에 새로 입력한 값으로 변경하기 전에 먼저 이전 제시어를 현재 제시어로 정의하고, 현재 제시어는 input에 입력한 값으로 변경하고 html에 출력하도록 했다.

그리고 콘솔을 확인해보면 현재 제시어와 이전 제시어가 제대로 작동하는 것이 확인된다.

 

 

6. 현재 제시어와 이전 제시어 일치 확인

이제 대망의 두 제시어의 일치 여부를 확인하는 작업만 남았다.

현재 제시어의 첫 글자는 nowWord[0]로 확인할 수 있다.

문자열에서 개개의 문자에 접근할 수 있는 방법은 charAt() 메서드와 대괄호 표기법이 있다.

결과적으로 둘은 큰 차이가 없고 더 직관적인 대괄호 표기법을 개인적으로 추천한다.

nowWord = '영어';
nowWord[0];  // '영'

 

마찬가지로 이전 제시어의 마지막 글자는 prevWord[글자길이-1]로 구할 수 있다.

문제는 이 끝말잇기는 쿵쿵따가 아니라 글자수에 제한이 없어 글자길이가 언제든지 바뀔 수 있다는 점이다.

다행히 우리에게는 .length 프로퍼티가 있다.

다만 대괄호 표기법은 0부터 시작하고 .length 프로퍼티는 1부터 시작하기 때문에 -1을 입력해야 한다.

prevWord = '영어';
prevWord[prevWord.length-1]; // '어'

prevWord = '자바스크립트';
prevWord[prevWord.length-1]; // '트'

 

위 내용이 정말 맞는지 확인부터 한다.

prevWord = '자바스크립트';
nowWord = '트라우마';
prevWord[prevWord.length-1] === nowWord[0];  // true

prevWord = '자바스크립트';
nowWord = '스마트폰';
prevWord[prevWord.length-1] === nowWord[0];  // false

 

코드에는 문제 없다.

기존 코드에 추가하면 다음과 같다.

wordBtn.addEventListener('click', function () {
  if ( prevWord[prevWord.length - 1] === nowWord[0] ) {
    prevWord = nowWord;
    nowWord = wordInput.value;
    wordDisplay.textContent = nowWord;
    wordInput.value = '';
  } else {
    alert('올바르지 않은 단어입니다.')
  }
});

 

하지만 코드를 실행하게 되면 오류가 뜬다.

Uncaught TypeError: Cannot read property 'length' of undefined

if문이 실행될 당시에는 prevWord와 nowWord 변수가 선언만 되어 있을 뿐 if문 안에서 정의하기 때문에 생기는 오류다.

 

 

끝말잇기를 시작하는 처음 단계에서 이것을 고려하여 코드를 수정해야 한다.

 

wordBtn.addEventListener('click', function () {
  if (nowWord != undefined) {
    // 이전 제시어가 있을 경우

    if (prevWord[prevWord.length - 1] === nowWord[0]) {
      // + 제시어가 일치할 경우

    } else {
      // + 제시어가 일치하지 않을 경우

    }
  } else if (nowWord == undefined) {
    // 이전 제시어가 없을 경우

  }
});

if문으로 이전 제시어가 있을 경우와 이전 제시어가 없을 경우를 구분하였다.

그리고 현재 제시어와 이전 제시어 일치 여부도 확인하는 if문도 추가했다.

 

let wordInput = document.querySelector('input');
let wordBtn = document.querySelector('button');
let wordDisplay = document.querySelector('#word');
let nowWord;
let prevWord;

wordBtn.addEventListener('click', function () {
  if (nowWord != undefined) {
    // 이전 제시어가 있을 경우
    prevWord = wordDisplay.textContent;
    nowWord = wordInput.value;

    if (prevWord[prevWord.length - 1] === nowWord[0]) {
      // + 제시어가 일치할 경우
      wordDisplay.textContent = nowWord;
      wordInput.value = '';
    } else {
      // + 제시어가 일치하지 않을 경우
      alert('올바르지 않은 단어입니다.');
      wordInput.value = '';
    }
  } else if (nowWord == undefined) {
    // 이전 제시어가 없을 경우
    nowWord = wordInput.value;
    wordDisplay.textContent = nowWord;
    wordInput.value = '';
  }
});

이전 제시어가 없을 경우, nowWord는 input 요소에 입력한 값이 되고 그 값을 #word에도 표시한다.

 

이전 제시어가 있을 경우, nowWord는 input 요소에 입력한 값이 되고 prevWord는 #word에 표시된 값이 된다.

 

 

 

두 제시어가 일치할 경우 nowWord를 #word에 표시하고

 

일치하지 않을 경우 경고창을 띄운다.

 

이것으로 자바스크립트로 끝말잇기 만들기가 끝났다.

기본적인 메서드와 프로퍼티로 끝말잇기를 만들 수 있지만 이 과정을 생각하는 것이 가장 어렵다고 할 수 있다.