jQuery: why is an integer being added to a variable like a string?

Question

So I'm trying to take the variable that increments in a for statement, and add an integer to it... but for some reason, it's adding the integer as though it were a string; other operations like subtraction or multiplication work as expected.

Why is this happening? Edit: I've added the whole function; the problem in question is where I try to add 2 to the variable x.

What confuses me is that I'm able to use x no problem, in an .eq() object for example...

$(function() {
    $('textarea').bind('paste', function (e){
        inputGroup = $(this).parent();
        var ob = $(this);
        if (e.type == 'paste'){
            setTimeout(function(){
                var data = ob.val();
                var tabbed = data.replace(/\n/g, "\t");
                var cells = tabbed.split("\t");
                for(var x in cells) {
                    foo = x + 2;
                    alert(foo);
                    $(inputGroup).find('input').eq(x).val(cells[x]);
                }
            }, 1);
        }
    });
});

You don't need all those variables. Just: var cells = ob.val().replace(...).split('\t'); — Šime Vidas
– Šime Vidas, Commented Apr 7, 2011 at 1:09
@Sime: hehe thanks. I'm still working on this code, so there's some bloat. — Benjamin Allison
– Benjamin Allison, Commented Apr 7, 2011 at 1:15

Travis Webb · Accepted Answer · 2011-04-07 01:16:22Z

5

Why is this happening?

Because x is a string that just looks like a number. Cast to Number first and you'll get the result you expect:

"1" + 2 = "12"
Number("1") + 2 = 3

EDIT : Now that I see you are using split to turn a string into an array, your problem is definitely that you are concatenating strings. Cast to Number first, and your problem is solved.

Yes other arithmetic operations will work, since they will implicitly cast the operands to Numbers. Confusingly, "2" * 3 will in fact evaluate to the integer 6. Welcome to Javascript.

-tjw

edited Apr 7, 2011 at 1:16

answered Apr 7, 2011 at 1:02

Travis Webb

15k9 gold badges59 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Šime Vidas Over a year ago

@Travis The unary + operator is a shorthand for Number(): +'1' + 2 === 3

Benjamin Allison Over a year ago

Weird... it seems bizarre that x in this case would be a string, given the fact that x is being used to count the array.

Travis Webb Over a year ago

@Sime True, thanks for pointing that out. I use the full words because I like it when other people can actually read and understand my Javascript without wondering if it's actually written in Perl.

Šime Vidas Over a year ago

@Travis +x and Number(x) do the same thing. This means that in this case +x wins because it's shorter. Smaller codesize = better. I've received lots of up-votes for providing the smallest solution. When there are multiple equally valid solutions (answers), the answer with the smallest codesize is the most attractive one (and usually gets accepted). I recommend you to code towards smart, sophisticated solutions and don't care so much whether or not beginners can read your code.

Travis Webb Over a year ago

smaller codesize = better. That's nice, good for you. I prefer to write code that people can read better, instead of code computers can read better. You save your 6 bytes; I'll write code that doesn't make my maintainers want to kill themselves. I see that you are still a student; good luck getting hired in industry with that attitude. I'm not trying to be mean, I'm honestly trying to help you. "Premature optimization is the root of all evil" -- Donald Knuth

|

Alex · Accepted Answer · 2011-04-07 01:07:43Z

2

Without more code, specifically the initialization of cells, I can't tell you the exact reason. But you can simply call parseInt() on x to turn it into an integer for addition

for(var x in cells) {
    foo = parseInt(x, 10) + 2;
    $(inputGroup).find('input').eq(foo).val(cells[x]);
}

edited Apr 7, 2011 at 1:07

answered Apr 7, 2011 at 1:01

Alex

66.4k49 gold badges154 silver badges181 bronze badges

1 Comment

Šime Vidas Over a year ago

When using parseInt, always specify the radix: parseInt(x, 10).

mVChr · Accepted Answer · 2011-04-07 01:01:12Z

0

Because + is a String concatenation but there is no equivalent String method for * or / so when using those it cast the value as a Number. Just cast x as an integer:

for(var x in cells) {
    foo = parseInt(x, 10) + 2;
    $(inputGroup).find('input').eq(foo).val(cells[x]);
}

The 10 in parseInt is saying to use a base 10 number system (as opposed to hex 16, e.g.).

answered Apr 7, 2011 at 1:01

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

Comments

Dave Ward · Accepted Answer · 2011-04-07 01:08:19Z

0

As others have mentioned, x is a string. That's why.

There's a nice trick for casting strings as numbers in JavaScript that hasn't been mentioned though:

for(var x in cells) {
  // Without the "var" here, you're setting a global
  //  variable during each loop iteration.
  var foo = +x + 2;

  $(inputGroup).find('input').eq(foo).val(cells[x]);
}

answered Apr 7, 2011 at 1:08

Dave Ward

60.7k14 gold badges119 silver badges134 bronze badges

2 Comments

Travis Webb Over a year ago

Your syntax tricks make everyone else's eyes bleed. Number is much more readable.

Dave Ward Over a year ago

If your eyes are bleeding, you should get away from the keyboard and see a doctor! Using the unary operator is pretty run-of-the-mill JavaScript once you've used it for long.

Collectives™ on Stack Overflow

jQuery: why is an integer being added to a variable like a string?

4 Answers 4

11 Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related