jQuery object has empty properties, but shows up when used console logging particular property

$(document).ready(function() {
  let element = $("#anElement");

The first console.log shows:


The 0 property is empty.
However, the second console.log shows an html element.

How does the object property appear empty, but in reality isn’t?

Because you’re logging the wrapper jQuery builds when you run the function $ (which is an alias for new jQuery.fn.init("#anElement") IIRC).

The first console log is the default value for when you initialise a jQuery object using that function $. It has to construct that first before it does anything else

$("#anElement") doesn’t represent a DOM element, it represents an object you’ve initialised that lets you access/manipulate DOM objects

It builds the wrapper first and (again very much IIRC) stores some metadata [possibly on the prototype?]. Then you use that wrapper to do whatever you want to do (in this case select a property called 0), at which point it will run more functions to get you where you want