JavaScript: Closures and Methods vs Functions

1. Closures in JavaScript

Definition: A closure is a function that remembers the variables from its outer (enclosing) function scope even after the outer function has finished executing.

function outer() {
    const a = 4;
    function parent() {
        const b = 6;
        function add() {
            console.log(a + b);
        }
        return add;
    }
    return parent();
}

const add1 = outer();
add1(); // Output: 10
    

    10
    

What's happening here?

• The outer() function defines variable a and returns parent().
• parent() defines variable b and returns function add().
• add() uses both a and b, even though those functions have finished executing. That's the **closure** in action!

ƒ add()
[[Scopes]]:
    0: Closure (parent) {b: 6}
    1: Closure (outer) {a: 4}
    2: Script {add1: ƒ}
    3: Global {...}
    

2.. Methods vs Functions

Definition:

• Function: A block of reusable code that performs a task. Defined globally or locally.
• Method: A function defined inside an object. It is invoked using the object reference.

Important Rule:

Every method is a function, but not every function is a method.

const maths = {
    E: 2.718281828459045,
    add: function (a, b) {
        return a + b;
    },
    subtract(a, b) {
        return a - b;
    },
    square(a) {
        return a * a;
    },
    cube(a) {
        return a * a * a;
    }
};

// Usage
console.log(maths.add(2, 3));      // 5 (method call)
console.log(maths.square(4));      // 16 (method call)
    

5
16
    

Key Points to Remember:

• Methods are bound to the object and can use this keyword.
• Functions can exist independently and are not bound to an object unless explicitly defined as a method.
• Arrow functions cannot be used as methods if this is needed.