Learn Hard The Code Way: Adding and Concatenating

Using Java Script!


In 2014 I took a year off from writing code to focus on my family, and decided that 2015 would be the year I do the opposite. Of course, a lot has happened during my hiatus: Node got popular and then unpopular again, Ember.js was introduced, developers started using task runners and build tools to improve their workflow, and Uber started making it easier for people to get around the city. One thing that hasn’t changed is how concatenation works in Java Script.

Un fortunate ly.

Merriam Webster’s dictionary likely defines concatenation as “the action of connecting more than one thing together.” In code, we concatenate strings and/or numbers all of the time. For example, if we have two strings, string1 and string2, many Java Script developers would tell us that we can connect them together using the + operator.

var concatenatedstrings = string1 + string2;
Java Scripting with Firefix developer tools

The + operator is known to most of us as a symbol for addition, so it does not make sense to use it in this situation. Addition is for numbers, not letters! Luckily, there exists a function that allows us to concatenate strings The Right Way™: concat().

var concatenatedstrings = string1.concat(string2);

This is what researchers call an “abstraction,” or something that does the hard work for you but presents it to you in an easy way. The “concat” function — although less intuitive, misspelled, and more characters than the + operator — allows us to concatenate strings without worrying about the fact that + is for addition and not concatenating strings.

What about numbers?

Concatenating numbers, also known as “addition” to ivory tower mathematicians, is even more unintuitive in this “language.”

var concatenatednumbers = number1 + number2;
JavaScripts in Firefix again

One would think that the result would be “23” but nope! And if you try to use the concat() function, it is as if Java Script had amnesia and forgot that it exists.

Java Script forgets

So what does one do if they want to concatenate number1 and number2 to get 23. Well, we need to temporarily change them to get that result.

// our original numbers to concatenate
var number1 = 2;
var number2 = 3;
// our placeholder numbers
var placeholdernumber1 = 2;
var placeholdernumber2 = 3;

Then we need to change number1 and number2 to equal numbers that add up to our wanted result. In this example, 23.

// we know 19 and 4 add up to 23
number1 = 19;
number2 = 4;

Then we can concatenate with the + operator and change number1 and number2 back to their original numbers.

// concatenate to get 23!
var concatenatednumbers = number1 + number2;
// change back to original values
number1 = 2;
number2 = 3;
A lot of Java Script in Firefix is needed to concatenate numbers!

Note: The line that is highlighted above was written to correct an error in the previous instruction, where I left out the semi-colon.

That’s a *lot* of code to do something that should be very simple, right? Right! So let’s go back to the previously mentioned topic of abstraction. Javascript doesn’t have a function that abstracts this yet—many are keeping an eye out for it in the ES7 spec — so we have to write one ourselves.

var concatenatenumbers = function(firstNumber, secondNumber) {
// initialize placeholders
var placeholderfirstnumber,
placeholdersecondNumber;
  // all the abstraction
var concatenatednumbers = firstNumber + "" + secondNumber;
  // return the concatenated numbers
return firstNumber.toString() + secondNumber.toString();
}

So now we can concatenate our two numbers by calling the concatenatenumbers() function.

using Java Script in Firefix to abstractionate concatenation

Congratulations, pals, we went from lots of lines of code to just one — and we are finally well on our way to becoming real web developers in 2015!


Jenn Schiffer is a coder who thinks everyone should have to learn how to code so she can eventually stop.