Categories
javascript math

Javascript (+) sign concatenates instead of giving sum of variables

81

Why when I use this: (assuming i = 1)

divID = "question-" + i+1;

I get question-11 and not question-2?

1

  • javascript first add value of i to string and then 1

    – jcubic

    May 11, 2011 at 8:02

84

Use this instead:

var divID = "question-" + (i+1)

It’s a fairly common problem and doesn’t just happen in JavaScript. The idea is that + can represent both concatenation and addition.

Since the + operator will be handled left-to-right the decisions in your code look like this:

  • "question-" + i: since "question-" is a string, we’ll do concatenation, resulting in "question-1"
  • "question-1" + 1: since "queston-1" is a string, we’ll do concatenation, resulting in "question-11".

With "question-" + (i+1) it’s different:

  • since the (i+1) is in parenthesis, its value must be calculated before the first + can be applied:
    • i is numeric, 1 is numeric, so we’ll do addition, resulting in 2
  • "question-" + 2: since "question-" is a string, we’ll do concatenation, resulting in "question-2".

5

  • Worked, thanx! but can you tell me what’t the difference?

    – ilyo

    May 11, 2011 at 8:04

  • 1

    @IlyaD – Operator Precedence relevant operator is Addition which is handled left to right. So it’s doing something like: divID = ("question-" + i) + 1;

    May 11, 2011 at 8:10

  • 1

    This dint work in my case eg “Question” + (i + j) it assumed both variables as string, better to go with below solution as “question-” + (i*1+j)

    – Lokesh

    Jul 24, 2013 at 10:27


  • I was surprised just now to find this didn’t work: console.log(‘Add City Row: ‘+(i+1)); Even with the math in parentheses, it’s concatenating them.

    – Rikaelus

    Jun 8, 2015 at 4:44

  • Great description of why this happens.

    – apex

    Feb 12, 2018 at 0:52

35

You may also use this

divID = "question-" + (i*1+1); 

to be sure that i is converted to integer.

0

    18

    Use only:

    divID = "question-" + parseInt(i) + 1;
    

    When “n” comes from html input field or is declared as string, you need to use explicit conversion.

    var n = "1"; //type is string
    var frstCol = 5;
    lstCol = frstCol + parseInt(n);
    

    If “n” is integer, don’t need conversion.

    n = 1; //type is int
    var frstCol = 5, lstCol = frstCol + n;
    

    5

    • 6

      This answer is very wrong. The problem remains that concatenation and addition are left-associative. That is: "question-" + parseInt(i) + 1 === ("question-" + parseInt(i)) + 1. See Joachim’s answer for more details. Also, (+i) is more concise than parseInt(i)

      – Zaq

      Jun 18, 2014 at 23:37

    • 1

      The syntax should have been: divID = "question-" + (parseInt(i) + 1)

      Mar 18, 2015 at 1:45


    • 3

      This answer is completely wrong. And parseInt is not supposed to be called with a number.

      – Oriol

      May 9, 2016 at 17:36

    • If anything, the syntax should have included parseInt(i, 10). I don’t get how this answer, which remains completely wrong to this day, got 21 upvotes.

      Jul 3, 2020 at 3:05

    • The only solution that worked for me, those parens stuff didn’t work in my case.

      – mimi

      Oct 28, 2020 at 14:09