Enumerating contents of 'context.load' JS object works but using 'getById' does not work

Question

In my Office 365 App I have a simple functionality where it loads a library and then reads a couple of fields for all items in the library. Below is my sample code:

(function () {
    $(document).ready(function () {
        web = appContext.get_web();
        pictureLib = web.get_lists().getByTitle(libraryTitle);

        query = SP.CamlQuery.createAllItemsQuery();
        allLibItems = pictureLib.getItems(query);

        context.load(allLibItems, "Include(Id, Title, Description)");
        context.executeQueryAsync(Function.createDelegate(this, onSuccess), Function.createDelegate(this, onFail));
    });

    function onSuccess() {
        // Fetching by ID does NOT work
        var pictureItem = allLibItems.getById(id);
        console.log(pictureItem.get_item("Title")); // <-- Throws ERROR!

        // Enumerating content works
        var enumerator = allLibItems.getEnumerator();
        while (enumerator.moveNext()) {
            var pictureItem = enumerator.get_current();
            console.log(pictureItem.get_item("Title")); // <-- This WORKS!
        }
    }

    function onFail(sender, args) { /* Error handling code */ }
})();

I load the object of allLibItems and then fetch individual list items from it.

The thing is, if I use var pictureItem = allLibItems.getById(id) to fetch a particular item and use it like pictureItem.get_item("Title") it throws error of:

Uncaught Error: The property or field has not been initialized. It has not been requested or the request has not been executed. It may need to be explicitly requested.

But when I use var enumerator = allLibItems.getEnumerator() and loop through the contents it works. Why?

Answer 1

I think the reason is that var pictureItem = allLibItems.getById(id); returns a list item, which needs to be loaded first and then executeQueryAsync needs to be called to get the item details in success method.