filter 영상에서 질문이 있습니다

const selectCategory = (e) => {
  if (!myProducts) {
    alert('상품 목록을 불러와주세요.');
  } else {
    const {selectedIndex} = e.target.options; // 구조분해할당 문법
    const {value} = e.target.options[selectedIndex];
  }
}

여기서 구조분해 할당 문법이 적용이 되었는데 잘 이해가 가지 않아서 질문 드립니다.

1) 구조분해 할당은 배열/객체에서 적용이 가능한 것으로 알고 있는데요, console.log(e.target.options) 를 찍어보면 Array 가 아닌 "HTMLOptionsCollection" 으로 반환이 되는데 어떻게 객체로 되어서 문법이 가능한지 궁금합니다.
=> 보니까.. 첫 Prototype 에만 HTMLOptionsCollection 으로 반환이 되고, Prototype 에서 계속 타고 내려갈수록 결국 "Object" 에서 파생된거라 가능한건가요?

2) option 의 value 값을 어떻게 한 번에 받아올 수가 있는지 궁금합니다.
부가 설명을 드리자면, e.target.options 를 찍으면 많은 정보들(ex. tagName, className, value 등등)이 나오는데요. 원래대로라면 e.target.options[selectedIndex].value 처럼 접근해야 값을 가져올 수 있는건데, 여기서는 const {value} = e.target.options[selectedIndex] 로 한 번에 가져오는게 궁금합니다.
=> 해당 부분을 콘솔로 찍어보았을 때 아래처럼 HTML 태그를 가져오는 건 확인했습니다.
<option value="life">생활용품</option>
여기서 구조분해 할당 문법 적용 시 태그에 선언되어 있는 attribute 값이 자동으로 적용 이 되어 가져오는 건지, 아니면 문법적으로 뭔가 고정된 식 이 있는건지 궁금합니다.
아래는 제가 const {value} = e.target.options[selectedIndex]; 코드로 적고 콘솔로 찍었을 때 반환하는 값을 테스트 해 본 결과로 공유 드립니다.

<select name="category" class="select">
  <option value="life">생활용품</option> <!-- "life" 반환 -->
  <option data-id="test">생활용품</option> <!-- "생활용품" 반환 -->
  <option data-id="test" value="life">생활용품</option> <!-- "life" 반환 -->
</select>