Lesson 52: Mastering JavaScript "new Function" syntax with challenges!

What is new Function?
It’s a way to dynamically create a new function from strings at runtime.

🟩 Syntax:

let func = new Function([arg1, arg2, ...argN], functionBody);

• Each argument and the body are passed as strings.

• Returns a new function.

let sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 3)); // 5

🧠 Key Insight:

Unlike normal functions, a function created with new Function does not close over the outer lexical environment — it closes over the global environment only.

🔥 Example with Closure Difference:

jsCopyEditfunction getFunc() {
  let secret = "hidden";

  return new Function('console.log(secret)');
}

getFunc()(); // ❌ ReferenceError: secret is not defined

But with a regular function:

function getFunc() {
  let secret = "hidden";

  return function() {
    console.log(secret); // ✅ works
  }
}
getFunc()(); // "hidden"

---

🔹 2. Fill Any Gaps

✅ Hidden Concepts and Advanced Mechanics

✅ [[Environment]] Internal Slot

Every function in JS has a hidden [[Environment]] — it’s the lexical scope captured at creation time.

• function() or arrow functions: capture current [[Environment]].

• new Function(...): always captures global environment.

🔥 This means variables in outer scopes are inaccessible to new Function.

---

✅ Quirks / Gotchas

🧨 1. Lack of Closure

let user = "Manoj";
let f = new Function('console.log(user)');
f(); // ❌ ReferenceError

🧨 2. Eval-like behavior

Using new Function is similar to eval():

• It compiles code at runtime

• Avoids capturing local scope

• May be blocked in CSP (Content Security Policy)

🧨 3. Minifier Breakage Prevention

Minifiers rename local vars. If dynamic function creation accessed them, code could break post-minification.

🧨 4. No access to this unless explicitly passed

You must bind or pass this to use it inside:

let f = new Function('return this.value');
console.log(f.call({ value: 42 })); // 42

---

✅ Browser Differences & Security

• ⚠️ In CSP-restricted environments (script-src 'self'), new Function throws.

• Chrome & Firefox treat it as unsafe in extensions.

• Many JS linters warn against it.

---

🔹 3. Challenge Me Deeply

🟢 Basic

1. Create a function using new Function that multiplies two numbers.

2. Create a new Function that alerts "Hello World" but does not take any parameters.

3. Write a new Function that accepts a parameter and returns its square.

🟡 Intermediate

4. Dynamically build a function that validates if a string contains a keyword (keyword is passed at runtime).

5. Write a factory function that returns a new function based on a user-defined mathematical operation (+, -, *, /).

6. Use new Function to implement a simple calculator: "3 * 5 + 2" → 17.

🔴 Advanced

7. Create a dynamic form validator that builds a custom validation function from string rules.

8. Use new Function in a way that bypasses a minifier's renaming of a parameter.

9. Construct a sandboxed execution system using new Function for plugin-like logic (no closures, secure).

10. Build a code runner for user-written code snippets that can’t access internal app state.

🎯 Brain Twister

11. Why does this fail?

function outer() {
  let secret = "top-secret";
  return new Function('return secret;');
}
console.log(outer()()); // ??

---

🔹 4. Interview-Ready Questions

✅ Conceptual

• What is the difference between eval() and new Function()?

• Why does new Function() not capture local variables?

• What are the performance and security implications of using new Function()?

✅ Debugging

• A developer dynamically creates a function using new Function, but it can't access variables in their module — why?

• You minified your JS app and now dynamic code that worked before fails — what happened?

✅ Scenario-Based

• You receive rules from a backend as strings and need to validate input — how would you do it safely?

• If you use new Function in a browser extension, what are the security/CSP considerations?

✅ Best Practices

👍 Impressive:

• Avoiding new Function unless dynamic runtime code is truly needed

• Using factory functions instead when closures are required

• Sanitizing any string input used in dynamic function creation

👎 Red Flags:

• Using new Function just to delay logic

• Passing user input unsanitized → XSS vulnerability

• Using it in code meant to run in restricted environments

---

🔹 5. Real-World Usage

✅ Where it's used:

• Form builders: Build field validation dynamically from schema

• Template engines: Compile template into JS function (e.g., Handlebars precompilation)

• No-code platforms: Let users write formula expressions that become executable code

• Game engines: Allow scripted logic from external files

✅ Examples

🛠 Lodash (older versions)

_.template('Hello <%= name %>') // compiles to a function

🧩 Vue / Angular templates

Older template compilers would optionally allow using new Function.

---

🔹 6. Remember Like a Pro

🧠 Mnemonic:

"New Function = New Scope (Global Only)"

NFGS — New Function = Global Scope

⚡ Analogy:

new Function is like loading code from a script tag written at runtime — it doesn’t “see” where it came from, only what’s in the global world.

🧾 Cheatsheet:

---

🔹 7. Apply It in a Fun Way

🧪 Mini Project: Dynamic Math Evaluator (like a custom calculator)

📦 Goal:

Create a tool where users type something like "a + b * 2" and get a compiled function they can reuse.

---

🛠 Steps:

1. Create a function buildEvaluator(expr: string) that returns a function.

2. Use new Function('a', 'b', 'return ' + expr) inside.

3. Let users provide a and b values and see results.

4. Prevent code injection by sanitizing expr (e.g. only allow digits, variables, + - * /).

---

🚀 Extension Ideas:

• Allow variables from a list, like x, y, z

• Add safe mode using regex to disallow harmful keywords (document, eval, etc.)

• Support functions like Math.sqrt, Math.pow

---

➕ Bonus

🧰 Open-Source Projects Using This Heavily

• Lodash (_.template)

• AngularJS $compile (legacy)

• jQuery Templates (deprecated)

• FormIO — dynamic form validation rules

---

🚨 Common Developer Mistakes

• Thinking new Function can access outer scope (it can’t)

• Using unsanitized strings from users (XSS)

• Not understanding CSP violations (production error)

• Assuming it's "better" than closures — it's not unless needed

---

🚀 Performance Tips

• new Function has high creation cost → avoid in hot paths

• Prefer regular functions or closures if dynamic behavior isn't essential

• Use caching if building many similar dynamic functions

---

✅ Deprecated or Modern Alternatives?

• ✅ Use Function only when runtime compilation is needed.

• ✅ Use closures and factory functions instead where possible.

• ✅ Use Web Workers or module loaders to isolate dynamic logic.

---

🧠 Summary Table