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:
Sponsored
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, agent skills, tech comm careers, and more. Check out my AI courses for more on the latest in AI and tech comm. If you're looking for info about documenting APIs, see my API documentation course.
If you're a technical writer and want to keep on top of the latest trends in tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me.
Finally, I want to note a couple of things. I usually write the first drafts of my posts myself and then use AI to improve accuracy, clarity, and detail in places, so my writing is a mix of human and AI. (Hopefully that's not too off-putting.) Also, the opinions I express on my blog are my own perspectives, not those of my employer.