What is the default value of variable equal to ko.observable()?

Question

I have just started learning KnockoutJS. This is code for folder navigation of webmail client.In the view code, a comparision is made whether the reference variable $data and $root.chosenFolderId() point to the same memory location. But I don't understand what will be the initial value of $root.chosenFolderId()?

Reference

View:

<!-- Folders -->
<ul class="folders" data-bind="foreach: folders">
<li data-bind="text: $data, css : {selected: $data == $root.chosenFolderId()}, click: $root.goToFolder"></li>
</ul>

View Model:

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];

    self.chosenFolderId = ko.observable();

    //Operations
    self.goToFolder = function(folder){
        self.chosenFolderId(folder);
    };
};

ko.applyBindings(new WebmailViewModel());

Answer 1

You're 90% there. As you stated, the foreach will iterate over the folders array and $data will be the current item in the array.

Picking up the value for chosenFolderId

The click binding which calls goToFolder will pass the item it was bound to as an argument, so the chosenFolderId value will be set to the folder item corresponding to the clicked <li> element.

For example: clicking on the 'Archive' element will fire the click event for the item bound to folders[1] thereby calling goToFolder with the folders[1] value.

Initial value

The initial value of $root.chosenFolderId() will be undefined since you declared it with no argument. On initial view no folders appear selected, if you had:

self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
self.chosenFolderId = ko.observable(self.folders[0]);

then the 'Inbox' would be initially selected.

Memory location

You asked if $data and $root.chosenFolderId() point to the same memory location. That's mostly correct - if your folders were an array of objects then they would contain the same reference (for the selected item). Technically strings are also references in JS (see explanation https://stackoverflow.com/a/51193/625200) but its simpler to think of primitives (strings, numbers, booleans) in JS as values and not references.