JavaScript: Formatting Large Integer

Hi there!

This is a quick doodle you can use for formatting the integer. Like, 1000 or 1000003 or other positive large integer. Integer species, mind you. Not a number with decimal point.

---

Demo #1
For only positive integer and triggered using a click event
Maximum length of 16 digits. Like, single thousand trillion. Above that, the output will ignore the last digit. Above 21 figures, lulz, it will be totally screwed up and automatically compacted using e+something.

Try it out!

☺ I'm gonna format your inpoot ☺

---

JavaScript
I use array reverse() method here because it's easier to count and append comma from the back rather than from the front. Then, after the appending, the array will be reversed back and joined.
If you're new to JavaScript, here's the list of methods I use in here (you can dig more information about these from Mozilla Developers or W3Schools) :

• Declaring variables using var
• Accessing the HTML element with a unique ID using document.getElementById()
• Declaring click event trigger using onclick, continued by declaring the function to be executed for that particular event.
• Declaring the outside-the-trigger-and-reachable function, with particular name and using argument. The argument is the received value of the function. You can also declare parameter(s) if you need to pass some variable(s) from another function(s).
• Outputting/"printing" the result value in the HTML DOM using innerHTML
• Declaring empty array using []
• Rounding down a number using Math.floor()
• Convert number to string using toString()
• Creating an array of "substrings" from a string using split()
• Adding (or removing) array element(s) using splice()
• Get the array's length using length
• Reverse the order of an array using reverse()
• Join the array elements into one string using join("") — without any separator. By default, using only join(), the new combined string will have comma(s) as the element separator.
• Looping using for()
• Conditional statement(s) using if{...}else{...}
• Returning "something" from a function using return, in this example I returned a value
• Adding additional comments in JavaScript using // for single line, or /*...*/ for multiple lines. The comments won't be executed, they're just for comments of what's going on on that particular line(s) of method. Readability and maintainability purpose

//============================================// //the variables: button, input, and result var b = document.getElementById("click"), r = document.getElementById("result"), ip = document.getElementById("input1"); //============================================// //button onclick b.onclick = function () { var inputValue = document.getElementById("input1").value; r.innerHTML = convert(inputValue); }; //============================================// //main formatter function function convert(a) { var f = [], r; //check if input is positive if (a > 0) { r = Math.floor(a).toString(); //convert to integer then to string f = r.split("").reverse(); //create substrings array and reverse it //append the comma(s) for (var i = 1; i <= Math.floor(f.length / 4); i++) { f.splice((4 * i - 1), 0, ","); } a = f.reverse().join(""); //reverse the array and combine the elements } //output for other: negative, non-number, and zero else { a = "positive integer please"; } return a; //return the result } //============================================//

Update: additional details.

---

Let's take a closer look at the sequence:

for (var i = 1; i <= Math.floor(f.length / 4); i++) {
  f.splice((4 * i - 1), 0, ",");
}

The splice() method will remove 0 element, and instead, it will append the comma (",") at a particular index (4 * i - 1), for i = 1 to Math.floor(f.length / 4) times. The number series (the index series) from that will be: 3, 7, 11, 15, etc., depends on the length of the string.

---

The appending process:
For instance we have a number, 123456789. It has the length of 9 digits (elements). It will then be reversed to 987654321. Remember, the first array element index is 0. The number 9 there is at index 0.
So, then:

1. For i = 1, the comma will be appended at index 3 of 987654321, resulting : 987,654321. The length is now up by one to 10 elements.
2. For i = 2, the comma will be appended at index 7.
   Combined with the i = 1, resulting 987,654,321. The array length is now also up by one to 11 elements and the iteration is complete, because the stopping limit has already been reached. That is, Math.floor(11 / 4) = 2.
   In conclusion, for this looping sequence, it sequentially appended two commas for 987654321.

Note: the loop stopping limit isn't a static value, therefore, you can make it as a variable inside the iteration. In my example above, I just put Math.floor(f.length / 4) as the limit.

Let's continue, after all the appending is done, the 987,654,321 will then be reversed to 123,456,789

And that's the super sweet result.

HTML Elements
With some inline CSS. Because this is a quick doodle, so quack, I didn't type proper CSS. <div style='padding:0;margin:0;text-align:center'> <input id='input1' class='ib' placeholder="type integer here then click below" size='30' type="text"> <br> <button type='button' class='ib' id='click'>CLICK</button> </div> <div id="result" style="font-size:2em;text-align:center;height:2em"></div>

Basic Styling (CSS)
Additional CSS .ib { padding: 10px 20px; margin: 0 auto; margin-top:10px; border-radius: 10px; }

I use that method for basic formatting a large number. Any number I got from anythong. Anything. So that it will be neater to look at.
Of course, there's a lot of other methods you can find on the internet. Mine here is a result of trial and error. Hehe.

---

Demo #2
For positive/negative integer and triggered using input event

See the Pen Integer Formatter by Monkey Raptor (@monkeyraptor) on CodePen.

---

That's about it. Feel free to copy and perhaps you can add something else.