From 005116e69472b259beec19fc961750bc924149e6 Mon Sep 17 00:00:00 2001 From: Manvendra Date: Sun, 25 Jan 2026 18:50:52 +0530 Subject: [PATCH 1/4] Docs: clarify when traditional functions are preferred --- README.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/README.md b/README.md index 9a325a355b..8a8e3f4cbc 100644 --- a/README.md +++ b/README.md @@ -949,6 +949,45 @@ Other Style Guides > Why not? If you have a fairly complicated function, you might move that logic out into its own named function expression. + > **Note:** While arrow functions are recommended for anonymous callbacks, traditional + > function declarations or expressions are still preferred in certain scenarios where + > their behavior is more appropriate. + > + > **Prefer traditional functions when:** + > + > - You rely on **function hoisting**, such as calling a function before its definition. + > - You need a **dynamic `this` binding**, for example in object methods or DOM event handlers. + > - You require access to the **`arguments` object**, which is not available in arrow functions. + > + > **Examples:** + > + > ```js + > // Function hoisting + > initialize(); + > + > function initialize() { + > // setup logic + > } + > ``` + > + > ```js + > // Dynamic `this` binding (e.g. event handlers) + > const button = document.querySelector('button'); + > + > button.addEventListener('click', function () { + > this.classList.add('active'); + > }); + > ``` + > + > ```js + > // Using the `arguments` object + > function sum() { + > return Array.from(arguments).reduce((total, value) => total + value, 0); + > } + > ``` + + + ```javascript // bad [1, 2, 3].map(function (x) { From 74054f5cbb98a8d1827a7c3950d142ec10f6e9aa Mon Sep 17 00:00:00 2001 From: Manvendra Date: Tue, 27 Jan 2026 15:01:41 +0530 Subject: [PATCH 2/4] docs: align arrow function guidance with non-inline usage --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8a8e3f4cbc..6e55322465 100644 --- a/README.md +++ b/README.md @@ -955,18 +955,16 @@ Other Style Guides > > **Prefer traditional functions when:** > - > - You rely on **function hoisting**, such as calling a function before its definition. + > - You are defining top-level, reusable functions rather than inline callbacks. > - You need a **dynamic `this` binding**, for example in object methods or DOM event handlers. > - You require access to the **`arguments` object**, which is not available in arrow functions. > > **Examples:** > > ```js - > // Function hoisting - > initialize(); - > - > function initialize() { - > // setup logic + > // Named function for reuse and clearer stack traces + > function formatUserName(user) { + > return `${user.firstName} ${user.lastName}`; > } > ``` > From d7b821174381beb0d6a509fd5126a5e1020dcde8 Mon Sep 17 00:00:00 2001 From: Manvendra Date: Wed, 28 Jan 2026 05:20:37 +0530 Subject: [PATCH 3/4] docs: reframe arrow function guidance around recommended use cases --- README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 6e55322465..0821082988 100644 --- a/README.md +++ b/README.md @@ -949,15 +949,18 @@ Other Style Guides > Why not? If you have a fairly complicated function, you might move that logic out into its own named function expression. - > **Note:** While arrow functions are recommended for anonymous callbacks, traditional - > function declarations or expressions are still preferred in certain scenarios where - > their behavior is more appropriate. + > **Note:** Arrow functions are intended primarily for short, anonymous callbacks. + > Outside of these cases, prefer traditional function declarations or expressions + > for clarity and consistency. > - > **Prefer traditional functions when:** + > **Use arrow functions only when:** > - > - You are defining top-level, reusable functions rather than inline callbacks. - > - You need a **dynamic `this` binding**, for example in object methods or DOM event handlers. - > - You require access to the **`arguments` object**, which is not available in arrow functions. + > - Defining inline callbacks (for example in `map`, `filter`, or event handlers). + > - A lexical `this` binding is explicitly desired. + > + > In other situations — such as defining reusable functions, object methods, or code + > that relies on a dynamic `this` value or the `arguments` object — prefer traditional + > functions. > > **Examples:** > @@ -986,6 +989,7 @@ Other Style Guides + ```javascript // bad [1, 2, 3].map(function (x) { From 0043f4c53c0a81307ee68123a9318c360fa3e37b Mon Sep 17 00:00:00 2001 From: Manvendra Kumar <140243111+Manvendra0023@users.noreply.github.com> Date: Wed, 28 Jan 2026 14:22:53 +0530 Subject: [PATCH 4/4] Update README.md Co-authored-by: Jordan Harband --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0821082988..edd1dff0a4 100644 --- a/README.md +++ b/README.md @@ -949,7 +949,7 @@ Other Style Guides > Why not? If you have a fairly complicated function, you might move that logic out into its own named function expression. - > **Note:** Arrow functions are intended primarily for short, anonymous callbacks. + > **Note:** Arrow functions are intended primarily for inline, anonymous callbacks. > Outside of these cases, prefer traditional function declarations or expressions > for clarity and consistency. >