Functions
Functions bundle reusable chunks of code that can accept inputs (parameters) and produce outputs (return values).
Featured Developer Sponsor • Zero-Token Protection
📋 Copy JavaScript Function Styles & Rest Parameters Snippet
// Standard Function vs Arrow Function
// Regular Function: has own 'this', 'arguments', hoisted
function calculateTotal(taxRate, ...items) {
return items.reduce((sum, item) => sum + item * (1 + taxRate), 0);
}
// Arrow Function: inherits lexical 'this', cannot be constructor
const multiply = (a, b = 1) => a * b;⚠️ 5 Fatal Traps & JavaScript Pitfalls
Trap #1: Lexical this in Arrow Functions Used as Methods
Arrow functions do NOT bind their own
this; they inherit this from the enclosing lexical scope. Defining an object method with an arrow function leaves this bound to window or undefined.Trap #2: Invoking Arrow Functions with new Keyword
Arrow functions lack a
[[Construct]] internal method and prototype property. Calling new MyArrow() throws an immediate TypeError: ... is not a constructor.Trap #3: Function Declaration vs Expression Hoisting Mismatch
Function declarations (
function f() {}) are fully hoisted with their body. Function expressions (const f = () => {}) are hoisted as uninitialized variables in the TDZ.Trap #4: Arguments Object Lacks Array Prototype Methods
The legacy
arguments object is array-like but is not an Array; calling arguments.map() throws a TypeError. Always use rest parameters: (...args) => {}.Trap #5: Default Parameters Evaluated at Call-Time
Default parameters evaluate dynamically on each invocation.
function get(id = randomId()) calls the function every time the argument is omitted.💬 Frequently Asked Questions
Sponsored Utility
While You're Here
Sponsored Recommendations
Advertisement