JS Variable Merge

by Colin Soderstrom

HTML

<p>Click the button to join two strings into one new string.</p>

<button onclick="result();">Try it</button>

<p id="demo"></p>

<script>
function result() {
    var text = "abc";
    var number = "123";
    var resA = text.charAt(0) + number.charAt(0) + text.charAt(1);
    var resB = number.charAt(1) + text.charAt(2) + number.charAt(2);
    var resC = resA + resB;
    document.getElementById("demo").innerHTML = resC;
}
</script>

JavaScript

//First the strings should be defined in variables. Simple enough.

var text = "abc";
var number = "123";

//Next a method for selecting the individual letters/numbers needs to be coded. This can be done using the charAt() Method.
//Ref: http://www.w3schools.com/jsref/jsref_charat.asp

var txtRes = text.charAt(0);

//This will get the letter "a" out of the text variable. But using this method would require selecting each individual letter/number from both variables.

var txtRes1 = text.charAt(0);
var txtRes2 = text.charAt(1);
var txtRes3 = text.charAt(2);
var numRes1 = number.charAt(0);
var numRes2 = number.charAt(1);
var numRes3 = number.charAt(2);

//From here a simple function could be coded that would return all the variables added together with a JavaScript operator (txtRes1 + numRes1 + txtRes2...). But in programming it is generally a bad idea to write the same code twice like what is shown above for performance reasons. The code should work smarter not harder.

//In the HTML window there is a further refined version of this coding that meets the desired result. However this could be coded more efficiently by adjusting the resA and resB variables to add a variable in the charAt() count enabling the result() function to count any number of characters in the starting variables using increasing increments. If the function needed to go a bit further it could be coded to decipher if the character in the string is a letter or number, organize these variables alphabetically/numerically, then merge them together as they've been done here. With JavaScript there are many different possibilities of what can be done and those only increase when it is utilized with other libraries/frameworks like jQuery, Grunt, Angular, etc. With pure JavaScript it can all be written however there are many tools that increase productivity while achieving the same functionality.