How to Concatenate Two Numbers in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 3, 2024
3 min

banner

# 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

concatenate two numbers

The code for this article is available on GitHub

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
The code for this article is available on GitHub
Note that the string must be added to the beginning when concatenating two numbers.

If you add the string at the end, the numbers will 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()

This is a two-step process:

  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'

concatenate two numbers in javascript using array join

The code for this article is available on GitHub

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'

# Concatenate Two Numbers in JavaScript using a template literal

Alternatively, you can use a template literal.

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'

concatenate two numbers using template literal

The code for this article is available on GitHub

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've also written an article on how to add strings as numbers in JS.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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 ยฉ 2024 Borislav Hadzhiev