Setting variables inside an if else if statment and improving my javascript/jquery code

Question

I refactored/rewrote my code to produce what is below and I am trying to work out if there is a more efficient way of doing it i.e. less lines of code and quicker etc.

I am also wondering if it is a problem to declare variables inside an if else if statement.

function test() {
    var x = 3;
    if (x > 5) {
        var msg = "m", state = "d";
    } else if (x < 5) {
        var msg = "a", state = "d";
    } else {
        var msg = "e", state = "n";
    }
    $('#id1').removeClass().addClass(state);
    $('#id2').html("Some text " + msg + " and more text.");
    $('#id3').attr('title', "Different text " + msg + " still different text.");
}

This code below was the original code I had before refactoring/rewriting:

function test() {
    var x = 3;
    if (x > 5) {
        $('#id1').removeClass().addClass('d');
        $('#id2').html("Some text message and more text.");
        $('#id3').attr('title', "Different text message still different text.");
    } else if (x < 5) {
        $('#id1').removeClass().addClass('d');
        $('#id2').html("Some text message2 and more text.");
        $('#id3').attr('title', "Different text message2 still different text.");
    } else {
        $('#id1').removeClass().addClass('n');
        $('#id2').html("Some text message3 and more text.");
        $('#id3').attr('title', "Different text message3 still different text.");
    }
}

Great question! I think your code is step in the right direction. You got rid of the big blocks of repeated code.

Jared Farrish · Accepted Answer · 2011-07-10 22:52:06Z

up vote 4 down vote accepted

I don't know what the purpose of declaring your variable within your if statement is supposed to be here. For readability, I would declare those variables at the beginning of your function, like so:

function test() {
    var x = 3, 
        msg, 
        state;
    if (x > 5) {
        msg = "m", state = "d";
    } else if (x < 5) {
        msg = "a", state = "d";
    } else {
        msg = "e", state = "n";
    }
    $('#id1').removeClass().addClass(state);
    $('#id2').html("Some text " + msg + " and more text.");
    $('#id3').attr('title', "Different text " + msg + " still different text.");
}

That being said, I don't know a reason why you couldn't do so; it most depends on readability and the best practices you are following.

answered Jul 10 '11 at 22:52

Jared Farrish
1883

The idea behind it was simple. I wanted the variable to be different based on the different scenarios. So I thought I should just re/define the variable in each scenario. – tw16 Jul 10 '11 at 23:40

But... How you declare that variable is not important. You'll see that the variable is declared anyways. – Jared Farrish Jul 10 '11 at 23:43

You don't want to be defining your msg variable inside the if scope because strictly speaking it shouldn't be accessible outside the if. Unfortunaely javascript allows us to write code like this, but its not a good idea. – James Khoury Jul 10 '11 at 23:46

@James - Yes, unfortunately JS is more forgiving than that. :) – Jared Farrish Jul 10 '11 at 23:57

1

@tw16 - Think about this for a second. If your question is whether or not your value should be set within or before an if statement, I think you have just answered your own question - it should be declare your variable and then set it accordingly. While the alternative is certainly possible, the best practice is to declare the (known) variables and then set them before working on them later in your script. – Jared Farrish Jul 11 '11 at 0:05

show 12 more comments

trey · Answer 2 · 2011-07-12 20:07:38Z

up vote 0 down vote

admittedly readability usually takes a second seat to speed for me (I know a lot of you won't like that), but for me I would probably use some inline logic for smaller, faster code:

function test(){
    var x=3;
    $('#id1').removeClass().addClass((x==5?'n':'d'));
    $('#id2').html("Some text " + (x<5?'a':(x>5?'m':'e')) + " and more text.");
    $('#id3').attr('title', "Different text " + (x<5?'a':(x>5?'m':'e')) + " still different text.");
}

answered Jul 12 '11 at 20:07

trey
1413

1

there is certainly a lot less of your code than in the other examples. But I think your code is not easily readable or flexible. I loathe encountering code like this. It's just my preference. – Evik James Jun 12 '12 at 21:03

Like I said, I know a lot of you wouldn't like this, but I develop social networks almost exclusively and in my experience speed trumps readability as long as you're experienced enough to understand the code you write – trey Jun 12 '12 at 22:40

asked	1 year ago
viewed	650 times
active	1 year ago

Setting variables inside an if else if statment and improving my javascript/jquery code

2 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery optimization functions or ask your own question.

Setting variables inside an if else if statment and improving my javascript/jquery code

2 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery optimization functions or ask your own question.

Related