Detailed JavaScript Function Overview

Mohan Kumar Sah — Wed, 29 Jun 2022 16:30:29 +0000

Intro to functions

A function is a reusable code block that can be called whenever we need to run it. A function can called within the function(recursive function) or from anywhere in code.

In JavaScript, We can create function in two ways

Function declaration
Function Expression

function declaration

The function declaration also known as function statement defines a function with the specified parameters. A function created with function declaration require a name.

// Example of function declaration
function sum(a,b) {
   return a+b;
}
sum(2,5) // 7

The above function return the sum of two numbers a and b. Function parameters a and b passed to functions by value, so if the code within the body of a function assigns a completely new value to a parameter that was passed to the function, the change is not reflected globally or in the code which called that function.

By default, functions return undefined. To return any other value, the function must have a return statement that specifies the value to return.

Function declaration Hoisting

Function declarations in JavaScript are hoisted to the top of the enclosing function or global scope. You can use the function before you declared it:

declarationHoisted();       // logs "hoisted function"

function declarationHoisted() {
  console.log('hoisted function');
}

Functions Scope

A function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function, and any other variables to which the parent function has access.

// The following variables are defined in the global scope
let num1 = 20,
let  num2 = 3,
let  name = 'mohan';

// This function is defined in the global scope
function multiply() {
  return num1 * num2;
}

multiply(); // Returns 60

// A nested function example
function getScore() {
  let num1 = 2,
  let num2 = 3;

  function add() {
    return name + ' scored ' + (num1 + num2);
  }

  return add();
}

getScore(); // Returns "mohan scored 5"

Function expression

A function expression is very similar to and has almost the same syntax as a function declaration. The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions.

// Example of anonymous function expression
let sayHiAnonymous = function() {
  console.log("hello");
};
// Example of arrow function expression
let sayHiArrow = () =>{
  console.log("hello");
}

Function expression hoisting

Function expressions in JavaScript are not hoisted, unlike function declarations. You can't use function expressions before you create them:

console.log(notHoisted) // undefined
//  even though the variable name is hoisted, the definition isn't. so it's undefined.
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
   console.log('bar');
};

Function arguements and parameters

The number of things passed in function is called as function arguements and the number of params that a function is called as function parameters.

const myFunc = function(a:any,b:any){
console.log(`number of things passed in function ${arguments.length}`);

console.log(`The number of params that function takes is ${myFunc.length}`);

if (arguments.length === myFunc.length) {
   console.log(`we have a match`);
} else {
   console.log(`No match`);
}
};
myFunc(2,3);  // "we have a match"

myFunc(2,3,4,5,6) // "No match"

DEV Community: Mohan Kumar Sah