Assignment Discussion | Function Advance ( call, apply, bind ) | IIFE

Learning Assignment Discussion | Function Advance ( call, apply, bind ) | IIFE

1 Like
Class Notes on 26th June 2023
Different ways of creating a function
    > 1. Normal function
        -> If you have a function without any return value, then it returns "undefined".
        -> If you have a Promise function without any return value, then it returns "Promise object".
    > 2. Function expression
    > 3. Anonymous function (Function expression & Anonymous function are almost similar)
    > 4. Arrow function
    > 5. IIFE 
        -> Immediately Invoked Function Expression
        -> Define, How to pass arguments and return from IIFE
        -> Definition: When we define a function, it will call automatically.
        -> In IIFE, we will wrap the function & make this function call pass something within parentheses like "India".
        -> SYNTAX:
            let f2 = (function (country) {
                console.log("hello f2() --> ", country);
            })("India");
                console.log(f2); // Undefined
        -> Why IIFE......
            - Protecting our data (implementation details like bank account number)
            - For security reasons, this works like oops concept Abstraction
            - Not conflicting with other functions
            - We are not polluting our global scope
        -> In which places we use IIFE...
            - It is used while designing libraries like jQuery Library for JavaScript (hidden code) 
            - Library means big chunk of code where u push ur code & give to world.

Lexical Scope / Lexical Context: 
    > Context means value of this
    > Scope means place where a ground in which u can access the variable like visa valid only within that particular country 
    > Assigning variable from parent scope
    > Lexical scope = Local Scope + Parent Scope + Global Scope

Function Advance Concepts:- 
call():
    > Whenever we want to invoke a function & pass the lexical context
    > 'this' keyword will not invoke object (key-value pair) when u normally call a funcion with objectName & without .call() gives output as global things
    > We use skeleton of one function from another object by invoking and passing the context means values of current object
    > TODO: obj3 is borrowing print() function which is inside of obj2 

apply():
    > 100% same as call() only difference is syntax how u pass other arguments like string values  
    > functionName.apply(objectName, ["str1", "str2"]);
    > Eg:- 
     let obj5 = {
    name: "Dhoni",
    country: "India"
    };
    function printNameAndCountry(greet , x){
    console.log(`Name = ${this.name}, Country = ${this.country}, Greet = ${greet} and x = ${x}`);
    };
     printNameAndCountry.apply(obj5, ["Hi", "Welcome"]); // Name = Dhoni, Country = India, Greet = Hi and x = Welcome

Why call() & apply() - Usecases
//! Function borrowing & Reusability

Example:-
let obj2 = {
    name: 'Virat',
    country: "India",
    test: function (){
        console.log('test');
    },
    print() {
        console.log(`Name = ${this.name} and Country = ${this.country}`); // 'this' means obj2 used for reusability
    }
};
obj2.test(); // test
obj2.print(); // Name = Virat and Country = India

let obj3 = {
    name: 'Smith',
    country: "Australia"
}

obj2.print.call(obj3); // Name = Smith and Country = Australia  ✅ syntax call method

Explanation:-
// obj2.print() --> invoke print() function from another 'obj2' object
// obj2.print.call(obj3) --> passing context of 'obj3' current object (this)

//obj3 is borrowing print() function which is inside of obj2 
3 Likes