prefer-arrow-functions

Prefer arrow functions

This ESLint rule encourages the use of arrow functions (() => {}) over traditional function () {} syntax whenever possible.

Why prefer arrow functions?

Arrow functions are more concise and have fewer features compared to regular functions. Notably, they do not support this and arguments. By defaulting to arrow functions when possible, the code signals that it's simpler and easier to understand.

When you encounter an arrow function, you can quickly assume it's straightforward. Conversely, when you encounter traditional function () {} syntax, you can expect it to be more complex and requiring closer attention.

Behavior

This rule generates warnings when traditional function syntax (function () {}) is used when it could be replaced with arrow function syntax (() => {}). The fixes preserve comments, whitespace, and types.

Examples of passing code

// Arrow functions are allowed
(() => {});
(async () => {})

const foo = () => {}
export const bar = () => {}
export default () => {}

// Ignores references to this, arguments, and new.target
(function () {
    this;
    (() => this)

    arguments;
    (() => arguments)

    new.target;
    (() => new.target)
});

// Object getters & setters
({
    get foo() { return value },
    set foo(value) {}
})

// Class definition
class myClass {
    constructor() {}

    accessSuper() {
        super.foo()
    }

    * generator() {}

    get foo() { return value }

    set foo(value) {}

    arrow = () => {}
}

// Prototype setting and function properties
function myFunction() {
    return myFunction.name
}
myFunction.myFunctype = {}
myFunction.name
myFunction.length

// Ignores generators
function* generator() {}
async function* asyncGenerator() {}

// Hoisting
hoisted()
function hoisted() {}

Examples of failing code

/* Function declarations */
function foo() {}
// Fixed: const foo = () => {}

async function bar() {}
// Fixed: const foo = async () => {}

/* Function with comments */
function/* a */baz/* b */()/* c */ {}
// Fixed: const /* a */ baz /* b */ = /* c */ () => {}

/* Function expressions */
(async function () {})
// Fixed: (async () => {})

/* Object properties */
const object = {
    method() {}
}
// Fixed: { method: () => {} }

/* Classes */
class MyClass {
    method() {}
}
// Fixed: class MyClass { method = () => value }

/* Exports */
export function namedExport() {}
// Fixed: export const namedExport = () => {}

export default function defaultExport() {}
// Fixed: export default () => {}

/* TypeScript */
function typescript<T extends string>(a: T) {}
// Fixed: const typescript = <T extends string>(a: T) => {}

Limitations

This rule will not generate warnings or fixes for traditional functions that use any of the following features:

Inside function body

• this
• arguments
• function*
• new.target
• super

Function properties

• name
• length
• prototype

Declaration style

• Hoisting
• get / set
• constructor

Warning

This rule only detects these flags within the file. This may be lead to false positives, for example when the functions are exported and the .length property is checked in another file.