Function Types

Function Declaration:

javascript

function myFunc() { return "hello"; }
// Hoisted - can call before definition

1-2 lines: Traditional way to define functions. Gets hoisted to top of scope.

Function Expression:

javascript

const myFunc = function() { return "hello"; };
// Not hoisted - must define before use

1-2 lines: Function stored in variable. Not hoisted, more predictable behavior.

Arrow Function:

const myFunc = () => "hello";
const add = (a, b) => a + b;

1-2 lines: Shorter syntax, no this binding, implicit return for single expressions.

First-Class Functions:

const func = myFunction; // assign to variable
passFunc(myFunction); // pass as argument
return myFunction; // return from function

1-2 lines: Functions are values - can be stored, passed around, returned like any other data.

Higher-Order Function:

function higherOrder(callback) { return callback(); }
const result = [1,2,3].map(x => x * 2); // map is higher-order

1-2 lines: Function that takes other functions as parameters OR returns functions.

Callback Function:

function greet(name, callback) { callback(`Hello ${name}`); }
greet("John", console.log); // console.log is the callback

1-2 lines: Function passed to another function to be called later.

IIFE (Immediately Invoked Function Expression):

(function() { console.log("runs immediately"); })();
(() => console.log("arrow IIFE"))();

1-2 lines: Function that runs immediately when defined. Creates private scope.

---

Arrow Functions - Simple explanation:

What they are: Shorter syntax for writing functions

Basic Syntax Rules:

1. Single expression (implicit return)

javascript

const add = (a, b) => a + b; // no return needed
const double = x => x * 2; // single param, no parentheses
const greet = () => "Hello!"; // no params, empty parentheses required

2. Multiple statements (explicit return)

javascript

const calculate = (a, b) => {
  const result = a + b;
  return result; // must use return with curly braces
};

Syntax Shortcuts:

javascript

// Multiple parameters - need parentheses
(a, b) => a + b
 
// Single parameter - parentheses optional
x => x * 2
// or
(x) => x * 2
 
// No parameters - parentheses required
() => "Hello"
 
// Single expression - no braces, auto return
x => x * 2
 
// Multiple lines - need braces and return
x => {
  console.log(x);
  return x * 2;
}

Key Differences from Regular Functions:

1. No this binding

javascript

// Regular function - has its own 'this'
const obj = {
  name: "John",
  greet: function() { console.log(this.name); } // "John"
};
 
// Arrow function - inherits 'this' from parent scope
const obj2 = {
  name: "John", 
  greet: () => console.log(this.name) // undefined (no own 'this')
};

2. Cannot be constructors

javascript

const Person = (name) => { this.name = name; };
new Person("John"); // TypeError: Person is not a constructor

3. No arguments object

javascript

function regular() { console.log(arguments); } // works
const arrow = () => console.log(arguments); // ReferenceError

Common Use Cases:

javascript

// Array methods
[1, 2, 3].map(x => x * 2); // [2, 4, 6]
[1, 2, 3].filter(x => x > 1); // [2, 3]
 
// Event handlers (when you don't need 'this')
button.addEventListener('click', () => console.log('clicked'));
 
// Callbacks
setTimeout(() => console.log('Hello'), 1000);

Interview gotchas:

javascript

// Returning objects - need parentheses
const makeObj = x => ({ value: x }); // correct
const makeObj = x => { value: x }; // wrong - thinks it's a block
 
// 'this' binding difference
const obj = {
  name: "John",
  regularMethod() { return this.name; }, // "John"
  arrowMethod: () => this.name // undefined
};

Bottom line: Arrow functions are shorter syntax with no this binding. Use for simple functions and callbacks, avoid for object methods!