Arrow functions lexically bind 'this' from their enclosing scope and have concise syntax, while regular functions dynamically bind 'this' based on how they're called and can be used as constructors.
Lexically bound from enclosing scope at definition time — cannot be changed with call/apply/bind
Dynamically bound based on how it's called — object method, new, call/apply/bind, or default global/undefined
No arguments object, no prototype, cannot be constructors (new throws TypeError), cannot be generators
Arrows for callbacks and preserving this; regular for object methods, constructors, and when you need arguments
Default values activate on undefined (not null); rest (...args) collects remaining args into a real array
JavaScript has two main function syntaxes: regular functions (function declarations/expressions) and arrow functions (ES6). Understanding their differences — especially around this binding — is one of the most frequently asked interview topics.
function foo() {} — fully hoisted, can be called before they appear in code.const foo = function() {} — follow variable hoisting rules (not available before assignment).this is dynamically bound based on how the function is called: as an object method (this = the object), with new (this = new instance), with call/apply/bind (this = explicit value), or standalone (this = global object or undefined in strict mode).arguments object — an array-like object containing all passed arguments.new — creates a new object and sets this to it.prototype property used for prototype-based inheritance.(params) => expression for single expressions (implicit return), (params) => { statements } for blocks.this is lexically bound — it captures this from the enclosing scope at definition time and cannot be changed. call(), apply(), and bind() cannot override it.arguments object — use rest parameters (...args) instead.new (() => {}) throws TypeError.prototype property.yield)..map(), .filter()), any context where you want to preserve the surrounding this.this to refer to the object, constructors, functions that need arguments object, generator functions.this binding issues. Class methods often use arrow function class fields to auto-bind this.function greet(name = 'World') {} — the default is used when the argument is undefined (not when it's null or false).function sum(...numbers) {} — collects remaining arguments into a real array (unlike arguments which is array-like). Must be the last parameter.Key Interview Distinction: this in Arrow vs Regular
Regular functions: this depends on how the function is called (dynamic). Arrow functions: this is inherited from where the function is defined (lexical). This is the single most important difference. A common follow-up: "Why can't you use arrow functions as object methods?" — because this would refer to the enclosing scope, not the object.
Fun Fact
Arrow functions were the most controversial ES6 feature during the TC39 proposal process. The committee debated the syntax for over 2 years — alternatives included fn(x) { x + 1 }, lambda(x) { x + 1 }, and (x) -> x + 1. The fat arrow => won partly because CoffeeScript had already popularized it, proving developers found it readable.