인프런 커뮤니티 질문&답변
작성한 질문수
[순수JS 1] 검색폼 2 에서 const {value} = this.inputElement
작성
·
285
0
안녕하세요 :)
this.inputElement 은 <input type="text" placeholder="입력하세요"> 이러한 태그를 나타낸다고 생각합니다.
제가 console.log( {value} , this.inputElement, value.length) 를 찍어보았을 때의 결과값은
{value: "zz"} <input type="text" placeholder="입력하세요" > 2
이렇게 보여집니다.
const {value} = this.inputElement에서
const 의 객체로 this.inputElement를 담게되는데 왜 this.inputElement.value 값이 담기게 되는것인지 이해가 되지 않습니다.
제가 생각했을 때는 {value} = <input> 태그가 담겨야 되는것이 아닌가 라는 생각을 하게되었습니다.
답변 2
1
this.inputElement에는 태그가 아니라 HTMLInputElement 객체가 담기게 됩니다. 이 객체는 value라는 프로퍼티를 갖고 있고요, 여기에 인풋 요소에 노출된 문자열 값이 담기게 되는거죠.
그리고 이 코드는 const {value} = this.inputElement에서 구조분해 할당 문법을 이해하시면 되는데요. 객체의 속성을 해체해서 그 값을 변수에 담을 때 사용합니다. 여기서는 객체 구조분해 할당 문법을 사용한 것이고요. this.inputElement.value 값이 상수 value에 담기게 되는 것입니다.
1
안녕하세요 질문자님! 먼저 this의 정의에 대해서 알고가셔야 될거같습니다. this.inputElement에서 this란, input태그에서 주소값을 간접적으로 담고있는 명령어입니다.
this를 쓰게되면 input태그를 바라보게 되는 것이지요. const {value} = this.inputElement에서 this.inputElement.value 값이 10일 경우, this로 참조하게 되어 10이라는 값을 가져오게 되는것입니다.
그게 const의 객체로 담게 되었을때 10이라는 값으로 표기되는거지요. 도움이 되셨으면 감사하겠습니다.
오...자세한 설명 감사합니다... 어떻게 손쉽게 이해하기 쉽게 풀이할수있을지 좀 고민많이했거든요..;;
덕분에 좀더 배우는 시간이 되었습니다. 감사합니다