Why return true or false from functions?

Question

I'm currently working through the Single Page Web Applications by Mikowski and Powell. After working through the simple tutorial in Chapter 1, I am confused on why it is necessary to return true and return false in the toggleSlider(), onClickSlider(), and initModule() functions.

What is the added benefit of doing so? When I ran the below code without the return true and return false, it worked exactly the same as with the return statements.

What is an appropriate situation for which having these return statements is actually beneficial and necessary?

var spa = (function($) {
  var configMap = {
      extended_height: 434,
      extended_title: 'Click to retract',
      retracted_height: 16,
      retracted_title: 'Click to extend',
      template_html: '<div class="spa-slider"><\/div>'
    },
    $chatSlider,
    toggleSlider, onClickSlider, initModule;

  toggleSlider = function() {
    var slider_height = $chatSlider.height();

    if (slider_height === configMap.retracted_height) {

      $chatSlider
        .animate({
          height: configMap.extended_height
        })
        .attr('title', configMap.extended_title);
      return true;

    } else if (slider_height === configMap.extended_height) {
      $chatSlider
        .animate({
          height: configMap.retracted_height
        })
        .attr('title', configMap.retracted_title);
      return true;

    }

    console.log("Nothing to extend or retract. No events fired.");
    return false;
  };

  onClickSlider = function(event) {
    console.log("Calling onClickSlider click event");
    toggleSlider();
    return false;
  };

  initModule = function($container) {
    $container.html(configMap.template_html);

    $chatSlider = $container.find('.spa-slider');

    $chatSlider
      .attr('title', configMap.retracted_title)
      .click(onClickSlider);

    return true;
  };

  return {
    initModule: initModule
  };

}(jQuery));

jQuery(document).ready(
  function() {
    spa.initModule(jQuery('#spa'));
  }
);

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #777;
}
#spa {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: 8px;
  right: 8px;
  border-radius: 8px 8px 0 8px;
  background-color: #fff;
}
.spa-slider {
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 300px;
  height: 16px;
  cursor: pointer;
  border-radius: 8px 0 0 0;
  background-color: #f00;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div id="spa">
        <div class="spa-slider"></div>
    </div>
</script>

Answer 1

Often, in event handlers, returning false is a way to tell the event to not actually fire. So, for example, in an onsubmit case, this would mean that the form is not submitted.

In your example return true; will make the animation occur, while return false; won't.

Alternatively, you can do e.preventdefault() instead of return false;.