Search⌘ K
AI Features
Home
Courses
JavaScript in Detail: From Beginner to Advanced

Functions in JavaScript

Explore the fundamental concepts of JavaScript functions, including how to define and invoke them, use arguments and return values, assign functions to variables, and understand anonymous functions. This lesson helps you grasp essential function properties and behavior to build effective JavaScript code.

We'll cover the following...

The illustration gives an overview of how the program flow would look for a function. Let’s list the properties of a function.

Function features

A function has the following properties:

  • A list of arguments which can be anything and is optional. This is the input to the function.

  • A program block is executed on the invocation of the function.

  • An output that is returned after the function finishes executing using a return statement.

With these features in mind, let’s learn the corresponding JavaScript syntax.

Basic function syntax and semantic

We know a function can have an input, a program block where all the instructions that would be executed reside, and an output that is returned by the function. Below is an outline of a function in JavaScript.

Here, the function starts with a function token, then the name of the function. This is followed by arguments in parentheses, and concludes with a set of instructions encapsulated within the brackets including a return statement which uses the return token within the set of instructions.

Write a small function that returns the sum of two numbers passed as arguments.

Node.js
// Define function that takes the sum of two numbers
function sum(a , b){
    console.log('Taking sum in the function'); // print to see function execute
    var ans = a + b; // assign sum of a and b to ans
    return ans; // return ans as output
}

In the above code, we wrote a basic function that has two arguments, a and b, written in the parenthesis and followed by the function name sum. Within the function, we take the sum of a and b using the + operator and assign it to ans on line 4. In line 5, we return ans as the output of the function, using the return token.

NOTE: Any instruction written after the return statement in the function is not executed. The function exits as soon as the return statement is executed.

So far, we have only written a function. Now, we can execute the function.

Function invocation

A function is executed when invoked or called. To call or invoke the defined function, use the () parenthesis. Within a program, there will be a call to a function. The control is handed to the function so it can execute its instructions. As soon as the return statement is executed, the control is returned back to the caller along with the output.

Let’s invoke the function we previously created.

Node.js
// Define function that takes the sum of two numbers
function sum(a , b){
    console.log('Taking sum in the function'); // print to see function execute
    var ans = a + b; // assign sum of a and b to ans
    return ans; // return ans as output
}
var var1 = 5; // assign 5 to var1
var var2 = 6; // assign 6 to var2
var var3 = sum(var1, var2); // call sum and assign the output to var3
console.log(var3); // print the value of var3

In the code above, we initially define the same function that we did previously, lines 2 to 6. We then create two variables, var1 and var2, and assign them to 5 and 6 respectively. Finally, on line 10, we create a variable var3 to which we assign the output of sum function with arguments var1 and var2. Finally, the var3 variable’s assigned value is printed in line 11. The printed value is 11; the sum function calculates the sum of the arguments passed and returns the sum of the values of variable var1 and var2. Note that var3 is only printed after the sum function finishes executing.

NOTE: The ans variable is not accessible outside the function as it is a local variable.

Assigning functions to variables

We have invoked functions and assigned variables to the value returned from the invocation of functions. What happens if we assign the function to a variable without any invocation?

Node.js
// Define function that takes the sum of two numbers
function sum(a , b){
    console.log('Taking sum in the function'); // print to see function execute
    var ans = a + b; // assign sum of a and b to ans
    return ans; // return ans as output
}
var var1 = 5; // assign 5 to var1
var var2 = 6; // assign 6 to var2
var var3 = sum; // assign sum to var3
console.log(var3); // print the value of var3

We use the same code as in the previous example, but this time we do not invoke the function sum. The result shows that var3 is assigned to a function. This is because, in JavaScript, we can assign variables to functions.

Invoking assigned functions to variables

After the assignment, these variables can invoke the same function in the same way.

Node.js
// Define function that takes the sum of two numbers
function sum(a , b){
    console.log('Taking sum in the function'); // print to see function execute
    var ans = a + b; // assign sum of a and b to ans
    return ans; // return ans as output
}
var var1 = 5; // assign 5 to var1
var var2 = 6; // assign 6 to var2
var var3 = sum; // assign sum to var3
console.log(var3(var1, var2)); // print the value of var3 after invocation

In the above code, we invoke the sum function through the variable var3 on line 11. This shows the flexibility of JavaScript as it allows us to assign functions to variables.

Assigning a variable to the function declaration

Another alternative is assigning a function declaration to a variable is below.

Node.js
var var1 = 5; // assign 5 to var1
var var2 = 6; // assign 6 to var2
var var3 = function (a , b){
    console.log('Taking sum in the function'); // print to see function execute
    var ans = a + b; // assign sum of a and b to ans
    return ans; // return ans as output
}
console.log(var3(var1, var2)); // print the value of var3

The above code shows how we can remove the sum function and assign var3 to the same function. JavaScript lets us create functions and assign them directly to variables, shown in lines 3 to 7. Importantly, we do not give a name to the function as we have the var3 variable to refer to that function.

NOTE: A function where we do not assign a name is called an anonymous function in JavaScript. In the case above, var3 was assigned to an anonymous function.

Invoke functions at their declaration

Another way is to declare a function and invoke it using the parenthesis directly after declaration, shown below.

Node.js
var var1 = 5; // assign 5 to var1
var var2 = 6; // assign 6 to var2
var var3 = function (a , b){
    console.log('Taking sum in the function'); // print to see function execute
    var ans = a + b; // assign sum of a and b to ans
    return ans; // return ans as output
}(var1, var2); // invoke the function
console.log(var3); // print the value of var3

The above code shows that when var3 is assigned to a function declaration, we can invoke it using the () parenthesis (line 7), while passing it the arguments, which then assigns var3 the returned value of the function.

Functions without arguments or a return statement

JavaScript creates no restrictions on whether or not arguments have return statements. Let’s see how functions act without or without it.

Functions without arguments

Functions without arguments declare functions with empty parentheses. Look at the following example.

Node.js
// Define function that return a string 'Jack'
function getName(){
    console.log('getName function executed'); // print to see function execute
    return 'Jack'; // return string 'Jack'
}
var var3 = getName(); // assign 'Jack' to var3
console.log(var3); // print the value of var3

In the above code, see how the function runs smoothly with no arguments required by the function.

NOTE: Invoking a function without arguments when arguments are required will give an undefined value for each argument.

Functions without a return statement

It is common for functions to not return an output, like the following example.

Node.js
// Define function that prints the argument passed
function printName(name){
    console.log('printName function executed'); // print to see function execute
    console.log('name:',name);
}
function printAge(age){
    console.log('printAge function executed'); // print to see function execute
    console.log('age:',age);
    return; // end function without returning anything
    console.log('This will not be executed.') // This statement not executed
}
var var1 = 'John'; // assign string 'John' to var1
var var2 = 12; // assign 12 to var2
var var3 = printName(var1); // assign printName output to var3
console.log(var3); // print the value of var3
var var3 = printAge(var2); // assign printAge output to var3
console.log(var3); // print the value of var3

In the code above, the printName function prints the variable and is passed as an argument. Since the task is only to print the argument, the function returns nothing. In line 16, when the returned value of printName is assigned to var3, printing it in the following line shows that an undefined value is assigned to var3. Meanwhile, the same is true of the printAge function. The difference is that this function has a return statement without any value. This will terminate the function and return undefined value, the same as the printName function.

NOTE: Functions in JavaScript are of type objects, but their unique characteristics allow us to refer to them as type function itself. We will refer to the type of function as a function or object interchangeably.