JavaScript Arrow Function Interview Questions

Syntax — from verbose to concise

Arrow functions offer progressively shorter syntax depending on what you need:

// Traditional function expression
const double = function(n) {
  return n * 2
}

// Arrow function — basic form
const double = (n) => {
  return n * 2
}

// Single parameter — parentheses optional
const double = n => {
  return n * 2
}

// Single expression body — return is implicit, braces removed
const double = n => n * 2

// Multiple parameters — parentheses required
const add = (a, b) => a + b

// No parameters — parentheses required
const greet = () => 'Hello!'

// Returning an object literal — wrap in parentheses to avoid ambiguity with block
const makeUser = (name, age) => ({ name, age })
// Without parens: n => { name, age } — JS reads {} as a block, not an object

The critical difference: lexical this

Regular functions get their own this binding set at call time. Arrow functions have no this binding at all — they capture the this from the surrounding scope at the moment they were defined. It never changes.

const timer = {
  seconds: 0,

  // Regular function — loses this when passed as callback
  startBroken() {
    setInterval(function() {
      this.seconds++          // 'this' is undefined (strict) or window
      console.log(this.seconds)
    }, 1000)
  },

  // Arrow function — inherits 'this' from startFixed's context = the timer object
  startFixed() {
    setInterval(() => {
      this.seconds++          // 'this' is the timer object ✓
      console.log(this.seconds)
    }, 1000)
  }
}

timer.startFixed()  // 1, 2, 3, 4...

This is the primary use case arrow functions were designed to solve — callbacks that need access to the enclosing object's this. Before arrow functions, developers used var self = this or .bind(this) as workarounds:

// Pre-ES6 workarounds (no longer needed with arrow functions)

// Workaround 1: save this as a variable
startOld() {
  const self = this
  setInterval(function() {
    self.seconds++  // use self instead of this
  }, 1000)
}

// Workaround 2: bind
startOld() {
  setInterval(function() {
    this.seconds++
  }.bind(this), 1000)
}

What arrow functions don't have

Arrow functions are intentionally missing several features of regular functions:

No own this (covered above)

Cannot be meaningfully used as object methods when they need to reference the object.

No arguments object

function regular() {
  console.log(arguments)  // [1, 2, 3]
}
regular(1, 2, 3)

const arrow = () => {
  console.log(arguments)  // ReferenceError — or outer function's arguments
}
arrow(1, 2, 3)

// Use rest parameters instead:
const arrow = (...args) => {
  console.log(args)  // [1, 2, 3] ✓
}
arrow(1, 2, 3)

Cannot be used as constructors

function Person(name) {
  this.name = name
}
const alice = new Person('Alice')  // ✓ works

const Person = (name) => {
  this.name = name
}
const alice = new Person('Alice')  // TypeError: Person is not a constructor

No prototype property

function Regular() {}
console.log(Regular.prototype)  // { constructor: f }

const Arrow = () => {}
console.log(Arrow.prototype)    // undefined

Cannot be used as generator functions

// This is not valid:
const gen = *() => yield 1  // SyntaxError

No duplicate named parameters

function dup(a, a) {}    // valid in sloppy mode (bad but allowed)
const dup = (a, a) => {} // SyntaxError always

Where arrow functions shine — functional patterns

const numbers = [1, 2, 3, 4, 5, 6]

// map, filter, reduce — arrow functions are perfect here
const doubled    = numbers.map(n => n * 2)
const evens      = numbers.filter(n => n % 2 === 0)
const sum        = numbers.reduce((acc, n) => acc + n, 0)
const formatted  = numbers.map((n, i) => `${i + 1}: ${n}`)

// Chaining stays readable
const result = numbers
  .filter(n => n > 2)
  .map(n => n * n)
  .reduce((sum, n) => sum + n, 0)
// [3,4,5,6] → [9,16,25,36] → 86

Where arrow functions break — object methods

// Arrow as object method — almost always wrong
const user = {
  name: 'Alice',

  // Arrow function — this is the outer scope (module/global), not user
  greet: () => {
    console.log(`Hello, ${this.name}`)  // undefined
  },

  // Regular function — this is set by the call obj.greet()
  greetCorrect() {
    console.log(`Hello, ${this.name}`)  // 'Alice' ✓
  }
}

user.greet()         // 'Hello, undefined'
user.greetCorrect()  // 'Hello, Alice'

Arrow functions in React

// Class component event handlers — arrow class fields
class Button extends React.Component {
  // Arrow function class field — this is permanently bound to the instance
  handleClick = (e) => {
    console.log(this.props.label)  // 'this' always = component instance ✓
  }

  render() {
    return {this.props.label}
  }
}

// Function components — arrows are the natural choice for callbacks
function List({ items }) {
  return (
    

      {items.map(item => (       // arrow — clean, no this needed
        
{item.name}
      ))}
    
  )
}

// Inline arrow in JSX — creates a new function every render (minor perf note)
 handleClick(id)}>Click
// vs useCallback for expensive scenarios:
const onClick = useCallback(() => handleClick(id), [id])

Implicit return gotchas

// These look similar but behave differently:

const fn1 = () => { value: 42 }
// Returns undefined — {} is a block, 'value: 42' is a labelled statement

const fn2 = () => ({ value: 42 })
// Returns { value: 42 } — () wraps the object literal ✓

// Multi-line implicit return — use parentheses
const getUser = (id) => ({
  id,
  name: 'Alice',
  role: 'admin'
})

// Common mistake with conditional:
const check = n => {
  n > 0 ? 'positive' : 'negative'  // missing return!
}
check(5)  // undefined

const check = n => n > 0 ? 'positive' : 'negative'  // ✓