Functions

Go back to JavaScript Index

What is a function?

When programming, we often need to use the same piece of code multiple times. We can do this by actually writing the same piece of code multiple times - or we can wrap the code blocks in a function that we can call as many times as we want.

Basically, a function is a code block performing a specific task.

In JavaScript, there are a number of way to declare a function...

Function Declaration

function myGreeting() {
console.log("Greetings!");
}
1.0 | Function declaration

A function declaration consist of:

The function keyword.

The name of the function (also known as the identifier) - in the example above, the name of the function is myGreeting.

A set of parentheses that may hold a number of parametres - in the example above, there are no parametres.

The code block that is meant to run when the function is called, enclosed in curly brackets.

Function call

To run the function, you need to call it:

myGreeting();
1.1 | Calling a function

Notice that we use the name (or the identifier) of the function followed by the parentheses to call it.

Parametres and arguments

let nameInput = prompt("What's your name?")
function myGreeting(name) {
console.log(`Greetings ${name}!`);
}
myGreeting(nameInput);
1.1 | Function with parametres

In the example above, we store the name input we get from a prompt in a variable called nameInput. We then declare a function called myGreeting that takes one parametre: name. The function logs the string Greeting + the name that is passed as an argument to the console. When we call the function (last line), we use the name of the function myGreeting and pass the value of nameInput as argument to the function

Standard values

ES2015 also made it possible to have a standard value that is used if an argument is not passed to a function that takes a parameter:

function myGreeting(name = 'stranger') {
console.log(`Greetings ${name}!`);
}
myGreeting();
1.2 | Function with a standard parametre

In the example above, we declare a function called myGreeting that takes one parametre: name. The parametre has a standard value: stranger. The function logs the string Greeting + the name that is passed as an argument, OR stranger if no argument is passed, to the console. In the function call, we don't pass an argument to the functions, which means that Greetings stranger! will be logged in the console.

Function expression

In connection with function expressions the name of the function is often ommitted - and so the function is known as an anonymous function. They are often stored in variables, normally using the const keyword:

const isWeekend = function(day) {
if (day === "Saturday" || day === "Sunday") {
console.log("It's weekend");
} else {
console.log("It's not weekend yet");
}
}
isWeekend("Monday");
1.3 | Function expression with parametre

Arrow functions

ES2015 introduced arrow functions as a shorter syntax for writing a function:

const greeting = (name) => {
console.log(`Greetings ${name}!`);
}
1.4 | Arrow function with parametre

In the example above, we declare a function called greeting using the const keyword. We then assign a parametre to the function: name, enclosing it in parentheses. We then create an arrow that "leads us" to the code block of the function, enclosed in curly brackets.

The function call looks the same no matter how the function has been declared.

Next up

What's next?

Next up: Scope