Lesson 51: Mastering JavaScript Function Objects & NFE with challenges!

🧠 What is a Function in JavaScript?

In JavaScript, functions are first-class objects. This means:

• They can be stored in variables.

• They can be passed as arguments to other functions.

• They can be returned from functions.

• They can have properties and methods, just like any other object.

✅ Functions are "callable objects" with internal [[Call]] and optional [[Construct]] behaviors.

---

🧪 Examples

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

greet.language = 'English';

console.log(greet('Manoj'));        // Hello, Manoj
console.log(greet.language);        // English (property on function)

---

🔍 Function Properties

name (Read-only)

Auto-assigned based on declaration or contextual naming.

let f = function custom() {};
console.log(f.name); // "custom"

Even anonymous functions can have a contextual name:

let greet = function() {};
console.log(greet.name); // "greet"

length

Returns the number of formal parameters (excluding rest parameters and defaults).

function f(a, b, ...rest) {}
console.log(f.length); // 2

---

🔹 2. Fill Any Gaps

🔬 Internal Mechanics

Functions have internal slots:

• [[Environment]]: lexical scope

• [[Code]]: function body

• [[ThisMode]]: controls how this is resolved (lexical, strict, global)

🪤 Common Misconceptions

• Not all function expressions have names.

• function foo() {} is a Function Declaration. But:

    let bar = function foo() {}; // is an Expression
  

• func.name inside an anonymous function is not always empty — JS engines often infer it.

---

⚠️ Behavior in Strict Mode

"use strict";
function f(a, a) {} // ❌ SyntaxError in strict mode

---

🧱 Function Object vs Closure Variable

function makeCounter() {
  function counter() {
    return counter.count++;
  }
  counter.count = 0;
  return counter;
}

Here, .count is attached to the function object, not its closure.

✅ Alternative: closure-based encapsulation.

---

🧠 Named Function Expression (NFE)

NFE enables safe recursion inside assigned functions:

let sayHi = function func(who) {
  if (!who) return func("Guest");
  console.log(`Hello, ${who}`);
};

Why not just call sayHi() inside? Because sayHi could be reassigned or nulled externally. func is only visible inside the function body.

---

🔹 3. Challenge Me Deeply

🟢 Basic

1. Create a function add with a .count property that tracks how many times it was called.

2. Write a function that logs its name and length.

3. Define a function with rest parameters and show how length behaves.

🟡 Intermediate

4. Write a memoize(fn) utility that caches function calls by attaching .cache to the function.

5. Create a function object with helper functions attached (like _.isArray, _.isNumber).

6. Build a polyfill checker using globalThis and Function.name to log unsupported functions.

🔴 Advanced

7. Create a recursive NFE that finds the factorial, and safely works even if reassigned.

8. Implement a rate-limited function with .lastCalledTime as a function property.

9. Emulate private state using closure vs function property — then compare memory exposure.

10. Write a meta-function that accepts any function and logs its .name and .length, then calls it.

🎯 Bonus Brain-Twister

What will be logged?

let sayHi = function func(who) {
  if (!who) return func("Guest");
  console.log(`Hello, ${who}`);
};

let welcome = sayHi;
sayHi = null;
welcome();

---

🔹 4. Interview-Ready Questions

📘 Conceptual

• Why are functions considered objects in JavaScript?

• What is the purpose of a Named Function Expression?

💡 Scenario

• How would you build a logger that tracks how often a function is used?

• When would you use a function property instead of a closure?

🧩 Debugging

• Why is this code failing?

let sayHi = function(who) {
  if (!who) sayHi("Guest");
};
let welcome = sayHi;
sayHi = null;
welcome(); // ❌ Error

✅ Best Practices

• ✅ Prefer closures for encapsulated state

• ✅ Use .name and .length for debugging tools

• 🚫 Avoid relying on contextual names for production logic

---

🔹 5. Real-World Usage

• jQuery: $ is a function object with many attached helpers ($.ajax, $.extend)

• Lodash: _ is a function with attached methods like _.map, _.filter

• Event systems: addEventListener(fn) → tracking functions via .id or metadata

• Analytics: Function wrappers that log .name or timing

---

🔹 6. Remember Like a Pro

🧠 Mnemonic

F.L.I.P. — Key Function Properties

• F = Function

• L = length of parameters

• I = Internal name (NFE)

• P = Properties attached (counter, id, etc.)

---

📌 Cheatsheet

---

🔹 7. Apply It in a Fun Way

🎯 Mini Project: Function Tracker Utility

Goal: Track function invocations, durations, and arguments.

🛠 Steps:

1. Create a function track(fn) that wraps any function.

2. Store call count, duration, and arguments on the wrapper.

3. Attach .log() to view the history.

function track(fn) {
  function wrapper(...args) {
    wrapper.calls.push(args);
    return fn.apply(this, args);
  }
  wrapper.calls = [];
  wrapper.log = () => console.log(wrapper.calls);
  return wrapper;
}

const sum = track((a, b) => a + b);
sum(1, 2);
sum(3, 4);
sum.log(); // [[1, 2], [3, 4]]

🎮 Extend It Further:

• Track average duration

• Detect slow functions

• Group by .name

---

➕ Extra Value

🔍 Projects That Use This

• Lodash, Underscore.js

• Express middleware functions often use .length for introspection

• Mocha, Jest sometimes attach properties to test callbacks

⚠️ Common Mistakes

• Assuming length includes rest parameters

• Using external variable names for recursion

• Modifying function identity (e.g., sayHi = null) without understanding the consequences

🧰 Performance Tips

• Avoid bloating function objects with too many properties in tight loops

• Use closures for hidden state to avoid external mutation

• Prefer named function expressions for self-reference