Beginner⏱️ 9 min📘 Topic 5 of 13

🎯 JavaScript Functions — Declarations, Expressions & Arrow Functions

Learn JavaScript functions — declarations, expressions, arrow functions, default params, rest, and this binding. Includes practical examples and top interview questions.

Functions are first-class citizens in JavaScript — you can pass them around like any other value.

3 ways to write a function

// 1. Declaration (hoisted)
function add(a, b) { return a + b; }

// 2. Expression
const add = function(a, b) { return a + b; };

// 3. Arrow
const add = (a, b) => a + b;

🧠 Arrow vs regular — the real difference

Arrows have no own this — they inherit it from where they're defined.
Arrows can't be used as constructors (no new).
Arrows don't have their own arguments object.
Arrows are shorter — that's the visible win.

💡 Default and rest parameters

function greet(name = 'friend', ...others) {
  console.log(`Hi ${name}!`);
  console.log(`Others:`, others);
}
greet('Sam', 'Alex', 'Bo');

👉 Try this yourself: Write a function that takes any number of arguments and returns their sum.

💻 Code Examples

Hoisting: declaration vs expression

sayHi();   // ✅ works — declaration is hoisted
function sayHi() { console.log('hi'); }

sayBye();  // ❌ TypeError — expression isn't hoisted
const sayBye = function() { console.log('bye'); };

Output:

hi
TypeError: sayBye is not a function

Arrow function inheriting `this`

const counter = {
  count: 0,
  start() {
    setInterval(() => {
      this.count++;       // ✅ uses counter's this
      console.log(this.count);
    }, 1000);
  }
};
counter.start();

Output:

1, 2, 3, 4… (works because arrow inherits this)

⚠️ Common Mistakes

Using arrow functions as object methods when you need `this` — they don't get one.
Forgetting `return` in multi-line arrow functions (`x => { x * 2 }` returns undefined; you need `x => { return x * 2; }`).
Using `arguments` inside an arrow function — it isn't defined there.
Calling a function expression before declaring it (no hoisting for expressions).

🎯 Interview Questions

Real questions asked at top product and service-based companies.

Q1.What's the difference between a function declaration and expression?Beginner

Declarations are hoisted with their body — you can call them before they appear in code. Expressions assign a function to a variable; only the variable is hoisted (undefined until the line executes).

Q2.What's different about arrow functions?Intermediate

No own `this`, no own `arguments`, can't be `new`d, no `prototype`. They inherit `this` from the surrounding lexical scope — perfect for callbacks, bad for object methods.

Q3.What are first-class functions?Intermediate

Functions treated like any other value: assignable to variables, passed as arguments, returned from other functions. This enables callbacks, higher-order functions, and functional patterns.

Q4.What's the difference between parameters and arguments?Intermediate

Parameters are the named variables in the function definition. Arguments are the actual values passed when calling the function.

Q5.What is an IIFE?Advanced

Immediately Invoked Function Expression — a function defined and called in one go: `(function(){ ... })()`. Historically used to create private scope before block scoping (let/const) existed.

🧠 Quick Summary

Functions are values — pass them around freely.
Declarations hoist fully; expressions don't.
Arrow = no this, no arguments, no new, no prototype.
Default params and rest (...) make signatures flexible.
Pick arrows for callbacks, declarations for top-level utilities.