Skip to content
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -949,6 +949,47 @@ 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 inline, anonymous callbacks.
> Outside of these cases, prefer traditional function declarations or expressions
> for clarity and consistency.
>
> **Use arrow functions only when:**
>
> - 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:**
>
> ```js
> // Named function for reuse and clearer stack traces
> function formatUserName(user) {
> return `${user.firstName} ${user.lastName}`;
> }
> ```
>
> ```js
> // Dynamic `this` binding (e.g. event handlers)
> const button = document.querySelector('button');
>
> button.addEventListener('click', function () {
> this.classList.add('active');
Comment on lines +975 to +979
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is actually not a good idea; in event handlers, you should use the event object argument's target or currentTarget instead of this.

> });
> ```
>
> ```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) {
Expand Down