Lesson Monday

In the writing functions lesson we wrote all of our functions in the JavaScript console. This works for very simple functions that can be written on a single line, but it quickly becomes unwieldy as we want to write longer functions.

There are a few solutions. You can write your functions in Atom and then copy & paste into the JavaScript console. Or you can try out JSFiddle, a useful tool for experimenting with JavaScript. With JSFIddle, you can write code in the JavaScript box and then execute it by clicking the Run button on the menu bar at the top of the JSFiddle page.

JSFiddle screenshot

Type the following two functions in the JavaScript box at JSFiddle.

var saySomething = function(whatToSay) {
  alert(whatToSay);
};
var add = function(number1, number2) {
  return number1 + number2;
};

Writing out your functions on multiple lines is clearer even with these simple functions; it will be essential when you begin writing more complex functions.

Hit the Run button and... nothing happens. This is because we have simply defined two functions and made them available for future use. We have not yet called the functions, so the code inside of them has not yet been executed. Now add this line after the other lines:

saySomething("hi");

Hit the Run button again and you should see an alert pop up.

Now add another line:

add(3, 5);

Hit Run and you should still see your alert popup, but the new line (add(3, 5);) doesn't appear to do anything. This is because our add() method returns the result, but we don't do anything with that return value. When we were running this code directly in the JavaScript console, the console automatically displays any return value. But in "real life" programming if you want to display something, you have to tell the computer to do that. We have a variety of options available to us. We could, for instance, assign the return value to a variable and then display it by calling the built-in JavaScript alert() function.

var result = add(3, 5);
alert(result);

Now when we hit Run we should get an alert with our result, 8. If you aren't seeing the alert, make sure that you didn't delete your add() function definition code.

Let's update our little program to make use of both functions:

var saySomething = function(whatToSay) {
  alert(whatToSay);
};

var add = function(number1, number2) {
  return number1 + number2;
};

var result = add(3, 5);
var outputText = "The sum is " + result + ".";
saySomething(outputText);

The var result = add(3, 5); line calls the add() function, passing it 2 arguments - the number 3 and the number 5. Our add() function at this point assigns the first argument (3) to the parameter number1 and the second argument (5) to the parameter number2. The add() function then returns the number 8 (in this case), which our code assigns to the variable result. Hence the result variable is now the number 8.

The next line - var outputText = "The sum is " + result + "."; - concatenates three things together into a new string, which it then assigns to a new variable outputText. Note that result above is not in quotes. If you wrote var outputText = "The sum is " + "result" + "."; then outputText would be the string The sum is result. But because we did not put result in quotes, the computer understands the result variable's value (8) should be substituted here. Hence the outputText variable is assigned the string "The sum is 8.".

The last line - saySomething(outputText); - calls our saySomething() function, passing it the value that the variable outputText is standing in for - the string "The sum is 8.". Our saySomething() function assigns that string passed in to the variable whatToSay. It then calls the built-in JavaScript function alert() in order to pop up a dialog box with that string.

If desired, you could refactor those last three lines into one line:

var saySomething = function(whatToSay) {
  alert(whatToSay);
};

var add = function(number1, number2) {
  return number1 + number2;
};

saySomething("The sum is " + add(3,5) + ".");

That refactored line calls the saySomething() function and passes it a string, which is concatenated together from 3 parts. The first part is just the string "The sum is " and the last part is just the string ".". The second part is the number 8 because that is the return value of the add() function when passed the arguments 3 and 5. Hence the concatenated string: "The sum is 8."

Terminology


  • JSFiddle - An online tool that allows users to write and run JavaScript directly in the browser.

  • Executing a function on a thing is often referred to as calling a function.

  • Once called, many functions will provide a result of some kind. This is known as returning, and the result is often referred to as a return value.

Examples


var saySomething = function(whatToSay) {
  alert(whatToSay);
};

In the code above, a function named saySomething() is defined. When called this function will trigger an alert.

var add = function(number1, number2) {
  return number1 + number2;
};

Here, a function named add() is being defined. It returns the sum of the two numbers it is provided.

saySomething("The sum is " + add(3,5) + ".");

Here, we call our saySomething() function. The argument to saySomething() also contains our add() function, and has a String concatenated on either end.