DEV Community

Cover image for All About JavaScript Function
Khan Rabiul
Khan Rabiul

Posted 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❤ī¸