consistent-function-scoping

📝 Move function definitions to the highest possible scope.

💼🚫 This rule is enabled in the ✅ recommended config. This rule is disabled in the ☑️ unopinionated config.

A function definition should be placed as close to the top-level scope as possible without breaking its captured values. This improves readability, directly improves performance and allows JavaScript engines to better optimize performance.

Examples

// ❌
export function doFoo(foo) {
	// Does not capture anything from the scope, can be moved to the outer scope
	function doBar(bar) {
		return bar === 'bar';
	}

	return doBar;
}

function doFoo(foo) {
	const doBar = bar => {
		return bar === 'bar';
	};
}

function doFoo() {
	// Does not capture anything from the scope, can be moved to the outer scope
	return bar => bar === 'bar';
}

// Arrow functions in return statements are now also flagged
export function someAction() {
	return dispatch => dispatch({type: 'SOME_TYPE'});
}

// ✅
function doBar(bar) {
	return bar === 'bar';
}

export function doFoo(foo) {
	return doBar;
}

// ❌
function doFoo(foo) {
	const doBar = bar => {
		return bar === 'bar';
	};
}

// ✅
const doBar = bar => {
	return bar === 'bar';
};

function doFoo(foo) {}

// ✅
export function doFoo(foo) {
	function doBar(bar) {
		return bar === 'bar' && foo.doBar(bar);
	}

	return doBar;
}

const doBar = bar => bar === 'bar';

export function doFoo() {
	return doBar;
}

Options

checkArrowFunctions

Type: boolean
Default: true

Pass "checkArrowFunctions": false to disable linting of arrow functions.

Limitations

This rule does not detect or remove extraneous code blocks inside of functions:

function doFoo(foo) {
	{
		function doBar(bar) {
			return bar;
		}
	}

	return foo;
}

It also ignores functions that contain JSXElement references:

function doFoo(FooComponent) {
	function Bar() {
		return <FooComponent/>;
	}

	return Bar;
};

Immediately invoked function expressions (IIFE) are ignored:

(function () {
	function doFoo(bar) {
		return bar;
	}
})();

Built-in Hooks in React are ignored:

useEffect(() => {
	async function getItems() {}

	getItems();
}, [])