DEV Community

Cover image for JavaScript 101: Breaking Down Functions
Kara Luton
Kara Luton

Posted on • Updated on

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
}
Enter fullscreen mode Exit fullscreen mode

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() {
 // 
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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

function helloWorld(name, age) {
 // code to be executed
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (12)

Collapse
codingnninja profile image
Ayobami Ogundiran • Edited

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

Collapse
karaluton profile image
Kara Luton Author

Thank you! And thanks for the addition!

Collapse
tierraskyllc profile image
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.

Collapse
karaluton profile image
Kara Luton Author

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

Collapse
fellipegpbotelho profile image
Fellipe Geraldo Pereira Botelho

Nice job :)

Collapse
jamonjamon profile image
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.

Collapse
karaluton profile image
Kara Luton Author

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

Collapse
jamiekaren profile image
Jamie Ferrugiaro

Great post! Especially pointing out argument versus parameters.

Collapse
karaluton profile image
Kara Luton Author

Thank you!