DEV Community

Cover image for All About JavaScript Function
Khan Rabiul
Khan Rabiul

Posted on • Edited on

All About JavaScript Function

What We Will Learn?

  1. What Is Function
  2. Terminologies
  3. Different Types of Functions
  4. Function Declarations
  5. Function Executions
  6. Parameter
  7. Call Stack
  8. Nested Functions
  9. Functions Scope
  10. Closure
  11. Callback Function
  12. Higher Order Function
  13. Pure Function
  14. IIFE
  15. Recursion

🧑‍đŸ’ģ āϜāĻžāĻ­āĻžāĻ¸ā§āĻ•ā§āϰāĻŋāĻĒā§āϟ functionāϕ⧀?

function āĻšāϞ⧋ āĻāĻ•āϟāĻŋ āϕ⧋āĻĄ āĻŦā§āϞāĻ• āϝāĻž āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻ•āĻ°ā§āĻŽāϏāĻŽā§āĻĒāĻžāĻĻāύ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āĻšā§ŸāĨ¤ functionāĻāĻ•āĻŦāĻžāϰ define āĻ•āϰāĻž āĻšāϞ⧇ āĻŦāĻžāϰ āĻŦāĻžāϰ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤ āĻāϤ⧇ āϕ⧋āĻĄ āĻĒā§‚āύāϰāĻžāĻŦ⧃āĻ¤ā§āϤāĻŋ āĻšā§āϰāĻžāϏ āĻĒāĻžāχāĨ¤


🧑‍đŸ’ģ Functions Terminologies:

👉 Defining functions (function āϤ⧈āϰ⧀ āĻ•āϰāĻž):

a. Function Declarations:

āϝāĻ–āύ āĻāĻ•āϟāĻŋ functionāϕ⧇ keyword- function, function āĻāϰ āĻāĻ•āϟāĻŋ āύāĻžāĻŽ, āĻāĻ• āĻŦāĻž āĻāĻ•āĻžāϧāĻŋāĻ• parameterāĻāĻŦāĻ‚ statementāĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϤ⧈āϰ⧀ āĻ•āϰāĻž āĻšā§Ÿ āϤāϕ⧇ function declaration āĻŦāϞ⧇āĨ¤ function declaration, function statement āύāĻžāĻŽā§‡ āĻ“ āĻĒāϰāĻŋāϚāĻŋāϤāĨ¤

statement āĻšāϞ⧋ function āĻāϰ āĻ­āĻŋāϤāϰ {// do this task} code āĻŦā§āϞāĻ•āĨ¤ returnāĻāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ functionāĻĨ⧇āϕ⧇ āĻ•āĻžāĻ™ā§āĻ•ā§āώāĻŋāϤ āĻĢāϞāĻžāĻĢāϞ, functionāϝ⧇āĻ–āĻžāύ⧇ call/invoke āĻ•āϰāĻž āĻšā§Ÿ, āϏ⧇āĻ–āĻžāύ⧇ āĻĒā§āϰ⧇āϰāĻŖ āĻ•āϰāĻž āĻšā§ŸāĨ¤

Image description

function functionName (parameter1, parameter2) {
    return parameter1 + parameter2;
}

functionName(4, 2); // Output: 6
Enter fullscreen mode Exit fullscreen mode

function name āϝ⧇āϕ⧋āύ āĻ•āĻŋāϛ⧁ āĻšāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ āϤāĻŦ⧇ function call/invoke āĻ•āϰāĻžāϰ āϏāĻŽā§Ÿ āĻšā§āĻŦāĻšā§ function name āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻšā§ŸāĨ¤ āύāĻžāĻŽā§‡āϰ āĻļ⧇āώ⧇ āĻ…āĻŦāĻļā§āϝāχ () āĻŦāĻž parenthesesāĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇āĨ¤

function parameters āĻšāϞ⧋ function name āĻāϰ āĻĒāϰ parentheses āĻāϰ āĻ­āĻŋāϤāϰ variableāĨ¤ āĻāĻ•āĻžāϧāĻŋāĻ• āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ⧇āϰ āϜāĻ¨ā§āϝ āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ⧇āϰ āĻŽāĻžāĻā§‡ (,) āĻ•āĻŽāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻšā§ŸāĨ¤

parameters arguments value receive **āĻ•āϰ⧇āĨ¤

functionāĻĨ⧇āϕ⧇ āϝ⧇ āĻĢāϞāĻžāĻĢāϞ āĻĒā§āϰāĻ¤ā§āϝāĻžāĻļāĻž āĻ•āϰāĻž āĻšā§Ÿ āϤāĻž return āϕ⧀āĻ“ā§ŸāĻžāĻ°ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āϝ⧇āĻ–āĻžāύ⧇ functioncall āĻ•āϰāĻž āĻšā§Ÿ, āϏ⧇āĻ–āĻžāύ⧇ āĻĒāĻžāϏ āĻ•āϰāĻž āĻšā§ŸāĨ¤ return āĻāϰ āĻĢāϞ⧇ functionāĻāϰ āĻ•āĻžāϜ āĻļ⧇āώ āĻšā§ŸāĨ¤ āĻ…āĻ°ā§āĻĨāĻžā§Ž return āĻāϰ āĻĒāϰ functionāφāϰ āϕ⧋āύ⧋ āϕ⧋āĻĄ āĻāĻ•ā§āϏāĻŋāĻ•āĻŋāωāϟ āĻ•āϰ⧇ āύāĻžāĨ¤

function call/invoke āĻ•āϰāĻžāϰ āϏāĻŽā§Ÿ ()- āĻāϰ āĻ­āĻŋāϤāϰ āϝ⧇ value āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāĻž āĻšā§Ÿ āϤāĻžāϕ⧇ arguments āĻŦāϞ⧇āĨ¤

b. Function Expression:

function āϕ⧇ function name āĻ›āĻžā§œāĻž declare āĻ•āϰāĻžāϕ⧇ function expression āĻŦāϞ⧇āĨ¤ Function Expression, anonymous function āύāĻžāĻŽā§‡āĻ“ āĻĒāϰāĻŋāϚāĻŋāϤāĨ¤

const functionExpressionfunction = function (num) {
    return num +1;
}

functionExpressionfunction(5); // Output: 6
Enter fullscreen mode Exit fullscreen mode

NB: Function Declaration āĻāĻŦāĻ‚ Function Definition āĻāϰ āĻŽāĻ§ā§āϝ⧇ āĻŽā§ŒāϞāĻŋāĻ• āĻĒāĻžāĻ°ā§āĻĨāĻ•ā§āϝ āĻĨāĻžāĻ•āϞ⧇āĻ“ āϏāĻžāϧāĻžāϰāĻŖ āĻ…āĻ°ā§āĻĨ⧇ function create āĻ•āϰāĻžāϕ⧇ āĻŦ⧁āĻāĻžā§ŸāĨ¤


🧑‍đŸ’ģ Function VS Method (function āĻ“ Method āĻāϰ āĻŽāĻ§ā§āϝ⧇ āĻĒāĻžāĻ°ā§āĻĨāĻ•ā§āϝ):

a. Function:

Function āĻšāϞ⧋ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŦāĻžāϧ⧀āύ code block āϝāĻž āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻ•āĻžāĻ°ā§āϝ-āϏāĻŽā§āĻĒāĻžāĻĻāύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ function āϕ⧇ code āĻāϰ āϝ⧇āϕ⧋āύ āϜāĻžā§ŸāĻ—āĻž āĻĨ⧇āϕ⧇ callāĻ•āϰ⧇ āχāύāĻĒ⧁āϟ āĻĨ⧇āϕ⧇ āĻ…āωāϟāĻĒ⧁āϟ āĻĒāĻžāĻ“ā§ŸāĻž āϝāĻžā§ŸāĨ¤

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Rabiul")); // Output: Hello, Rabiul!
Enter fullscreen mode Exit fullscreen mode

b. Methods:

Method āĻ“ āĻāĻ•āϟāĻŋ function āϤāĻŦ⧇ āĻāϟāĻŋ object āϕ⧇ āύāĻŋāĻ°ā§āĻĻ⧇āĻļ āĻ•āϰ⧇, objectāĻāϰ propertyāĻšāĻŋāϏ⧇āĻŦ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšā§ŸāĨ¤ āĻ…āĻ°ā§āĻĨāĻžā§Ž Method āϏāĻŦ āϏāĻŽā§Ÿ object āĻāϰ property āĻšāĻŋāϏ⧇āĻŦ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšāĻŦ⧇āĨ¤

const user = {
    firstName: "Khan",
    middleName: "Rabiul",
    lastName: "Islam",
    fullName : function () {
        return `${this.firstName} ${this.middleName} ${this.lastName}` 
    }
}
console.log(user.fullName());
Enter fullscreen mode Exit fullscreen mode

🧑‍đŸ’ģ Parameter:

👉 a. Default Parameter:

JavaScript Function, parameterāĻāϰ value undefinedāĻĨāĻžāϕ⧇āĨ¤ undefined āϭ⧇āϞ⧁āϰ āϏāĻžāĻĨ⧇ āĻ…āĻĒāϰ⧇āĻļāύ āĻ•āϰāĻž āϏāĻŽā§āĻ­āĻŦ āύ⧟āĨ¤ āφāĻŦāĻžāϰ āĻ•āĻŋāϛ⧁ āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ⧇āϰ āĻ­ā§āϝ⧇āϞ⧁ āϏ⧇āϟ āĻ•āϰāĻžāϰ āĻĒā§āĻ°ā§Ÿā§‹āϜāύ āĻšāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ āϏ⧇ āϏāĻŦ āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ default parameter āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤

function multiple (num1, num2 =1) {
    return num1 * num2;
}

multiple(5); // Output: 5 * 1 = 5
multiple(5, 2); // Output: 5 * 2 = 10
Enter fullscreen mode Exit fullscreen mode

Parameters āĻāϰ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ value (=value) āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϝāϤāϗ⧁āϞ⧋ default parameter āĻĒā§āĻ°ā§Ÿā§‹āϜāύ āϤāϤ⧋āϗ⧁āϞ⧋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤

👉 b. Rest Parameter:

JavaScript rest parameter āĻ…āϏāĻ‚āĻ–ā§āϝ argument āϕ⧇ array āφāĻ•āĻžāϰ⧇ receive āĻ•āϰ⧇āĨ¤ rest parameter āĻŽā§‚āϞāϤ (â€ĻāύāĻžāĻŽ) āĻĻā§āĻŦāĻžāϰāĻž āĻ—āĻ āĻŋāϤāĨ¤

function sum (num1, num2, ...rest) {
    const restSum = rest.reduce((total, num) => total + num, 0)
    return num1 + num2 + restSum;
}
sum(4,5,6,7,8,10,12);
Enter fullscreen mode Exit fullscreen mode

Image description

Rest parameter āĻāϰ āĻ•āĻŋāϛ⧁ āϗ⧁āϰ⧁āĻ¤ā§āĻŦāĻĒā§‚āĻ°ā§āĻŖ āĻŦāĻŋāώ⧟āσ

āĻĒā§‚āĻ°ā§āĻŦ⧇ āφāĻŽāĻžāϰāĻž Function Declaration āĻ“ Function Expression āύāĻŋā§Ÿā§‡ āφāϞ⧋āϚāύāĻž āĻ•āϰ⧇āĻ›āĻŋāĨ¤ āĻāĻ–āĻžāύ⧇ āĻļ⧁āϧ⧁ Arrow Function āύāĻŋā§Ÿā§‡ āφāϞ⧋āϚāύāĻž āĻ•āϰāĻž āĻšāĻŦ⧇āĨ¤

  • āĻāĻ•āϟāĻŋ functionāĻ āĻāĻ•āϟāĻŋāĻŽāĻžāĻ¤ā§āϰ rest āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ āĻĨāĻžāĻ•āϤ⧇ āĻĒāĻžāϰāĻŦ⧇āĨ¤
  • rest āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ āϏāĻŦ parameterāĻāϰ āĻļ⧇āώ⧇ āĻšāĻŦ⧇āĨ¤
  • rest āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ āĻāϰ āϕ⧋āύ default value āĻĨāĻžāĻ•āϤ⧇ āĻĒāĻžāϰāĻŦ⧇ āύāĻžāĨ¤

🧑‍đŸ’ģ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ āĻĒā§āϰāĻ•āĻžāϰ⧇āϰ Functions:

āĻĒā§‚āĻ°ā§āĻŦ⧇ āφāĻŽāĻžāϰāĻž Function Declaration āĻ“ Function Expression āύāĻŋā§Ÿā§‡ āφāϞ⧋āϚāύāĻž āĻ•āϰ⧇āĻ›āĻŋāĨ¤ āĻāĻ–āĻžāύ⧇ āĻļ⧁āϧ⧁ Arrow Function āύāĻŋā§Ÿā§‡ āφāϞ⧋āϚāύāĻž āĻ•āϰāĻž āĻšāĻŦ⧇āĨ¤

👉 Arrow Function:

Function āϕ⧇ āϏāĻ‚āĻ•ā§āώāĻŋāĻĒā§āϤ āφāĻ•āĻžāϰ⧇ āϞ⧇āĻ–āĻžāϰ āϜāĻ¨ā§āϝ arrow function āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āĻšā§ŸāĨ¤

Syntax:

() => expression

param => expression

(param) => expression

(param1, parameter2) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
}

Enter fullscreen mode Exit fullscreen mode

āωāĻĻāĻžāĻšāϰāĻŖāσ

const sum = (a, b) => {
    return a + b;
};

console.log(sum(5, 10)); // āφāωāϟāĻĒ⧁āϟ: 15

Enter fullscreen mode Exit fullscreen mode
const sum = (a, b) => a + b;

console.log(sum(5, 10)); // āφāωāϟāĻĒ⧁āϟ: 15

Enter fullscreen mode Exit fullscreen mode
const square = x => x * x;

console.log(square(5)); // āφāωāϟāĻĒ⧁āϟ: 25

Enter fullscreen mode Exit fullscreen mode

āĻāĻ•āϟāĻŋ parameter āĻāϰ āϜāĻ¨ā§āϝ (), āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻĒā§āϰ⧟āϜāύ āύ⧇āχāĨ¤ āφāĻŦāĻžāϰ āĻāĻ•āϟāĻŋ expression āĻāϰ āϜāĻ¨ā§āϝ, {} āĻāĻŦāĻ‚ return keyword āĻŦā§āϝāĻŦāĻšāĻžāϰ āϜāϰ⧁āϰāĻŋ āύ⧟āĨ¤


🧑‍đŸ’ģ Nested Function:

āĻāĻ•āϟāĻŋ function-āϕ⧇ āϝāĻ–āύ āĻ…āĻ¨ā§āϝ āĻāĻ•āϟāĻŋ function āĻāϰ āĻŽāĻ§ā§āϝ⧇ define āĻ•āϰāĻž āĻšā§Ÿ, āϤāĻ–āύ āϤāĻžāϕ⧇ Nested Function āĻŦāϞ⧇āĨ¤

 function outerFunction () {
    console.log('outer funciton');
    function inner () {
        console.log('Inner function');
    }
    inner();
 }

console.log( outerFunction());  
// Output: outer funciton
// Inner function
Enter fullscreen mode Exit fullscreen mode

āĻĒā§āĻ°ā§Ÿā§‹āϜāύ⧇ āφāĻŽāĻžāϰāĻž āĻāĻ•āĻžāϧāĻŋāĻ• nested function āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋāĨ¤


🧑‍đŸ’ģ Function Scope:

function scope āĻāĻŽāύ āĻāĻ•āϟāĻŋ āϧāĻžāϰāĻŖāĻž āϝ⧇āĻ–āĻžāύ⧇ function āĻāϰ āĻ­āĻŋāϤāϰ⧇āϰ variable āϗ⧁āϞ⧋āϰ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ“ access āϐ function āĻāϰ āĻŽāĻ§ā§āϝ⧇āχ āϏ⧀āĻŽāĻžāĻŦāĻĻā§āϧāĨ¤ āĻ…āĻ°ā§āĻĨāĻžā§Ž function āĻāϰ āĻŦāĻžāχāϰ⧇ variable āϗ⧁āϞ⧋āϰ access āĻĒāĻžāĻ“ā§ŸāĻž āϝāĻžāĻŦ⧇āύāĻžāĨ¤

function outerFunction() {
    const a = 10;
    function innerFunction() {
        const b = 5;
        console.log(a); // Logs '10'
        function corefunction() {
            console.log(a); // Logs '10'
            console.log(b); // Logs '5'
            const c = 2;
            return a + b + c; // Returns 10 + 5 + 2 = 17
        }
        return corefunction;
    }
    return innerFunction;
}

const inner = outerFunction(); // Returns innerFunction
const core = inner();          // Returns corefunction
console.log(core());          // Logs '10', '5', and '17'


console.log(a);
console.log(b);
console.log(c);

// Output: Uncaught ReferenceError: b is not defined

Enter fullscreen mode Exit fullscreen mode

function āĻāϰ āĻŦāĻžāχāϰ⧇ variable access āĻ•āϰāϤ⧇ āϗ⧇āϞ⧇ ReferenceErro; āĻĻ⧇āĻ–āĻžāĻšā§āϛ⧇ āϕ⧇āύāύāĻž variable, function āĻāϰ āĻ­āĻŋāϤāϰ define āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇āĨ¤

Image description


🧑‍đŸ’ģ Closures:

āĻ•ā§Ÿā§‡āĻ•āϟāĻŋ functionāĻāϰ āϏāĻŽāĻ¨ā§āĻŦā§Ÿā§‡ āĻ—āĻ āĻŋāϤ Lexical Environment, āϝāĻž āύāĻŋāĻ°ā§āϧāĻžāϰāĻŖ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ functionāĻāϰ āĻŽāĻ§ā§āϝ⧇ variableāĻ…āĻ¨ā§āϝ functionāϗ⧁āϞ⧋ access/āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻĒāĻžāĻŦ⧇ āĻ•āĻŋ āύāĻžāĨ¤ āĻ…āĻ°ā§āĻĨāĻžā§Ž, āϝāĻ–āύ āĻāĻ•āϟāĻŋ functionāĻ…āĻ¨ā§āϝ functionāĻāϰ āĻ­āĻŋāϤāϰ āĻ—āĻ āĻŋāϤ āĻšā§Ÿ, āϤāĻ–āύ āĻ­āĻŋāϤāϰ⧇āϰ functionāϤāĻžāϰ āĻŦāĻžāχāϰ⧇āϰ functionāĻāϰ variable āĻŽāύ⧇ āϰāĻžāĻ–āϤ⧇ āĻĒāĻžāϰ⧇ āĻāĻŦāĻ‚ access/āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ āĻāϧāĻžāϰāύāĻžāϕ⧇ āĻ•ā§āϞ⧋āϜāĻžāϰ(closure) āĻŦāϞ⧇āĨ¤

function outerFunction () {
    const outerVariable = 'This is outer variable value';
    function innerFunction () {
        console.log(outerVariable);
    }
    return innerFunction;
}

const closuer = outerFunction();
closuer();
// Output: This is outer variable value
Enter fullscreen mode Exit fullscreen mode

āĻĒāĻžāĻļ⧇āϰ āϕ⧋āĻĄ āĻ¸ā§āύāĻŋāĻĒāĻŋāĻŸā§‡ outerFunction āĻāϰ āĻ­āĻŋāϤāϰ outerVariable āύāĻžāĻŽā§‡ āĻāĻ•āϟāĻŋ variable init āĻāĻŦāĻ‚ assign āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇āĨ¤ āĻāĻ•āχ āϏāĻžāĻĨ⧇ innerFunction āύāĻžāĻŽā§‡ āĻāĻ•āϟāĻŋ function declare āĻ•āϰ⧇ āĻšā§Ÿā§‡āϛ⧇āĨ¤ āφāĻŦāĻžāϰ innerFunction āϕ⧇ console.log()/access āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇āĨ¤ āϝ⧇āĻšā§‡āϤ⧁ Lexical Enviornment āĻ inner function āϤāĻžāϰ āĻŦāĻžāχāϰ⧇āϰ function āĻāϰ variable āĻŽāύ⧇ āϰāĻžāĻ–āϤ⧇ āĻĒāĻžāϰ⧇, āϤāĻžāχ āϝāĻ–āύ outerFunction āϕ⧇ call āĻ•āϰāĻž āĻšāϞ⧋ āϤāĻ–āύ innerFunction āϤāĻžāϰ outer function āĻĨ⧇āϕ⧇ variable āĻāϰ value āĻ—ā§āϰāĻšāύ āĻ•āϰāϤ⧇ āĻĒ⧇āϰ⧇āϛ⧇āĨ¤

function outerFunction () {
    const a = 10;
    function innerFunction () {
        const b = 5;
        function hardCoreFunction () {
            const c = 20;
            return a + b + c;
        }
        return hardCoreFunction()
    }
    return innerFunction;
}
const closure = outerFunction();
console.log(closure())
Enter fullscreen mode Exit fullscreen mode

āωāĻĻāĻžāĻšāϰāĻŖ ⧍āσ outerFunction Lexical Scope āĻāϰ āĻ­āĻŋāϤāϰ āφāϰ⧋ ⧍āϟāĻŋ function declare āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇ innerFunction āĻāĻŦāĻ‚ hardCoreFunctionāĨ¤ outerFunction function āĻāϰ āĻ­āĻŋāϤāϰ a = 10 innerFunction āĻ b = 5 āĻāĻŦāĻ‚ hardCoreFunction āĻāϰ āĻ­āĻŋāϤāϰ c = 20 āĻāĻŦāĻ‚ variable a, b, c variable āĻāϰ āϏāĻŽāĻˇā§āϟāĻŋ āύāĻŋāĻ°ā§āϪ⧟ āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇āĨ¤ hardCoreFunction āĻāϰ āĻ­āĻŋāϤāϰ variable a āĻāĻŦāĻ‚ b āύāĻž āĻĨāĻžāĻ•āĻžāϰ āĻĒāϰāĻ“ lexical enviornment āĻāϰ āĻ•āĻžāϰ⧋āύ⧇ access āĻ•āϰāϤ⧇ āĻĒāĻžāϰāϛ⧇āĨ¤

function outerFunction () {
    const a = 10;
    function innerFunction () {
        const b = 5;
        console.log(a);
        console.log(c);
        function hardCoreFunction () {
            const c = 20;
            return a + b + c;
        }
        return hardCoreFunction()
    }
    return innerFunction;
}
const closure = outerFunction();
console.log(closure())
Enter fullscreen mode Exit fullscreen mode

Image description

āωāϧāĻžāĻšāϰāĻŖ ā§Šāσ innerFunction āĻāϰ āĻ­āĻŋāϤāϰ variable a āĻāĻŦāĻ‚ c āĻŦāĻŋāĻĻā§āϝāĻŽāĻžāύ āύ⧟āĨ¤ a āĻ“ c access āĻ•āϰāϤ⧇ āϗ⧇āϞ⧇ a āĻāϰ value āĻĒāĻžāĻ“ā§ŸāĻž output āĻĒāĻžāĻ“ā§ŸāĻž āϗ⧇āϞ⧇āĻ“ c variable āĻāϰ access āύāĻž āĻĨāĻžāĻ•āĻžā§Ÿ, Output REferenceError show āĻ•āϰāϛ⧇āĨ¤ āĻŦ⧁āĻāĻžāϰāĻž āϏ⧁āĻŦāĻŋāϧāĻžāĻ°ā§āϤ⧇ outerFunction āϕ⧇ grand_parent, innerFunction āϕ⧇ parent āĻāĻŦāĻ‚ hardCoreFunction child āĻšāĻŋāϏ⧇āĻŦ⧇ āĻŦāĻŋāĻŦ⧇āϚāύāĻž āĻ•āϰāĻž āĻšāϞ⧋āĨ¤ child āϤāĻžāϰ parent, grand_parent variable access āĻĒāĻžāχāĨ¤ āĻāĻŽāύāĻ•āĻŋ child āϏāϰāĻžāϏāϰāĻŋ grand_parent āϕ⧇āĻ“ access āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŦ⧇āĨ¤ āĻ•āĻŋāĻ¨ā§āϤ⧁ āϕ⧋āύ⧋ parent āϤāĻžāϰ child āĻāϰ variable access āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŦ⧇ āύāĻžāĨ¤

Image description

āϏāĻšāϜāĻ­āĻžāĻŦ⧇ āĻŦāϞāϤ⧇ āϗ⧇āϞ⧇ āĻ•ā§āϞ⧋āϜāĻžāϰ(closure) āĻšāϞ⧋ āϝāĻ–āύ inner function āϤāĻžāϰ Lexical Environment āĻ outer function āĻĨ⧇āϕ⧇ variable access āĻ•āϰ⧇āĨ¤


🧑‍đŸ’ģ Callbac Function:

Arguments āφāĻ•āĻžāϰ⧇ āĻāĻ•āϟāĻŋ function āϕ⧇ āĻ…āĻ¨ā§āϝ āĻāĻ•āϟāĻŋ function āĻ pass āĻ•āϰ⧇, āϕ⧋āύ āĻ•āĻžāĻ°ā§āϝāϏāĻŽā§āĻĒāĻžāĻĻāύāϕ⧇ callback function āĻŦāϞ⧇āĨ¤ callback function āϕ⧇ function āĻāϰ āĻŽāĻ§ā§āϝ⧇ invoked/call āĻ•āϰ⧇āϤ⧇ āĻšā§ŸāĨ¤

synchronous āĻāĻŦāĻ‚Â asynchronous ⧍ āĻĒāĻĻā§āϧāϤāĻŋāϤ⧇ callback function āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϝāĻžā§ŸāĨ¤


function multiplyByTwo(num, callbackFunc) {
    var result = num * 2;
    callbackFunc(result);
  }

  function ConLogResult(result) {
    console.log(result);
  }

  multiplyByTwo(5, ConLogResult);
Enter fullscreen mode Exit fullscreen mode

Image description


🧑‍đŸ’ģ Higher Order Function:

āĻāĻ•āϟāĻŋ function, āĻāĻ• āĻŦāĻž āĻāĻ•āĻžāϧāĻŋāĻ• function arguments āĻĨ⧇āϕ⧇ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰ⧇ āĻ…āĻĨāĻŦāĻž āĻĢāϞāĻžāĻĢāϞ āĻšāĻŋāϏ⧇āĻŦ⧇ function āϕ⧇ return āĻ•āϰ⧇, āϤāĻžāϕ⧇ Higher Order Function (HoF) āĻŦāϞ⧇āĨ¤

👉 Higher Order Function āĻāϰ ⧍āϟāĻŋ āĻŦ⧈āĻļāĻŋāĻˇā§āĻŸā§āϝāσ

  1. Argument āĻ function āĻ—ā§āϰāĻšāĻŖ āĻ•āϰ⧇āĨ¤

  2. āĻĢāϞāĻžāĻĢāϞ āĻšāĻŋāϏ⧇āĻŦ⧇ function āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤

1. Argument āĻ function āĻ—ā§āϰāĻšāĻŖ āĻ•āϰ⧇:

function higherOrderFunction (callbackFun) {
    callbackFun('It is a higher Order Function');
}

function callbackFun (message) {
    console.log(message)
}

higherOrderFunction(callbackFun);

Enter fullscreen mode Exit fullscreen mode

Image description

āĻāĻ–āĻžāύ⧇ higherOrderFunction, call āĻ•āϰāĻžāϰ āϏāĻŽā§Ÿ argument āĻ āĻ…āĻ¨ā§āϝ āĻāĻ•āϟāĻŋ function pass āĻ•āϰāϛ⧇āĨ¤

āϕ⧋āĻĨāĻžā§Ÿ Higher Order Function āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āĻšā§Ÿāσ

const radius = [4,5,8];

// Calculating Area of the circle
const circleArea = function (radius) {
    const result = []; // initialized arra to store output
    for(let i = 0; i < radius.length; i++) {
        result.push(Math.PI * (radius[i], radius[i]));
    }
    return result;
}

console.log(circleArea(radius));
// Output: [12.566370614359172, 15.707963267948966, 25.132741228718345]


const diameter = function (radius) {
    const result = [];
    for (let i = 0; i<radius.length; i++) {
        result.push(2 * radius[i]);
    }
    return result;
}
console.log(diameter(radius));
// Output: [8, 10, 16]
Enter fullscreen mode Exit fullscreen mode

āωāϭ⧟ āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ āĻĻ⧇āĻ–āĻž āϝāĻžāĻšā§āϛ⧇ radius variable āϕ⧇ access āĻ•āϰāϛ⧇āĨ¤ āĻ•āĻŋāĻ¨ā§āϤ⧁ function āĻāϰ operation āϗ⧁āϞ⧋ āĻ­āĻŋāĻ¨ā§āύāĨ¤ āĻāĻŽāύ āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ āĻ­āĻŋāĻ¨ā§āύ operation āĻāϰ āϜāĻ¨ā§āϝ āĻ­āĻŋāĻ¨ā§āύ function āϤ⧈āϰ⧀ āĻ•āϰ⧇, āĻ…āĻ¨ā§āϝ āĻāĻ•āϟāĻŋ function āĻāϰ argument āĻ pass āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āĻĒ⧁āύāσ āĻŦā§āϝāĻŦāĻšāĻžāϰāϝ⧋āĻ—ā§āϝ function/higher order function āĻ—āĻ āύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋāĨ¤


const radius = [4,5,8];

// Calculating diameter
const diameter = function (radius) {
    const result = [];
    for (let i = 0; i<radius.length; i++) {
        result.push(2 * radius[i]);
    }
    return result;
}
console.log(diameter(radius));


// Area clcultion's Operation 
const area = function (radius) {
    return Math.PI * radius * radius;
}
// Diameter clcultion's Operation 
const diameter = function (radius) {
    return 2 * radius;
}

// Making a function that can calculate area, diameter, and other oprations. It will be a resuable function

const calculate = function (radius, operation) {
    const output = [];
    for(i = 0; 0 < radius.length; i++) {
        output.push(operation[i]);
    }
    return output;
}

console.log(calculate(radius,diameter));
console.log(calculate(radius,area));
Enter fullscreen mode Exit fullscreen mode

Image description

āϧāĻžāĻĒ ā§§āσ āĻāĻ•āϟāĻŋ function āϤ⧈āϰ⧀ āĻ•āϰāĻŋ, āϝ⧇āϟāĻŋ āĻāĻ•āϟāĻŋ value āĻāĻŦāĻ‚ āĻāĻ•āϟāĻŋ function āϰāĻŋāϏāĻŋāĻ­ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŦ⧇āĨ¤

āϧāĻžāĻĒ ā§¨āσ āĻĒā§āϰāĻ¤ā§āϝ⧇āĻ•āϟāĻŋ āφāϞāĻžāĻĻāĻž operation āĻāϰ āϜāĻ¨ā§āϝ āĻ­āĻŋāĻ¨ā§āύ āĻ­āĻŋāĻ¨ā§āύ function define āĻ•āϰāĻŋāĨ¤

āϧāĻžāĻĒ ā§Šāσ HoFs āϕ⧇ call āĻ•āϰāĻžāϰ āϏāĻŽā§Ÿ āĻĒā§āĻ°ā§Ÿā§‹āϜāĻ¨ā§€ā§Ÿ operation/function āϕ⧇ pass āĻ•āϰāĻŋāĨ¤ āĻāĻ–āĻžāύ⧇ value = radius āĻāĻŦāĻ‚ function/operaton = diameter/area;

āϧāĻžāĻĒ ā§Ēāσ callback function āϕ⧇ function āϟāĻŋāϰ āĻ­āĻŋāϤāϰ call āĻ•āϰāĻŋāĨ¤ argument āĻ āĻĒā§āĻ°ā§Ÿā§‹āϜāĻ¨ā§€ā§Ÿ value pass āĻ•āϰāĻŋāĨ¤

āĻāĻ–āύ function/operation āϟāĻŋ āĻ…āĻŸā§‹āĻŽā§‡āϟāĻŋāĻ• āĻĒā§āϰāĻžāĻĒā§āϤ value āĻĨ⧇āϕ⧇ operation āϏāĻŽā§āĻĒāĻ¨ā§āύ āĻ•āϰ⧇ HoFs āĻāϰ āϝ⧇āĻ–āĻžāύ⧇ call āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇, āϏ⧇āĻ–āĻžāύ⧇ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāĻŦ⧇āĨ¤

👉 ⧍. āĻĢāϞāĻžāĻĢāϞ āĻšāĻŋāϏ⧇āĻŦ⧇ function āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇(return a function):

Higher Order Function āĻĢāϞāĻžāĻĢāϞ āĻšāĻŋāϏ⧇āĻŦ⧇ āĻ…āĻ¨ā§āϝ āĻāĻ•āϟāĻŋ function āĻāϰ return āĻĢāϞ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤

function higherOrderFunction (a, b) {
     function sum (b) {
        return a + b;
    }
    return sum;
}
console.log( higherOrderFunction(4)(5));
// Output: 9


// Or

function higherOrderFunction (a, b) {
    return function sum (b) {
       return a + b;
   }
}
console.log( higherOrderFunction(4)(5));
// Output: 9
Enter fullscreen mode Exit fullscreen mode

āĻŦā§āϝāĻŦāĻšāĻžāϰāσ

  1. Array: map(), reduce(), filter(), sort()...
  2. Object: Object.entries()
  3. Custom

āωāĻĻāĻžāĻšāϰāĻŖ ā§§āσ

āĻāĻ•āϟāĻŋ array āĻāϰ āĻĒā§āϰāϤāĻŋāϟāĻŋ number element āϕ⧇ ⧍ āĻĻā§āĻŦāĻžāϰāĻž āϗ⧁āĻŖ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇āĨ¤

const users = [
    {firstName: 'Khan', lastName: 'Rabiul', age: 30},
    {firstName: 'Anisul', lastName: 'Islam', age: 20},
    {firstName: 'Shahidul', lastName: 'Islam', age: 25},
    {firstName: 'Mr.', lastName: 'Sabbir', age: 32},
    {firstName: 'Sk.', lastName: 'Shamim', age: 37},
]

const usersFullName = users.map(user => user.firstName + ' ' + user.lastName);

console.log(usersFullName);

// Output: ['Khan Rabiul', 'Anisul Islam', 'Shahidul Islam', 'Mr. Sabbir', 'Sk. Shamim']
Enter fullscreen mode Exit fullscreen mode

āωāĻĻāĻžāĻšāϰāĻŖ ā§Šāσ

āĻāĻ•āϟāĻŋ array of object āĻĨ⧇āϕ⧇ age āĻāϰ āϏāĻŽāĻˇā§āϟāĻŋ āĻŦ⧇āϰ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇;

const users = [
    {firstName: 'Khan', lastName: 'Rabiul', age: 30},
    {firstName: 'Anisul', lastName: 'Islam', age: 20},
    {firstName: 'Shahidul', lastName: 'Islam', age: 25},
    {firstName: 'Mr.', lastName: 'Sabbir', age: 32},
    {firstName: 'Sk.', lastName: 'Shamim', age: 37},
]

const ageOver30 = users.filter(user => user.age > 30);
console.log(ageOver30);

//Output : {firstName: 'Mr.', lastName: 'Sabbir', age: 32},
//         {firstName: 'Sk.', lastName: 'Shamim', age: 37},

Enter fullscreen mode Exit fullscreen mode

āωāĻĻāĻžāĻšāϰāĻŖ ā§Ģāσ

āĻāĻ•āϟāĻŋ array of object āĻĨ⧇āϕ⧇ āϝāĻžāĻĻ⧇āϰ age āĻāϰ āĻ•ā§āϰāĻŽāĻžāύ⧁āϏāĻžāϰ⧇ āϞāĻŋāĻ¸ā§āϟ āĻŦ⧇āϰ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇;

const users = [
    {firstName: 'Khan', lastName: 'Rabiul', age: 30},
    {firstName: 'Anisul', lastName: 'Islam', age: 20},
    {firstName: 'Shahidul', lastName: 'Islam', age: 25},
    {firstName: 'Mr.', lastName: 'Sabbir', age: 32},
    {firstName: 'Sk.', lastName: 'Shamim', age: 37},
]

const sortedByAge = users.sort((a, b) => a.age - b.age);
console.log(sortedByAge);

// Output:
//       {firstName: 'Anisul', lastName: 'Islam', age: 20} 
//       {firstName: 'Shahidul', lastName: 'Islam', age: 25}
//       {firstName: 'Khan', lastName: 'Rabiul', age: 30}
//       {firstName: 'Mr.', lastName: 'Sabbir', age: 32}
//       {firstName: 'Sk.', lastName: 'Shamim', age: 37}
Enter fullscreen mode Exit fullscreen mode

āωāĻĻāĻžāĻšāϰāĻŖ ā§Ŧāσ āωāĻĒāϰ⧇āϰ āωāĻĻāĻžāĻšāϰāĻŖ āϗ⧁āϞ⧋ āϝāĻĻāĻŋāĻ“ āφāĻŽāϰāĻž HoFs āĻāϰ āϏāĻžāĻšāĻžāĻ¯ā§āϝ⧇ āϏāĻŽāĻžāϧāĻžāύ āĻ•āϰ⧇āĻ›āĻŋāĨ¤ āĻāĻ–āĻžāύ⧇ āĻāĻ•āϟāĻŋ āĻŦāĻŋāώ⧟ āϞāĻ•ā§āώāĻŖā§€ā§Ÿ āϝ⧇, āĻĒā§āϰāϤāĻŋ āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ āφāĻŽāĻžāϰāĻž āĻāĻ•āχ array of object input āĻ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰāĻ›āĻŋ āφāϰ āĻ­āĻŋāĻ¨ā§āύ operation āϚāĻžāϞāĻžāĻšā§āĻ›āĻŋāĨ¤ āϝāĻĻāĻŋ āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ function create āĻ•āϰāĻŋ, āϝ⧇āĻ–āĻžāύ⧇ āĻāĻ•āϟāĻŋ input āĻāĻŦāĻ‚ āĻ­āĻŋāĻ¨ā§āύ operation āĻāϰ āϜāĻ¨ā§āϝ āĻ­āĻŋāĻ¨ā§āύ function callback āĻ āχāύāĻĒ⧁āϟ āύāĻŋāϤ⧇ āĻĒāĻžāϰāĻŦ⧇āĨ¤ āϤāĻž āĻšāϞ⧇ function āϟāĻŋ āĻĒ⧁āύāσ āĻŦā§āϝāĻŦāĻšāĻžāϰ āϝ⧋āĻ—ā§āϝ āĻ“ āφāϰ⧋ āĻĄāĻžāχāύāĻžāĻŽāĻŋāĻ• āĻšāĻŦ⧇āĨ¤

const users = [
    {firstName: 'Khan', lastName: 'Rabiul', age: 30},
    {firstName: 'Anisul', lastName: 'Islam', age: 20},
    {firstName: 'Shahidul', lastName: 'Islam', age: 25},
    {firstName: 'Mr.', lastName: 'Sabbir', age: 32},
    {firstName: 'Sk.', lastName: 'Shamim', age: 37},
];

// āφāĻŽāĻžāĻĻ⧇āϰ āĻĒā§āĻ°ā§Ÿā§‹āϜāύ⧀ āĻ­āĻŋāĻ¨ā§āύ function āϏāĻŽā§‚āĻšāσ

// ā§Ļā§§, āĻāĻ•āϟāĻŋ array of object āĻĨ⧇āϕ⧇ users full name āϞāĻŋāĻ¸ā§āϟ āϤ⧈āϰ⧀ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇;
const getFullName = function(user) {
    return user.firstName + " " + user.lastName
}

// āωāĻĻāĻžāĻšāϰāĻŖ ⧍, āĻāĻ•āϟāĻŋ array of object āĻĨ⧇āϕ⧇ āϝāĻžāĻĻ⧇āϰ age ā§Šā§Ļ āĻāϰ āĻŦ⧇āĻļāĻŋ āϤāĻžāĻĻ⧇āϰ āϞāĻŋāĻ¸ā§āϟ āĻŦ⧇āϰ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇;
const getAgeOver30 = user => user.age < 30 ? user : null;

const calculate = function (users, callbackFunc) {
    let output = []; // Output store āĻšāĻŦ⧇ 
    // āϝ⧇āĻšā§‡āϤ⧁ input āĻāĻ•āϟāĻŋ array āĻāĻŦāĻ‚ āĻāϰ āĻĒā§āϰāϤāĻŋāϟāĻŋ input āĻāϰ āωāĻĒāϰ function āĻ•āĻžāϜ āĻ•āϰāĻŦ⧇ āϤāĻžāχ  for loop 
    for(let i = 0; i <users.length; i++) {
        // output.push(callbackFunc(users[i]));

        // To handel null and undefined valu
        const result = callbackFunc(users[i]);
        if (result != null) {
            output.push(result);
        }
    }
    return output;
}

console.log(calculate(users, getAgeOver30));
// Output: 
//         {firstName: 'Anisul', lastName: 'Islam', age: 20}
//         {firstName: 'Shahidul', lastName: 'Islam', age: 25}
console.log(calculate(users, getFullName));

// Output: ['Khan Rabiul', 'Anisul Islam', 'Shahidul Islam', 'Mr. Sabbir', 'Sk. Shamim']
Enter fullscreen mode Exit fullscreen mode
const numbers = [4,5,8,3,7,9,10,56];

const calculate = function(numbers, operation) {
    let output = [];
    for(let i = 0; i < numbers.length; i++) {
        if (output !== null) {
            output.push(operation(numbers[i]));
        }
    }
    return output;
}

// Double 
const double = function (number) {
    return number * 2;
}
// Triple 
const triple = function (number) {
    return number * 3;
}
// power 
const power4 = function (number) {
    return Math.pow(number,4);
}



console.log(calculate(numbers, double));
// Output: [8, 10, 16, 6, 14, 18, 20, 112]
console.log(calculate(numbers, triple));
// Output: [12, 15, 24, 9, 21, 27, 30, 168]
console.log(calculate(numbers, power4));
// Output: [256, 625, 4096, 81, 2401, 6561, 10000, 9834496]
Enter fullscreen mode Exit fullscreen mode

āĻ…āĻ°ā§āĻĨāĻžā§Ž function return āĻĒ⧇āϞ⧇ āĻŦāĻž arguments āĻĨ⧇āϕ⧇ āĻāĻ• āĻŦāĻž āĻāĻ•āĻžāϧāĻŋāĻ• function āĻ—ā§āϰāĻšāĻŖ āĻ•āϰāϞ⧇ function āϟāĻŋ, Higher Order functionāĨ¤


🧑‍đŸ’ģ Recursion Function

āϝāĻ–āύ āϕ⧋āύ āϏāĻŽāĻ¸ā§āϝāĻž āϏāĻŽāĻžāϧāĻžāύ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āĻŋ āĻ•āĻžāϜ āĻŦāĻžāϰ āĻŦāĻžāϰ āĻ•āϰāϤ⧇ āĻšā§Ÿ, āϤāĻ–āύ āϤāĻžāϕ⧇ Recursive Function āĻŦāϞ⧇āĨ¤

āĻĒā§āϰāĻ¤ā§āϝāĻžāĻļāĻŋāϤ āĻĢāϞāĻžāĻĢāϞ āĻĒāĻžāĻ“ā§ŸāĻžāϰ āϜāĻ¨ā§āϝ āϕ⧋āύ āĻ•āĻžāϜ āĻŦāĻžāϰ āĻŦāĻžāϰ āĻ•āϰāĻž(function call āĻ•āϰāĻž)-āϕ⧇ recursion function āĻŦāϞ⧇āĨ¤ **
āωāĻĻāĻžāĻšāϰāĻŖ: āĻĢā§āϝāĻžāĻ•ā§āĻŸā§‹āϰāĻŋāϝāĻŧāĻžāϞ āĻĢāĻžāĻ‚āĻļāύ

function factorial (num) {
    // base case

    if(num === 0) {
        return 1;
    }
    return num * factorial(num -1);
}

console.log(factorial(5));
// Output: 120
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

🧑‍đŸ’ģ Recursion āϕ⧀āĻ­āĻžāĻŦ⧇ āĻ•āĻžāϜ āĻ•āϰ⧇āσ

  1. Function Declaration
  2. Base Case
  3. Recursive Call command

👉 Function Declaration:

āϏāĻžāϧāĻžāϰāĻŖ function āϝ⧇āĻ­āĻžāĻŦ⧇ declare āĻ•āϰāĻž āĻšā§Ÿ, āĻāϟāĻžāĻ“ āĻ āĻŋāĻ• āϤ⧇āĻŽāύāĨ¤


    function recursionFunction () {

    }
Enter fullscreen mode Exit fullscreen mode

Base Case:

Base Case āχ *recursion function* āĻāϰ āĻŽā§‚āϞ āĻ­āĻŋāĻ¤ā§āϤāĻŋāĨ¤

Base case āĻ›āĻžāĻĄāĻŧāĻž *recursion function* āĻāĻ•āϟāĻŋ āĻ…āϏ⧀āĻŽ āϞ⧁āĻĒ⧇ āĻĒāϰāĻŋāĻŖāϤ āĻšāĻŦ⧇ āĻāĻŦāĻ‚ āĻĒā§āϰ⧋āĻ—ā§āϰāĻžāĻŽ āĻ•ā§āĻ°ā§āϝāĻžāĻļ āĻ•āϰāĻŦ⧇āĨ¤

*Recursion* āĻĢāĻžāĻ‚āĻļāύ⧇ "base case" āĻšāϞ⧋ āĻāĻŽāύ āĻāĻ•āϟāĻŋ āĻļāĻ°ā§āϤ āϝāĻž self-calling āĻŦāĻ¨ā§āϧ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšāϝāĻŧāĨ¤ āĻāχ āĻļāĻ°ā§āϤāϟāĻŋ āĻĒā§‚āϰāĻŖ āĻšāϞ⧇ āĻĢāĻžāĻ‚āĻļāύāϟāĻŋ āφāϰ āύāĻŋāĻœā§‡āϕ⧇ āĻ•āϞ āĻ•āϰ⧇ āύāĻž āĻāĻŦāĻ‚ āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻŽāĻžāύ āϰāĻŋāϟāĻžāĻ°ā§āύ āĻ•āϰ⧇āĨ¤

`*Base case*` āĻŽā§‚āϞāϤ āĻāĻ•āϟāĻŋ āĻ¸ā§āϟāĻĒāĻŋāĻ‚ āĻĒāϝāĻŧ⧇āĻ¨ā§āϟ, āϝāĻž āϰāĻŋāĻ•āĻžāϰāϏāύāϕ⧇ āĻ…āϏ⧀āĻŽ āϞ⧁āĻĒ⧇ āĻĒāϰāĻŋāĻŖāϤ āĻšāĻ“āϝāĻŧāĻž āĻĨ⧇āϕ⧇ āϰāĻ•ā§āώāĻž āĻ•āϰ⧇āĨ¤

āωāĻĒāϰ⧇āϰ āωāĻĻāĻžāĻšā§āϰāĻ¨ā§āϟāĻŋāϤ⧇ *base case* āĻšāĻŋāϏ⧇āĻŦ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšā§Ÿā§‡āϛ⧇āĨ¤ āĻāĻ–āĻžāύ⧇ āϝāĻ–āύ num = 0; āĻšāĻŦ⧇ *return* value āĻšāĻŦ⧇ 1 āĻāĻŦāĻ‚ *function* āϟāĻŋ āĻŦāĻ¨ā§āϧ āĻšāĻŦ⧇āĨ¤ **

  if(num === 0) {
        return 1;
    }
Enter fullscreen mode Exit fullscreen mode

👉 The Recursion Call command:

āĻāχ āĻ…āĻ‚āĻļāϟāĻŋ āĻŽā§‚āϞāϤ āĻāĻ•āϟāĻŋ funciton āĻŦāĻžāϰ āĻŦāĻžāϰ *call* āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĻāĻžā§Ÿā§€āĨ¤ āφāĻŦāĻžāϰ āĻ…āĻ‚āĻļ āĻĨ⧇āϕ⧇āχ āĻ•āĻžāĻ™ā§āĻ•ā§āώāĻŋāϤ āĻĢāϞāĻžāĻĢāϞ āύāĻŋāĻ°ā§āϧāĻžāϰāĻŋāϤ āĻšā§ŸāĨ¤ āωāĻĻāĻžāĻšāϰāĻŖ āĻāϰāσ

*return num * factorial(num -1);*

āωāĻĻāĻžāĻšāϰāĻŖ ⧍āσ āĻāĻ•āϟāĻŋ function āϤ⧈āϰ⧀ āĻ•āϰ, āϝ⧇āϟāĻŋ āĻĒā§āϰāĻžāĻĒā§āϤ āϏāĻ‚āĻ–ā§āϝāĻžāϕ⧇ āĻŦāĻŋāĻĒāϰ⧀āϤāĻ•ā§āϰāĻŽā§‡ āφāωāϟāĻĒ⧁āϟ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāĻŦ⧇;

    // function declaration
    function decendingOrder (num) {
        let decndingNumbers = [];
        // base case
        if(num <= 0) {
            return;
        }
        console.log(num);

        decendingOrder(num - 1);
    }

   console.log( decendingOrder(5))
   // Output: 5 4 3 2 1
Enter fullscreen mode Exit fullscreen mode

āωāĻĻāĻžāĻšāϰāĻŖ ā§Šāσ āĻāĻ•āϟāĻŋ function āϤ⧈āϰ⧀ āĻ•āϰ, āϝ⧇āϟāĻŋ āĻĒā§āϰāĻžāĻĒā§āϤ stirng āĻŦāĻŋāĻĒāϰ⧀āϤāĻ•ā§āϰāĻŽā§‡ āφāωāϟāĻĒ⧁āϟ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāĻŦ⧇;

   function reverseString (string) {
    if (string.length == 1) {
        return string;
    } else {
        return string.slice(-1) + reverseString(string.slice(0, -1));
    }
   }

   console.log(reverseString("string"));
   //Output: "gnirts"


Enter fullscreen mode Exit fullscreen mode
// 1. slice āĻŽā§‡āĻĨāĻĄāϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻĨ⧇āϕ⧇ āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻ…āĻ‚āĻļ āĻ•āĻžāĻŸā§‡ āĻāĻŦāĻ‚ āύāϤ⧁āύ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āϰāĻŋāϟāĻžāĻ°ā§āύ āĻ•āϰ⧇āĨ¤

// 2. āĻāĻ–āĻžāύ⧇ slice(-1) āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇, āϝāĻžāϰ āĻŽāĻžāύ⧇ āĻšāϞ⧋ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻāϰ āĻļ⧇āώ āĻ…āĻ•ā§āώāϰāϟāĻŋ āϕ⧇āĻŸā§‡ āύ⧇āĻ“ā§ŸāĻžāĨ¤
// āωāĻĻāĻžāĻšāϰāĻŖ: "string".slice(-1) āĻāϰ āφāωāϟāĻĒ⧁āϟ āĻšāĻŦ⧇ "g"āĨ¤
// string.slice(0, -1):

// slice(0, -1) āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻāϰ āĻĒā§āϰāĻĨāĻŽ āĻĨ⧇āϕ⧇ (āχāĻ¨ā§āĻĄā§‡āĻ•ā§āϏ 0 āĻĨ⧇āϕ⧇) āĻļ⧇āώ⧇āϰ āĻ āĻŋāĻ• āφāϗ⧇āϰ āĻ…āĻ•ā§āώāϰ āĻĒāĻ°ā§āϝāĻ¨ā§āϤ āϏāĻŦāĻ•āĻŋāϛ⧁ āϕ⧇āĻŸā§‡ āύ⧇āĻ“ā§ŸāĻž āĻšā§ŸāĨ¤
// āωāĻĻāĻžāĻšāϰāĻŖ: "string".slice(0, -1) āĻāϰ āφāωāϟāĻĒ⧁āϟ āĻšāĻŦ⧇ "strin"āĨ¤
// + āĻ…āĻĒāĻžāϰ⧇āϟāϰ:

// + āĻ…āĻĒāĻžāϰ⧇āϟāϰ āĻāĻ–āĻžāύ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻ•āύāĻ•ā§āϝāĻžāϟāĻŋāύ⧇āĻļāύ (āĻĻ⧁āχ āĻŦāĻž āϤāϤ⧋āϧāĻŋāĻ• āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻāĻ•āĻ¤ā§āϰāĻŋāϤ āĻ•āϰāĻž) āĻāϰ āϜāĻ¨ā§āϝ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšāĻšā§āϛ⧇āĨ¤
// āωāĻĻāĻžāĻšāϰāĻŖ: "g" + "strin" āĻāϰ āφāωāϟāĻĒ⧁āϟ āĻšāĻŦ⧇ "gstrin"āĨ¤


// reverseString("string") āĻāϰ āϧāĻžāĻĒ⧇ āϧāĻžāĻĒ⧇ āĻĒā§āϰāϏ⧇āϏāĻŋāĻ‚ āĻšāĻŦ⧇:

// āĻĒā§āϰāĻĨāĻŽ āĻ•āϞ: "g" + reverseString("strin")
// āĻĻā§āĻŦāĻŋāĻ¤ā§€ā§Ÿ āĻ•āϞ: "n" + reverseString("stri")
// āϤ⧃āĻ¤ā§€ā§Ÿ āĻ•āϞ: "i" + reverseString("str")
// āϚāϤ⧁āĻ°ā§āĻĨ āĻ•āϞ: "r" + reverseString("st")
// āĻĒāĻžā§āϚāĻŽ āĻ•āϞ: "t" + reverseString("s")
// āώāĻˇā§āĻ  āĻ•āϞ (Base case): "s"
//āĻĢāĻžāχāύāĻžāϞāĻŋ, āϏāĻŦ āĻ•āύāĻ•ā§āϝāĻžāϟāĻŋāύ⧇āĻļāύ āĻšā§Ÿā§‡ āωāĻ˛ā§āĻŸā§‹ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ "gnirts" āϰāĻŋāϟāĻžāĻ°ā§āύ āĻšāĻŦ⧇āĨ¤
Enter fullscreen mode Exit fullscreen mode

👉 Or, with loop

const str = "small";

function rev(str) {
    let revStr= "";
    for(let i = str.length -1; i>= 0; i--) {
        revStr += str[i];
    }
    return revStr;
}
console.log(rev(str));
// Output: llams
Enter fullscreen mode Exit fullscreen mode

Recursion function āϕ⧋āĻĄ āĻĒ⧜āĻž āĻ“ āϏāĻšāĻœā§‡ āĻ­ā§‚āϞ āϖ⧁āĻœā§‡ āĻĒ⧇āϤ⧇ āϏāĻžāĻšāĻžāĻ¯ā§āϝ āĻ•āϰ⧇ āĻ•āĻŋāĻ¨ā§āϤ⧁ āĻ…āϏāĻ‚āĻ–ā§āϝāĻŦāĻžāϰ function call āĻ•āϰāĻžāϰ āĻ•āĻžāϰāϪ⧇ performance āĻ–āĻžāϰāĻžāĻĒ āĻšāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤


🧑‍đŸ’ģ Currying

currying function āĻāĻŽāύ functional āϧāĻžāϰāĻŖāĻž āϝ⧇āĻ–āĻžāύ⧇ āĻāĻ•āĻžāϧāĻŋāĻ• arguments āĻĨāĻžāĻ•āϞ⧇āĻ“ function āϟāĻŋ āĻāĻ• āϏāĻžāĻĨ⧇ āĻāĻ•āϟāĻŋāϰ āĻŦ⧇āĻļāĻŋ argument receive āĻ•āϰ⧇ āύāĻžāĨ¤ āĻ…āĻ°ā§āĻĨāĻžā§Ž āĻĒā§āϰāϤāĻŋāϟāĻŋ argument āĻāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ function declare āĻ“ return āĻ•āϰ⧇āĨ¤ āϤāĻŦ⧇ āϕ⧋āύ function āĻāϰ āϜāĻ¨ā§āϝ argument pass āĻ•āϰāϞ⧇āĻ“ function āϟāĻŋ āϏāĻ āĻŋāĻ•āĻ­āĻžāĻŦ⧇ āĻ•āĻžāϜ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ āĻāϟāĻŋ āϕ⧋āĻĄā§‡āϰ āĻĒ⧁āύāσāĻŦā§āϝāĻŦāĻšāĻžāϰāϝ⧋āĻ—ā§āϝāϤāĻž āĻŦāĻžāĻĄāĻŧāĻžāϝāĻŧ āĻāĻŦāĻ‚ āϕ⧋āĻĄāϕ⧇ āϛ⧋āϟ āĻ“ āĻ¸ā§āĻĒāĻˇā§āϟ āĻ•āϰ⧇ āϤ⧋āϞ⧇āĨ¤

function add(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        }
    }
}

console.log(add(1)(2)(3)); // Output: 6
Enter fullscreen mode Exit fullscreen mode

*āĻāĻ•āϟāĻŋ argument āύāĻž āĻĻāĻŋā§Ÿā§‡āσ *

function add(a) {
    return function(b) {
        return function(c) {
            return a + b ;
        }
    }
}

console.log(add(1)(2)()); // Output: 3

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
khabbab_hossen profile image
MD.KHABBAB HOSSEN

Good jobâ¤ī¸