-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
[순수JS 1] 검색폼 2 에서 const {value} = this.inputElement
22.03.22 11:08 작성 조회수 223
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> 태그가 담겨야 되는것이 아닌가 라는 생각을 하게되었습니다.
답변을 작성해보세요.
1
김정환
지식공유자2022.03.22
this.inputElement에는 태그가 아니라 HTMLInputElement 객체가 담기게 됩니다. 이 객체는 value라는 프로퍼티를 갖고 있고요, 여기에 인풋 요소에 노출된 문자열 값이 담기게 되는거죠.
그리고 이 코드는 const {value} = this.inputElement에서 구조분해 할당 문법을 이해하시면 되는데요. 객체의 속성을 해체해서 그 값을 변수에 담을 때 사용합니다. 여기서는 객체 구조분해 할당 문법을 사용한 것이고요. this.inputElement.value 값이 상수 value에 담기게 되는 것입니다.
1
깨끗한 도미
2022.03.22
안녕하세요 질문자님! 먼저 this의 정의에 대해서 알고가셔야 될거같습니다. this.inputElement에서 this란, input태그에서 주소값을 간접적으로 담고있는 명령어입니다.
this를 쓰게되면 input태그를 바라보게 되는 것이지요. const {value} = this.inputElement에서 this.inputElement.value 값이 10일 경우, this로 참조하게 되어 10이라는 값을 가져오게 되는것입니다.
그게 const의 객체로 담게 되었을때 10이라는 값으로 표기되는거지요. 도움이 되셨으면 감사하겠습니다.
답변 2