JavaScript 101: Breaking Down Functions

Functions are at the core of what we do in JavaScript so it's essential that we understand what they do and how they work. But what exactly are functions? A JavaScript function is a block of code that performs a specific task and is executed when something calls it. Think of it like a recipe that's giving you the ingredients (parameters) and the directions (function body) for what you need to do.

Defining a function

Here's a function broken down into what you'll need: the name, parameter(s) and the function body.

function name(parameter) {
 // function body
}

The first step in defining your function is giving your function a name. Your function name can include letters, numbers, underscores and dollar signs. For example, your function could be named helloWorld, helloWorld1, hello_world or $helloWorld.

function helloWorld() {
 // 
}

Next, you need to define your function's parameters. Function parameters go inside the function's parentheses and are separated by commas.

function helloWorld(name) {
 // code to be executed
}

Here's an example of a function with multiple parameters.

function helloWorld(name, age) {
 // code to be executed
}

Quick tip! You may have heard the terms parameters and arguments used in the same way. They are very similar but should not be used to describe the same thing. Parameters are used when defining a function (what goes inside the parentheses) while arguments are the values the function receives from each parameter when the function is executed.

So if you define a variable such as const param1 = 'Hello World'; and then define your function function helloWorld(param1) {}. What's inside the parentheses is your parameter while the param1 variable that you defined as 'Hello World' is your argument.

Finally, the code to be executed will be placed inside the curly brackets. All together everything looks like this:

function helloWorld(name) {
 console.log('Hello ' + name);
}

Invoking a function

Great! We have defined our function but how do we get it to run? You can invoke (or run) a function by referencing the function name followed by parentheses. Let's invoke the function we defined earlier.

helloWorld('Kara');

// Hello Kara

Here I'm passing in 'Kara' as our argument and invoking our function. Then Hello Kara is logged to the console!

And there you have it! You now know how to define and invoke your function. Just remember, that all functions will always return a value. If there is no function body then your function will return as undefined.

function helloWorld() {}; // define your function

helloWorld(); // invoke your function

// undefined

Be sure to follow me on Twitter for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.