9분 38초쯤에 왜 inputValue 에 빈 문자열이 바로 추가... - 인프런

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

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

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

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

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

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

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는 재할당이 불가능한 키워드이기 때문에 에러를 먼저 던지겠지만요!

인프런 커뮤니티 질문&답변