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.

Comments

[Jamie Ferrugiaro]

Great post! Especially pointing out argument versus parameters.

[Kara Luton]

Thank you!

[Fellipe Geraldo Pereira Botelho]

Nice job :)

[TierraSkyLLC]

? When you wrote:Here I'm passing in 'Kara' as our parameter. Should it not be called an argument as you wrote above. (what goes inside the parentheses) while arguments are the values the function receives from each parameter when the function is executed. Just trying to understand.

[Kara Luton]

Ah yes! Thank you for catching that. I’ll get it updated.

[Ayobami Ogundiran]

Great post!

"If there is no function body then your function will return as undefined."

This statement takes us further to passing a function as a value to a variable.

console.log(isNigerian (Ayobami));

function isNigerian(person){
return // Boolean
}

Will work but the below will not.

console.log(isNigerian(Ayobami));

const isNigerian = function(person){
return // boolean
}// isNigerian is not a function

Will not work because a function passed to a variable in JavaScript will be hoisted but you cannot access it until JS execution gets to its definition

[Kara Luton]

Thank you! And thanks for the addition!

[Jaimie Carter]

Thanks for that. This makes it very clear.
I see you’re a music publicist.... I used to work for Rondor publishing a lifetime ago. Always loved my visits to Nashville.

[Kara Luton]

That’s awesome! Nashville is a great town - it’s grown a ton!