[JavaScript] 변수 scope 확인

 

 

🤔 input에 값을 채워도 계속 alert 창이 뜸

 

 

const input = document.querySelector('.email').value;
const form = document.querySelector('form');

      form.addEventListener('submit', function (event) {
        event.preventDefault();
        if (input === '') alert('값을 입력해주세요.');
      });

 

const input = document.querySelector('.email').value; → 이 라인이 문제였다.

document.querySelector('.email').value의 초기값은 공백이므로 ‘’가 저장되고

const값이므로 input = ‘’로 고정된다. 그 이후 전송 버튼을 눌러 submit을 실행하면

input === ‘’ 는 계속해서 참이기 때문에 값을 아무리 채워도 alert 창이 뜨는 것이다.

 

따라서 이를 해결하려면 맨 위 input 라인을 함수 블록 안에 넣는다.

 

const form = document.querySelector('form');

      form.addEventListener('submit', function (event) {
        event.preventDefault();
        
        const input = document.querySelector('.email').value; // 옮김
        if (input === '') alert('값을 입력해주세요.');
      });

 

 

---

 

 

🤔 querySelectorAll 

 

   form.addEventListener('submit', function (event) {
        event.preventDefault();
        const email = document.querySelectorAll('input')[0].value;
        const password = document.querySelectorAll('input')[1].value;

        if (email === '' || password === '') alert('값을 입력해주세요.');
        if (
          password !== '' &&
          document.querySelectorAll('input')[1].value.length < 6
        )
          alert('비밀번호를 6자 이상으로 설정해주세요.');
      });

 

처음 코드에서는 querySelectorAll을 함수 안에 할당했다.

 

 

      const form = document.querySelector('form');
      const inputFields = document.querySelectorAll('input');

      form.addEventListener('submit', function (event) {
        event.preventDefault();
        const email = inputFields[0].value;
        const password = inputFields[1].value;

        if (email === '' || password === '') alert('값을 입력해주세요.');
        if (password !== '' && inputFields[1].value.length < 6)
          alert('비밀번호를 6자 이상으로 설정해주세요.');
      });

 

 

document.querySelectorAll('element')는 NodeList 객체를 반환하므로,

이벤트가 발생하는 함수 블록에서 업데이트가 될 필요가 없기 때문에 전역변수로 선언해서 값을 고정시킨다.

 

 

 

 

⭐️ 변수 scope와 할당된 값을 확인하고, 한 줄 한 줄 논리대로 읽어나가면서 문제를 해결하자!

 

---

 

 

 

참고자료

- 코딩애플 JavaScript 입문 강의 中 input 숙제

JavaScript 입문과 웹 UI개발 - 코딩애플 온라인 강좌