How do you define a function in JavaScript?

There are many ways in which we can define a function in Javascript depending on scenario and use cases:

Function Declaration: This is the most common and traditional way to define a function.

A function expression defines a function as part of an expression. It can be named or anonymous.

Arrow functions provide a concise syntax for writing functions. They are anonymous and do not have their own this context.

An IIFE is a function that is executed immediately after it is defined.

Generator functions allow you to define an iterative algorithm by using the function* syntax. They can be paused and resumed.

Async functions are used to work with asynchronous code and return a promise. They are defined using the async keyword.

Functions can also be defined as methods within objects.

Constructor functions are used to create objects. They are typically used with the new keyword.

Class Method (ES6): In ES6, you can define functions as methods within a class.

Difficulty: 4/10

Topics: hoisting, lexical scope, arrow functions

0-2 years experience

1
We have a button click handler in a component where we're trying to access 'this.state' inside a regular function, but it's throwing an undefined error. How would you rewrite this function definition to fix the binding issue, and why does that fix it?
2
Imagine you define a function using a standard 'function' declaration at the bottom of your file, but call it at the top. What happens? What if you change that to a 'const' arrow function instead?

2-5 years experience

1
You're reviewing a PR where a teammate defined all helper functions inside a React component body using arrow functions. What are the performance or testing implications of this, and when would you ask them to move those definitions outside the component?
2
We're refactoring an old jQuery-style codebase to modern ES6. A developer changed a standard event listener callback to an arrow function, and now '$(this)' is returning the global window object instead of the clicked element. Walk me through why this broke and how you'd resolve it without reverting completely to legacy syntax.

5-8 years experience

1
In a high-frequency data visualization dashboard, we are instantiating thousands of data-point objects. If we define methods directly inside the constructor versus on the prototype chain, what is the impact on memory allocation and garbage collection? How would you profile this?
2
We are building an extensible middleware framework where third-party developers can write plugins. We need to decide whether to pass context as an argument or bind it to 'this' of the plugin function. What are the API design tradeoffs of both approaches, especially considering arrow functions can't be rebound?

8+ years experience

1
We are planning a migration of a 500k-line legacy codebase from ES5 prototype-based classes to modern ES modules and classes. What automated codemod strategies would you put in place to handle the subtle differences in function hoisting and lexical 'this' binding, and how do you mitigate the risk of runtime regressions?
2
Your team is debating a strict ESLint rule to enforce arrow functions everywhere versus allowing standard function declarations. From a long-term maintenance, debugging (like stack traces), and engine-level optimization (V8) perspective, how do you guide the team to a decision?

❓How does the JS engine handle memory allocation differently for prototype methods versus inline arrow functions?
❓What happens if you try to use the 'arguments' object or 'yield' inside an arrow function?
❓How do stack traces differ in production builds when using anonymous function expressions versus named function declarations?