Advanced JavaScript Functions: First-Class, Higher-Order, Closures, Lexical Scope & IIFE Guide

1. What are advanced functions in JavaScript?

Q: What are advanced functions in JavaScript?

Advanced functions refer to techniques and patterns that leverage JavaScript’s functional programming capabilities, such as first-class functions, higher-order functions, closures, and IIFEs. These enable more complex, reusable, and modular code.

2. What is a first-class function?

Q: What is a first-class function?

In JavaScript, functions are first-class citizens, meaning they can be assigned to variables, passed as arguments, returned from other functions, and stored in data structures (e.g., let greet = function() { console.log("Hello"); };).

3. What is a higher-order function?

Q: What is a higher-order function?

A higher-order function is a function that takes another function as an argument or returns a function as its result (e.g., Array.map, setTimeout). Example:

function higherOrder(callback) {
  return callback();
}

4. What are some common use cases for advanced functions?

Q: What are some common use cases for advanced functions?

5. What is lexical scope in JavaScript?

Q: What is lexical scope in JavaScript?

Lexical scope refers to the accessibility of variables based on where a function is defined in the code, not where it is called. A function can access variables in its own scope, its parent’s scope, and the global scope, determined at the time of its definition.

6. What is a closure in JavaScript?

Q: What is a closure in JavaScript?

A closure is a function that retains access to its lexical scope (variables from its outer function) even after the outer function has finished executing. Closures allow private data and state persistence.

7. How does a closure work?

Q: How does a closure work?

When a function is defined inside another function, the inner function “closes over” the outer function’s variables, retaining access to them even after the outer function returns. Example:

function outer() {
  let count = 0; // Outer function's variable
  function inner() {
    count++; // Inner function accesses and modifies count
    console.log(count);
  }
  return inner; // Return inner function
}

const counter = outer(); // counter is now the inner function with access to count
counter(); // Output: 1
counter(); // Output: 2

8. What are the benefits of closures?

Q: What are the benefits of closures?

9. Can you give an example of a closure for data privacy?

Q: Can you give an example of a closure for data privacy?

function createBankAccount() {
  let balance = 0; // Private variable
  return {
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
    getBalance: function() {
      return balance;
    }
  };
}

const account = createBankAccount();
console.log(account.deposit(100)); // Output: 100
console.log(account.getBalance()); // Output: 100
console.log(account.balance); // Output: undefined (balance is private)

10. What is the difference between lexical scope and dynamic scope?

Q: What is the difference between lexical scope and dynamic scope?

11. How does lexical scope relate to closures?

Q: How does lexical scope relate to closures?

Closures rely on lexical scope because the inner function retains access to the variables in the scope where it was defined, even after the outer function’s execution context is gone.

12. What are some common pitfalls with closures?

Q: What are some common pitfalls with closures?

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // Outputs 3, 3, 3
}
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // Outputs 0, 1, 2
}

13. What is an IIFE in JavaScript?

Q: What is an IIFE in JavaScript?

An Immediately Invoked Function Expression (IIFE) is a function expression that is defined and executed immediately after creation, often used to create a private scope and avoid polluting the global namespace.

14. How do you write an IIFE?

Q: How do you write an IIFE?

Wrap a function expression in parentheses and invoke it immediately with ():

(function() {
  console.log("IIFE executed!");
})();

15. Why use an IIFE?

Q: Why use an IIFE?

16. Can you give an example of an IIFE?

Q: Can you give an example of an IIFE?

(function() {
  let message = "Hello from CodeVerse";
  console.log(message); // Output: Hello from CodeVerse
})();
console.log(typeof message); // Output: undefined (message is not in global scope)

17. Can an IIFE take arguments?

Q: Can an IIFE take arguments?

Yes, you can pass arguments to an IIFE:

(function(name) {
  console.log(`Hello, ${name}!`); // Output: Hello, Alice!
})("Alice");

18. What is the difference between an IIFE and a regular function?

Q: What is the difference between an IIFE and a regular function?

19. How does an IIFE help with closures?

Q: How does an IIFE help with closures?

An IIFE can create a closure by encapsulating variables in its scope, making them inaccessible outside while allowing inner functions to retain access. Example:

const counter = (function() {
  let count = 0; // Private variable
  return function() {
    return count++;
  };
})();
console.log(counter()); // Output: 0
console.log(counter()); // Output: 1

20. Are IIFEs still relevant in modern JavaScript?

Q: Are IIFEs still relevant in modern JavaScript?

Yes, but less common due to block-scoped variables (let, const) and modules, which reduce the need for IIFEs to avoid global pollution. They’re still used for one-time initialization or legacy code.

21. What are some pitfalls to avoid with IIFEs?

Q: What are some pitfalls to avoid with IIFEs?