Q:

Not clear about Usage of change() function as described in the example - Jquery

I just read this example here for Change() event, but didn't quite follow  double use of change() here.  The docs says explains "Attaches a change event to the select that gets the text for each selected option and writes them in the div.  It then triggers the event for the initial text draw." 
Please elaborate the last line!! 
   <html lang="en">
        <head>
          <meta charset="utf-8">
          <title>change demo</title>
          <style>
          div {
            color: red;
          }
          </style>
          <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        </head>
        <body>

        <select name="sweets" multiple="multiple">
          <option>Chocolate</option>
          <option selected="selected">Candy</option>
          <option>Taffy</option>
          <option selected="selected">Caramel</option>
          <option>Fudge</option>
          <option>Cookie</option>
        </select>
        <div></div>

        <script>
        $( "select" )
          .change(function () {
            var str = "";
            $( "select option:selected" ).each(function() {
              str += $( this ).text() + " ";
            });
            $( "div" ).text( str );
          })
          .change();
        </script>

        </body>
    </html>

A:

$("select") // this line is the selector
    .change(function () {  // this line starts adding the change event handler
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("div").text(str);
})
    .change();// this line then triggers that event handler (from the chained selector). 

The same effect would be had from:
$("select").change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("div").text(str);
});
$("select").change();

OR this:
$("select")
    .change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("div").text(str);
});
$("select").trigger('change');

WHY you would do the first is that it uses the chaining and thus does not have to select (find) the element for the selector multiple times.   It also ensures that your handler is fully added prior to it being triggered. 
NOTE: Event handlers are executed when they are triggered, either manually by a user or from code such as this where this manually triggers that handler at that point. 
NOTE: In jQuery, the empty .change() is a trigger and does not add a NEW function since there is nothing in there like in the first one.