Tag Archives: Scripting languages

JavaScript Snippets: IF Statements Optimization

javascript, micro tutorial, , , , , , , ,

A “Typical Installation” …

As most of the desktop software gives us opportunity to choose from typical or custom installations, let me write what’s a typical IF conditional statement in JavaScript and … every other programing language.

if ( thisIsTrue ) {
    printMe("some message");
}

A “Custom Installation” …

The first thing you can improve from the code above is removing the brackets.

if ( thisIsTrue )
    printMe("someMessage");

Because in JavaScript everything’s on the client – every symbol matters. What if we remove as much as we can!

thisIsTrue && printMe("someMessage");

PHP if-else-endif Statements

PHP, , , , , , , , , , , , , , ,

PHP: if

A typical web developer knows exactly how a PHP if statement looks like:

   if ( expression ) {
      // if the expression was true proceed here
   } else {
      // there was a false expression
  }

HTML mess with PHP

When it comes to merge PHP and HTML the things are becoming ugly. Indeed most of the template systems as Smarty are improved and developed to overcome this issue, however when working with a native PHP code with no template system or with template system where the PHP code is allowed the things are really bad.

Let me show this in a breve example. Image you have to show different formatted HTML depending on a PHP expression. Something like that

<?php if (expression) { ?>
<div class="message">OK. Your registration is successful</div>
<?php } else { ?>
<div class="error">Something went wrong! Please try again later! </div>
<?php } ?>

Now you can see how difficult to maintain this code is when it doesn’t make use of only one code of HTML markup. Imaging you’ve to print differently formatted tables! Indeed the PHP curly brackets are different to follow.

PHP: the different IF syntax

So there is a PHP syntax that tries to help you manage this. You can write more human readable code like this:

<?php if ( expression ) : ?>
<div>message goes here</div>
<?php endif ?>

Thus you get the ENDIF instead of only one curly bracket. That’s indeed readable enough. In fact you can use this syntax with any conditional or loop statement in PHP:

<?php foreach($array as $key => $val) : ?>
<div class="message"><?php echo $val ?></div><br />
<?php endforeach ?>

To return in the previous example the code above should be transformed in that:

<?php if ( expression ) : ?>
<div class="message">some message here!</div>
<?php else : ?>
<div class="error">some error here!</div>
<?php endif ?>

What make JavaScript closures work?

javascript, micro tutorial, , , , , , , , , , ,

Closures again

Most of the JavaScript developer don’t even know what a JS closure is and that’s why Crockfrod is so angry. Yes, it’s true, most of the “developers” just copy and paste the code without even know how it works. OK, just in breve the closure is an anonymous function, which thus helps you define a pseudo namespace, as you may know that in a function everything is visible inside it and only there.

function myFunc() {
    var a = 10;
}

The code above makes the variable a to be visible only inside the function. But as you know there must be a function call to make “all this code work”.

myFunc();

However you can make an anonymous function – or a closure, where the function is with no name and is called once the code has been processed. The right syntax is like so:

(function() { var a = 10; })();

Why and how?

The question is: why and how that works? Why this syntax is correct?

Hint

A tiny hint is that you can make the following line working:

var myFunc = function(){ var a = 10; }();

Pay attention to this syntax and the assignment is what makes all this working.

Firebug’s console.profile vs console.time

javascript, micro tutorial, , , , , , , ,

Firebug’s console.time!

This post is directly related to the previous post where I explain how to use the Firebug’s console object and in that case its time method. That is really powerful and gives the opportunity to track the performance of a sample JavaScript chunk of code. What it does not do is to give you a more detailed profile of that particular JS code.

That’s because the console’s profile method works on functions and if you’d like to profile a loop it will give you there’s nothing to be profiled. One workaround to that is to use closures.

JavaScript closures

A JavaScript closure is to make an anonymous function and to put the code in it, like so:

(function() {
 for (var i = 100000; i--; ) {
  var a = new Array();
 }
})();

Firebug’s console.profile()

That code can be than wrapped with both console.profile() and console.profileEnd() in something like:

console.profile('my profile');
(function() {
 for ( var i = 100000; i--; ) {
  var a  = new Array();
 }
})();
console.profileEnd('my profile');

That will give a more precise measurement like that one shown on the picture bellow:

firebug console.profile