One of the most important parts of JavaScript is making code that other code can reuse. To do this, you organize your code into functions that perform specific tasks. A function is a series of code statements combined in a single block and given a name. You can then execute the code in the block by referencing that name

Defining Functions

You define a function by using the function keyword followed by a name that describes the use of the function, a list of zero or more arguments in (), and a block of one or more code statements in {}. For example, the following is a function definition that writes "Hello World" to the console:

function myFunction(){
  console.log("Hello World");
}

To execute the code in myFunction(), all you need to do is add the following line to the main JavaScript or inside another function:

myFunction();

 

Passing Variables to Functions

Frequently you need to pass specific values to functions, and the functions will use those values when executing their code. You pass values to a function in comma-delimited form. A function definition needs a list of variable names in () that match the number being passed in. For example, the following function accepts two arguments, name and city, and uses them to build the output string:

function greeting(name, city){
  console.log("Hello " + name);
  console.log(". How is the weather in " + city);
}

To call the greeting() function, you need to pass in a name value and a city value. The value can be a direct value or a previously defined variable. To illustrate this, the following code executes the greeting() function with a name variable and a direct string for city:

var name = "Brad";
greeting(name, "Florence");



Returning Values from Functions

Often, a function needs to return a value to the calling code. Adding a return keyword followed by a variable or value returns that value from the function. For example, the following code calls a function to format a string, assigns the value returned from the function to a variable, and then writes the value to the console:

function formatGreeting(name, city){
  var retStr = "";
  retStr += "Hello <b>" + name + "/n");
  retStr += "Welcome to " + city + "!";
return retStr;
}
var greeting = formatGreeting("Brad", "Rome");
console.log(greeting);

You can include more than one return statement in the function. When the function encounters a return statement, code execution of the function stops immediately. If the return statement contains a value to return, that value is returned. The following example shows a function that tests the input and returns immediately if it is zero:

function myFunc(value){
  if (value == 0)
    return value;
  <code_to_execute_if_value_nonzero>
  return value;
}



Using Anonymous Functions

So far, all the examples you have seen show named functions. JavaScript also lets you create anonymous functions. These functions have the advantage of being defined directly in the parameter sets when you call other functions. Thus you do not need formal definitions.

For example, the following code defines a function doCalc() that accepts three parameters. The first two should be numbers, and the third is a function that will be called and passed the two numbers as arguments:

function doCalc(num1, num2, calcFunction){
    return calcFunction(num1, num2);
}

You could define a function and then pass the function name without parameters to doCalc(), as in this example:

function addFunc(n1, n2){
    return n1 + n2;
}
doCalc(5, 10, addFunc);

However, you also have the option to use an anonymous function directly in the call to doCalc(), as shown in these two statements:

console.log( doCalc(5, 10, function(n1, n2){ return n1 + n2; }) );
console.log( doCalc(5, 10, function(n1, n2){ return n1 * n2; }) );

You can probably see that the advantage of using anonymous functions is that you do not need a formal definition that will not be used anywhere else in your code. Anonymous functions, therefore, make JavaScript code more concise and readable.

Chapter 2 of 2Next