Q279- What is the difference between normal functions and arrow functions?

Q279 — Difference Between Normal Functions and Arrow Functions

---

✅ 1. this Binding

Normal Function

this is dynamic and depends on how the function is called.

function show() {
  console.log(this);
}

Arrow Function

this is lexically bound (inherits from surrounding scope).

const show = () => {
  console.log(this);
};

✔ Arrow functions are great for callbacks
❌ Not suitable when you need dynamic this

---

✅ 2. Constructor Usage

Normal Function → Can be used as constructor

function User(name) {
  this.name = name;
}
const u = new User("Teekam");

Arrow Function → ❌ Cannot be used as constructor

const User = (name) => {
  this.name = name;
};
// new User("Teekam") ❌ Error

---

✅ 3. arguments Object

Normal Function → Has arguments

function sum() {
  console.log(arguments);
}

Arrow Function → ❌ No arguments

const sum = () => {
  console.log(arguments); // Error
};

✔ Use rest operator (...args) instead.

---

✅ 4. Hoisting

Normal Function → Fully hoisted

sayHi();
function sayHi() {
  console.log("Hi");
}

Arrow Function → Not hoisted (if declared with const/let)

sayHi(); // ❌ Error
const sayHi = () => {};

---

✅ 5. Syntax & Readability

Normal Function

function add(a, b) {
  return a + b;
}

Arrow Function (shorter)

const add = (a, b) => a + b;

✔ Arrow functions are concise
✔ Ideal for callbacks and small functions

---

✅ 6. Methods in Objects

Normal Function → Recommended

const obj = {
  name: "Teekam",
  greet() {
    console.log(this.name);
  }
};

Arrow Function → ❌ Avoid

const obj = {
  name: "Teekam",
  greet: () => console.log(this.name) // undefined
};

---

🔥 Summary Table

Feature	Normal Function	Arrow Function
this	Dynamic	Lexical
Constructor	✔ Yes	❌ No
arguments	✔ Available	❌ Not available
Hoisting	✔ Yes	❌ No
Syntax	Verbose	Concise
Best use	Methods, constructors	Callbacks, helpers

---

🎯 Short Interview Answer

Normal functions have their own this, can be used as constructors, and support arguments.
Arrow functions have lexical this, cannot be used as constructors, and are more concise, making them ideal for callbacks and functional code.

---

⭐ Best Practice

✔ Use arrow functions for callbacks and helpers
✔ Use normal functions for object methods and constructors