Javascript Basic – How to define a function in Javascript

Javascript Function

A function is a machine combination of data input, processing, and return. A JavaScript function is executed when “something” invokes it. Functions are a fundamental part of programming in JavaScript, providing a way to group together a set of instructions and execute them when needed. In JavaScript, a function is declared using the function keyword, followed by the name of the function, a set of parentheses, and a set of curly braces containing the code to be executed.

Defining a Function

A function can be defined in many ways. A function consists of the function keyword, followed by: 

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

Example:

function message(){
   console.log('Enablegeek! Happy Learning');
}

Function Invoke or Calling

The function won’t be executed by itself. The code inside the function will execute when “anything” invokes (calls) that function. To invoke the function, we just have to write the function’s name and then a pair of parenthesis.

Example:

function sum (){
   var num1 = 10;
   var num2 = 200;
   console.log(num1 + num2);
}
sum();

Output:

210

Arguments and Parameter

When talking about function, the terms parameter and arguments are often used as the same thing but there is a subtle difference.

• Parameters are variables listed as a part of the function  definition 
• Arguments are the values passed to the function when it is invoked.

Example:

function add(a, b){ //Function defined by parameter
   console.log(a+b);
}
add(3, 45); //Provoking function by arguments

Output:

48

Arguments Object

An argument is an object inside a function. Also augments is a defined keyword inside a function. Whenever a function is defined, an argument is also defined in it.

Example:

function test(a,b,c){
   console.log(arguments)
}
test(1,2,3);

Output:

[Arguments] { '0': 1, '1': 2, '2': 3 }

Return something from the Function

For further use of a result of a function, it should be returned from it. Without returning anything a functional result can’t be stored in any variable.

Example:

function add(a, b){
   return (a+b); // Instead of console.log(a+b)
}
var sum = add(3, 45);
console.log(sum);

Output:

48

Function Expression

The function keyword can be used to define a function inside an expression. You can also define functions using the Function constructor and a function declaration.

Example:

var getRectArea =  function RectArea (height, width){
   return height*width;
}
console.log(getRectArea(20, 30));

Output:

600

Note: A function without a name is called an anonymous function.

Example:

var hello =  function() {
   console.log('Hello geeks');
}
hello();

Output:

Hello geeks

Inner Functions / Nested Function

A function defined on another function is called an inner function. The inner function has to invoke where it is defined.

Example:

function volume(length, width, height){
   function area(length, width){
       return length*width;
   }
   return height*area(length, width);
}
console.log(volume(40,20,30));

Output:

24000

Function Scoping

Javascript has function scope means each function creates a new scope. Variables defined inside a function aren’t accessible from outside the function. Scope determines which variable can be accessible from where.

Example:

function volume(length, width, height){
   function area(){
       console.log(arguments); //Every arguments are accessible here
       return length*width;
   }
   console.log(arguments);
   return height*area();
}
console.log(volume(40,20,30));

Output:

[Arguments] { '0': 40, '1': 20, '2': 30 }
24000

Functions in JavaScript can be used to perform a wide variety of tasks, such as validating user input, manipulating strings or arrays, generating random numbers, or interacting with web APIs. Functions can also be used to make your code more modular and easier to read and maintain, by breaking down complex operations into smaller, more manageable pieces.

JavaScript also supports higher-order functions, which are functions that can take other functions as arguments or return functions as values. Higher-order functions are often used for tasks such as sorting arrays, filtering data, or mapping values to new arrays.