Get started with functions in JavaScript

Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure - a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.

Function Definition

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

• The name of the function.
• A list of parameters to the function, enclosed in parentheses and separated by commas.
• The JavaScript statements that define the function, enclosed in curly brackets, {...}.

For example, the following code defines a simple function named square:

function square(number) {
  return number * number;
}

The function square takes one parameter, called number. The function consists of one statement that says to return the parameter of the function (that is, number) multiplied by itself. The statement return specifies the value returned by the function: return number * number;

Various ways of defining a function

1. Declaration notation:

   function square(number) {
   return number * number;
   }
   

2. Function as value:

   const square = function() {
    return number * number;
   }
   

3. Using Arrow functions:

   const square = () => {
    return number * number;
   }
   

   The above definition can further be shortened to:

   const square = () => number * number;
   

   Since this function contains only 1 line of code, we may safely omit the { } as well as the return keyword. You can use any of the above mentioned ways to define a function named "square".

Calling the function

Defining a function does not execute it. That's not fair, I have written so much code for nothing to be executed! Let's get into the magical way by which a function is called and the function defined above gets executed.

Defining a function would name the function and specify what to do when the function is called. It prepares javascript understand what logic or code is to be run when this function is called.

Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function square, you could call it as follows:

square(5);

The above statement would call the function with an argument of value 5. The function executes its statements and returns the value 25. However, this would still not display the returned value of 25 anywhere. In order to display this value, we can use console.log().

let result = square(5);
console.log(result);
//25

or directly pass the function call within console.log()

console.log(square(5));
//25

By this, we understand that console.log() is also a function which can take different types of arguments. However, this is a special function since it has a '.' dot parameter in between console and log.

Argument and Parameter

An argument is a value (primitive or object) passed as input to a function. A parameter is a named variable passed into a function. Parameter variables are used to import arguments into functions.

Let's simplify this using the above function's example. Within the function definition, we observed the variable named number which was used within the square function. The value - number, is called as the parameter accepted by sqaure(). Similary, during the function call, we passed the value of 5 to the function as square(5);. Here, the value 5 is referred as the argument passed to square().

I hope this article was helpful in understanding the basics of functions in JavaScript.

Peace!