• 카테고리

    질문 & 답변
  • 세부 분야

    프로그래밍 언어

  • 해결 여부

    해결됨

9분 38초쯤에 왜 inputValue 에 빈 문자열이 바로 추가되지 않은건가요? 여기에 대한 설명이 있으면 좋을것같습니다 ..ㅠ

22.12.09 22:13 작성 조회수 197

4

 9분 38초쯤에 왜 inputValue 에 빈 문자열이 바로 추가되지 않은건가요?

const inputValue = document.querySelector('#todo-input').value;

이 상태에서

inputValue =''; 이렇게 바로 추가해도될것같은데

안되니까 혼란스럽습니다 ㅠ..

답변 1

답변을 작성해보세요.

5

otter님의 프로필

otter

2022.12.12

안녕하세요! 좋은 질문 감사합니다!

이 부분을 이해하기 위해서는 문자열객체에 대한 개념을 복기해 주셔야 합니다!

const inputValue = document.querySelector('#todo-input');
console.log( inputValue );

위 코드를 실행해서 console.log로 출력되는 데이터는 document "객체"입니다.

객체는 여러개의 property를 가지고, 각 propertykeyvalue로 구성되어 있었죠?

아래의 코드를 살펴봅시다.

const inputValue = document.querySelector('#todo-input');
inputValue.value = "";

상수 inputValue에 담긴 것은 doucment.querySelector('#todo-input');를 통해 참조된 하나의 객체입니다.

우리는 inputValue에 담긴 객체에서 value라는 key를 가진 property의 값을 수정한 것이죠.

질문해 주신 코드를 다시 살펴보자면,

const inputValue = document.querySelector('#todo-input').value;

위 코드는 특정 객체에서 value라는 key를 가진 property에 담긴 값, 그 자체를 참조해, inputValue에 담아주고 있습니다.
문자열 타입 데이터죠.

이때의 inputValue는 결과적으로 객체가 아닌 문자열을 담고 있는 상수가 됩니다.

따라서, 아래와 같은 코드는

const inputValue = document.querySelector('#todo-input').value;
inputValue = "";

inputValue라는 상수에 또 다른 데이터를 재할당하는 코드일 뿐인 것이죠.

애초에, 상수를 의미하는 const는 재할당이 불가능한 키워드이기 때문에 에러를 먼저 던지겠지만요!