//PROCESS: String addition

<New code>

//PROCESS: var newString = "Hello" + " " + "Kitty!";
— concatenates strings into one bigger string
//PROCESS: var newString = "Hello".concat(" Kitty!");
— concatenates two strings

//PROCESS: var extractedInteger = parseInt( '1.618 is the golden ratio' );
— extracts the integer portion at the beginning of the string: 1
//PROCESS: var extractedDecimal = parseFloat( '1.618 is the golden ratio' );
— extracts the decimal portion at the beginning of the string: 1.618

Adding numbers together

Adding numbers together in Javascript is straightforward:

var easyMath	= 2 + 2;	
// easyMath now contains 4

Adding strings together

String addition is called concatenation. In it's basic form it is very similar to adding numbers:

var newString = "Hello" + " " + "Kitty!";
// newString now contains "Hello Kitty!"
// Note that we had to add in the space character in between the words

This is also a way to concatenate strings:

var newString = "Hello".concat(" Kitty!");
// newString now contains "Hello Kitty!"

Common problems

Nested quotes

You can use either single quotes '' or double quotes "" to create strings. Javascript will put anything between the two quotes inside the string. So these two statements below are exactly the same:

var frenchGreeting = "Bonjour!";
var frenchGreeting = 'Bonjour!';

However, Javascript will throw an error if the string surrounded by quotes contains the same kind of quote.

There are a couple ways around this. One is to escape the quotes in the string with an escape character, which in Javascript is a backslash: \

var brokenString	= 'It's a beautiful day...';
// brokenString will cause an error because of the apostrophe in "it's"

var workingString 	= 'It\'s a beautiful day...';
// The escape character tells Javascript to read the apostrophe as part of the string

Another way to deal with this is to surround the quote with a different kind of quotation mark:

var brokenString	= 'It's a beautiful day...';
var workingString 	= "It's a beautiful day...";

A common example:

document.getElementById('outputID').innerHTML = "<strong id="strongID">You win!</strong>";
// fail

document.getElementById('outputID').innerHTML = "<strong id=\"strongID\">You win!</strong>";
// win!

Adding strings and numbers together

If you add a number and a string together, it will add them both together like strings.

var answer = 4 + 8;
// answer now holds 12

var answer = '4' + 8;
// answer now holds '48'

var newSize = 16 + '10px';
// newSize now holds '1610px'

Converting strings to numbers

In order to around the string to number addition problem, it is handy to convert strings to numbers. This is especially important when you read information from an <input> value or from a .style property of an element.

We can use two special function to extract numbers from strings: parseInt() for extracting integers, and parseFloat() for extracting floating decimal numbers. The words parse means to extract information from some data.

var parsedDecimal = parseFloat( '3.141592654 is a rough approximation of pi' );
// parsedDecimal now holds 3.141592654

var parsedInteger = parseInt( '3.141592654 is a rough approximation of pi' );
// parsedInteger now holds 3

var newSize = 16 + parseInt( '10px' );
// newSize now holds 26

var newSize = (16 + parseInt( '10px' ) ) + 'px';
// newSize now holds '26px'

Check your understanding

What is inside answer in the following example:
var answer = 8 + 12;

What is inside answer in the following example:
var answer = 8 + '10px';

What is inside answer in the following example:
var answer = 'Hello world' - 'world';

What is inside answer in the following example:
var answer = ( 8 + 10 ) + 'px';

What is inside answer in the following example:
var answer = 'Hello' + 'Kitty';

What is inside answer in the following example:
var answer = 'Today is ' + 'St. Patrick's day';

What is inside answer in the following example:
var answer = parseInt('9.8 m/s2');

Learn more