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

Question

9분 38초쯤에 왜 inputValue 에 빈 문자열이 바로 추가되지 않은건가요? const inputValue = document.querySelector('#todo-input').value; 이 상태에서 inputValue =''; 이렇게 바로 추가해도될것같은데 안되니까 혼란스럽습니다 ㅠ..

otter · Answer

안녕하세요! 좋은 질문 감사합니다! 이 부분을 이해하기 위해서는 문자열 과 객체 에 대한 개념을 복기해 주셔야 합니다! 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 는 재할당이 불가능한 키워드이기 때문에 에러를 먼저 던지겠지만요!