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 functionfunction helloWorld(param1) {}. What's inside the parentheses is your parameter while theparam1variable 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.
Top comments (9)
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
Thank you! And thanks for the addition!
? 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.
Ah yes! Thank you for catching that. I’ll get it updated.
Nice job :)
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.
That’s awesome! Nashville is a great town - it’s grown a ton!
Great post! Especially pointing out argument versus parameters.
Thank you!