CODEWITHSUNDEEP
javascriptc#jquery
abmantha
abmantha

Reputation: 93

Why return true or false from functions?

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>

Upvotes: 9

Views: 4806

Answers (3)

Myst
Myst

Reputation: 19221

It seems to me you are looking for a hard-set rule where there really isn't one.

You ask "Why" this rule exists when it really doesn't.

You are still reading chapter 1 of Mikowski and Powell's Single Page Web Applications and I am very happy they get you to think and to notice your function's returned value.

There are many possible returned values - true and falseare just two very common and very important options.

In more advanced functions you might find yourself returning self or an object of any number of different return value's - all according to the application's architecture and what you need.

For instance, in Object Oriented Programming, it is becoming more and more common to return self for simple functions. This allows you to chain different functions in one line... but what does Object Oriented Programming have to do with chapter 1?

I recommend you allow yourself more time and experience. For now, I would suggest that you trust the process. Mikowski and Powell are doing their best to feed you a lot of knowledge... but they have to divide it into smaller bites and pieces.

Good Luck!

Upvotes: -1

Alex
Alex

Reputation: 1442

Return values like this in Javascript functions are often used to indicate success or failure. You can create a simple flow-control structure by doing something like:

var doSomething = function() {
    if (error) { 
        return false; 
    } else { 
        return true; 
   }
};

if (doSomething()) { 
    doSomethingElse(); 
} else { 
    console.log("There was an error!"); 
}

That said, it's rarely a good idea to use this for anything other than a quick demo. return false is notorious for producing unexpected results when used purely in this manner - there's almost always a better option to achieve your goal (unless your goal is returning a boolean value!). If you just need to escape an active function, you can just use return;.

In your specific code, toggleSlider() appears to be returning these values to indicate activity, while onClickSlider() is using return false in place of e.preventDefault(), as Nicholas mentioned in their answer. You can read more about why this is often a bad idea here: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Upvotes: 4

Nic
Nic

Reputation: 12875

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;.

Upvotes: 6

Related Questions