How to Concatenate Two Numbers in JavaScript

avatar

Borislav Hadzhiev

2 min

banner

Photo from Unsplash

Concatenate Two Numbers in JavaScript #

To concatenate two numbers, add an empty string to the numbers, e.g. "" + 1 + 2.

When the addition (+) operator is used with a string and a number, it concatenates the values and returns the result.

index.js
const num1 = 1; const num2 = 2; const result = '' + num1 + num2; console.log(result); // ๐Ÿ‘‰๏ธ '12' console.log(typeof result); // string

We used the addition (+) operator to concatenate two numbers.

When used with a number and a string, the + operator concatenates them.

index.js
console.log(3 + 'bobbyhadz'); // ๐Ÿ‘‰๏ธ '3bobbyhadz' console.log(1 + '10'); // ๐Ÿ‘‰๏ธ '110' console.log('100' + 200); // ๐Ÿ‘‰๏ธ '100200'
The result has a type of string. If you need the result as a number, pass it to the Number() constructor.
index.js
const num1 = 1; const num2 = 2; const str = '' + num1 + num2; console.log(str); // ๐Ÿ‘‰๏ธ 12 console.log(typeof str); // string // ๐Ÿ‘‡๏ธ convert back to number const num = Number(str); console.log(num); // 12 console.log(typeof num); // ๐Ÿ‘‰๏ธ number
Note that the string must be added to the beginning when concatenating two numbers.

If you add the string at the end, the numbers would get added and the string would just convert the result to a string.

index.js
// โ›”๏ธ Doesn't work console.log(1 + 5 + ''); // ๐Ÿ‘‰๏ธ "6" // โœ… Works console.log('' + 1 + 5); // ๐Ÿ‘‰๏ธ "15"

If you have to do this often, define a reusable function.

index.js
function concatenateNumbers(num1, num2) { return '' + num1 + num2; } console.log(concatenateNumbers(1, 2)); // ๐Ÿ‘‰๏ธ '12' console.log(concatenateNumbers(5, 6)); // ๐Ÿ‘‰๏ธ '56'

The function takes two numbers as parameters and concatenates them.

Alternatively, you can use the Array.join() method.

Concatenate Two Numbers in JavaScript using Array.join() #

To concatenate two or more numbers:

  1. Wrap the numbers in an array.
  2. Use the Array.join() method to join the numbers into a string without a separator.
index.js
function concatenateNumbers(numbers) { return numbers.join(''); } console.log(concatenateNumbers([1, 2])); // ๐Ÿ‘‰๏ธ '12' console.log(concatenateNumbers([1, 2, 3])); // ๐Ÿ‘‰๏ธ '123' console.log(concatenateNumbers([1, 2, 3, 4])); // ๐Ÿ‘‰๏ธ '1234'

We wrapped two or more numbers in an array and used the Array.join() method to concatenate them.

The Array.join() method concatenates all of the elements in an array using a separator.

The only argument the Array.join() method takes is a separator - the string used to separate the elements of the array.

If the separator argument is set to an empty string, the array elements are joined without any characters in between them.

index.js
console.log([1, 2, 3].join('')); // ๐Ÿ‘‰๏ธ '123'

You can also use a template literal to concatenate two numbers.

Concatenate Two Numbers in JavaScript using a template literal #

Use a template literal to concatenate two numbers, e.g. const result = ${num1}${num2};.

The dollar sign and curly braces part ${} is an expression that gets evaluated.

index.js
const num1 = 1; const num2 = 2; const result = `${num1}${num2}`; console.log(result); // ๐Ÿ‘‰๏ธ '12'

You can imagine that the num1 and num2 variables get evaluated and the numbers get converted to strings and concatenated.

You can use this approach to concatenate as many numbers as necessary.

index.js
const num1 = 1; const num2 = 2; const num3 = 3; const result = `${num1}${num2}${num3}`; console.log(result); // ๐Ÿ‘‰๏ธ '12'

Which approach you pick is a matter of personal preference. The Array.join() method is convenient if you need to concatenate a collection of numbers, otherwise, the other two options should suffice.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev