Reduce lines of code

Question

I'm not a JavaScript guru (yet). I am trying to figure out a way to cut down the number of lines below...are there any shortcuts for lets say the if statements?

function showDialog(divID) 
{
    var dialogDiv = $("#" + divID);

    var height = 500;
    var width = 400;
    var resizable = false;

    if (dialogDiv.attr("height") != "") 
    {
        height = parseInt(dialogDiv.attr("minHeight"));
    }

    if (dialogDiv.attr("width") != "") 
    {
        width = parseInt(dialogDiv.attr("minWidth"));
    }

    if (dialogDiv.attr("resizable") != "") 
    {
        resizable = dialogDiv.attr("resizable");
    }

    dialogDiv.dialog
    (
        {
            resizable: resizable,
            width: width,
            height: height,
            bgiframe: true,
            modal: true,
            autoOpen: false,
            show: 'blind'
        }
    )

    dialogDiv.dialog("open");
}

Answer 1

You could use:

var x = first || default;

to do the initialization. It basically checks if the first value is truthy and assign that to x if it is, otherwise assign default to x. An example from your code:

height = dialogDiv.attr('height') || 500;

replaces

if (dialogDiv.attr("height") != "") 
{
    height = parseInt(dialogDiv.attr("height"));
}

Answer 2

Since you've only one statement in each if block, you can do away with the brackets surrounding it, but this is mostly aesthetic.

Answer 3

Did you mean that you want to use ternary operators?

Word of advice: Scripts are written for human, not machine. It's more important for your code to be easily readable and understood, than being pre-optimized and then you forgot what you wrote there.

Either way here's one way to shorten the if statements:

height = dialogDiv.attr("height") != "" ? parseInt(dialogDiv.attr("height")) : height;
width = dialogDiv.attr("width") != "" ? parseInt(dialogDiv.attr("width")) : width;
resizable = dialogDiv.attr("resizable") != "" ? parseInt(dialogDiv.attr("resizable")) : resizable;

Answer 4

You can shorten it down a bit, like this:

function showDialog(divID) 
{
    var dialogDiv = $("#" + divID);

    dialogDiv.dialog({
            resizable: dialogDiv.attr('resizable'),
            width: dialogDiv.attr('width') || 400,
            height: dialogDiv.attr('height') || 500,
            bgiframe: true,
            modal: true,
            autoOpen: false,
            show: 'blind'
    });
    dialogDiv.dialog("open");
}

This takes advantage of the fact javascript is weakly typed, actually it kind of abuses the hell out of it, but it works.

I still find this pretty readable, but I'm used to the syntax, if you're not...decide what's readable vs what's terse and which is more important to you, there's certainly a tradeoff in many cases.

Answer 5

var height = dialogDiv.attr("height") || 500;
var width = dialogDiv.attr("width") || 400;
var resizable = dialogDiv.attr("resizable") || false;

Answer 6

Don't do that. You want to keep your JavaScript code as readable and maintainable as possible. If you are trying to make the download times quick and to make your JavaScript fast, then what you should be doing is creating a minified copy of the JavaScript code... not destroying your original JavaScript code. When it comes to minification and optimization, the Google Closure Compiler is the best tool for the job. To read more about the Google Closure Tools (and Compiler Service) and Google Closure Library, see the links.