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=".9.1/jquery.min.js"></script>
<div id="spa">
<div class="spa-slider"></div>
</div>
</script>
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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="spa">
<div class="spa-slider"></div>
</div>
</script>
-
As far as I can tell, these return values serve no purpose. I suspect it's just the author's personal style, he likes to have explicit return values.
toggleSlideruses the return value to indicate whether it did anything, which could be useful for debugging in the console, although it also usesconsole.log()for the same purpose. – Barmar Commented Jul 16, 2015 at 1:07 - @nhgrif I apologize. I retract my reference to Code Review. My point still stands though that this doesn't appear to be on topic here either, as it's not asking about a particular issue the poster is having trouble finding a resolution for. – Claies Commented Jul 16, 2015 at 1:26
- @Claies Then I remend finding a close reason and voting for it, and perhaps downvote it? You're certain this question is off-topic for SO, yet it has zero downvotes and zero close votes. To me, this question seems perfectly fine for SO, really. – nhgrif Commented Jul 16, 2015 at 1:27
- @nhgrif -- my apologies on the structure of my question. Only just started using SO recently. Will pay more careful attention in the future. Thank you for your help and feedback. Best! – abmantha Commented Jul 16, 2015 at 13:11
3 Answers
Reset to default 6Often, 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;.
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./jquery-events-stop-misusing-return-false/
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 mon 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 being more and more mon 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 remend 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!