JavaScript Functions

A function is a block of code that performs an action or returns a value. Functions are custom code defined by programmers that are reusable, and can therefore make your programs more modular and efficient.

In this tutorial, we will learn several ways to define a function, call a function, and use function parameters in JavaScript.

Defining a Function

Functions are defined, or declared, with the function keyword. Below is the syntax for a function in JavaScript.

function nameOfFunction() {
    // Code to be executed
}

The declaration begins with the function keyword, followed by the name of the function. Function names follow the same rules as variables — they can contain letters, numbers, underscores and dollar signs. The name is followed by a set of parentheses, which can be used for optional parameters. The code of the function is contained in curly brackets .

In our first example, we'll make a function declaration to print a greeting statement to the console.

// Initialize greeting function
function greet() {
    console.log("Hello, World!");
}

Here we have the code to print Hello, World! to the console contained inside the greet() function. However, nothing will happen and no code will execute until we invoke, or call the function. You can invoke a function by writing the name of the function followed by the parentheses.

// Invoke the function
greet();

Now we will put those together, defining our function and invoking it.

// Initialize greeting function
function greet() {
    console.log("Hello, World!");
}

// Invoke the function
greet();

With the call for greet();, the function will run and we will receive the Hello, World! as the program's output.

output

Now we have our greet() code contained in a function, and can reuse it as many times as we want.

Using parameters, we can make the code more dynamic.

Function Parameters

In our greet.js file, we created a basic function that prints Hello, World to the console. Using parameters, we can add additional functionality that will make the code more flexible. Parameters are input that get passed into functions as names and behave as local variables.

When a user logs in to an application, we may want the program to greet them by name, instead of just saying, "Hello, World!".

We'll add a parameter into our function, called name, to represent the name of the person being greeted.

// Initialize custom greeting function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

The name of the function is greet, and now we have a single parameter inside the parentheses. The name of the parameter follows the same rules as naming a variable. Inside of the function, instead of a static string consisting of Hello, World, we have a string containing our parameter, which is now behaving as a local variable.

You'll notice we haven't defined our name parameter anywhere. We assign it a value when we invoke our function. Assuming our user is named Sammy, we'll call the function and place the username as the argument. The argument is the actual value that gets passed into the function, in this case it is the string "Sammy".

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

The value of "Sammy" is being passed into the function through the name parameter. Now every time name is used throughout the function, it will represent the "Sammy" value. Here is the whole code.

// Initialize custom greeting function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

When we run the program above, we'll receive the following output.

Output

Now we have an example of how a function can be reused. In a real world example, the function would pull the username from a database instead of directly supplying the name as an argument value.

In addition to parameters, variables can be declared inside of functions. These variables are known as local variables, and will only exist inside the scope of their own function block. Variable scope determines variables' accessibility; variables that are defined inside of a function are not accessible from outside of the function, but they can be used as many times as their function is used throughout a program.

// Initialize add function
function add(x, y) {
    return x + y;
}

// Invoke function to find the sum
add(9, 7);

// Assign add function to sum constant
const sum = function add(x, y) {
    return x + y;
}

// Invoke function to find the sum
sum(20, 5);

// Assign function to sum constant
const sum = function(x, y) {
    return x + y;
}

// Invoke function to find the sum
sum(100, 3);

// Define multiply function
const multiply = (x, y) => {
    return x * y;
}

// Invoke function to find product
multiply(30, 4);

// Define square function
const square = x => {
    return x * x;
}

// Invoke function to find product
square(8);

// Define square function
const square = x => x * x;

// Invoke function to find product
square(10);