JavaScript: Functions

Functions are subroutines (chunks of code that perform an action) stored in a container so that you can reference the container by simply calling the container's name. This helps simplify your code, because rather than having a long list of JavaScript commands written out, you just reference the container, which is stored in your js file.

You first declare the function. You can then call the function.

Declare a Function

To declare a function, write the word function followed by the name of the function, the function's parameters (in parentheses), and then the function's code block.

//declare the function
function identifyWidgets() {
// run some code ...;
}

Parameters in Functions

The parentheses after the function name allow you to store parameters for the function. Parameters are variables that the function works with. When you call the function in your web page code, you can pass the function specific values for the parameters, and those values will replace the parameters in the function's code.

Here's an example function with 4 parameters:

//declare a function with 4 parameters
function identifyWidgets(quadrant,size,duration,location) {
//run some code that includes those parameters
var widgetTotal = quadrant + size + duration + location;
console.log(widgetTotal);
}

The function has four parameters: quadrant, size, duration, and location. These parameters can be manipulated in the code block as variables.

Note that as you're declaring functions, you can include variables inside your function, as the previous example does with var widgetTotal. If you do list variables here, they'll only be available inside the function. You won't be able to call the variable in other places. If you want to use the variable outside the function, you must declare it outside the function.

Calling a Function

To call a function, type the name of the function and include specific values for the parameters, like this:

identifyWidgets (2,300,6000,50);

These values are then passed into the function's parameters. Essentially you're saying var quadrant = 2, size = 300, duration = 6000, location = 50;. The function then runs the code block using those specific values.

If you pass too many parameters to your function, the extra parameters are ignored. In the following example, the "John Doe" and 65 are ignored:

identifyWidgets (2,300,600,50,"John Doe",65);

The following example doesn't have enough parameters:

identifyWidgets (2,300);

The missing parameters will be treated as undefined in the function. These undefined parameters may or may not break your function's code. It depends on how you've written the function.

Returning Information

Functions don't just accept incoming information. Functions can also return information. When you add return in your function code, the function will send that information back. Here's an example:

//declare a function with 4 parameters
function identifyWidgets (quadrant,size,duration,location) {
//run some code with the parameters
var widgetTotal = quadrant + size + duration + location;
console.log(widgetTotal);
//return the value for widgetTotal
return widgetTotal;
}

In this example, the value for widgetTotal will be passed back to the place where you called the function.

About Tom Johnson

I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.