Rule proposal: prefer-array-find

[oscarmarcelo]

Prefer .find() over .filter()[0], since find breaks the loop as soon as it finds a match.

Fail

const item = array.filter(x => x === '🦄')[0];

Pass

const item = array.find(x => x === '🦄');

[fisker]

Fail

const item = array.filter(x => x === '🦄').shift();

[sindresorhus]

Accepted. PR welcome.

[fisker]

sindresorhus Asked about this in #735 (comment)

const result = array.filter(x => x === '🦄');
const item = result[0];

To support this, we need check result not exported, and only accessed with [0]

1. If we fix to

const result = array.find(x => x === '🦄');
const item = result;

The name may confuse people const allTrueArray = array.filter(foo) -> const allTrueArray = array.find(foo) the allTrueArray is not an array anymore.

2. If we fix to

const item = array.find(x => x === '🦄');

problem is the item may in a loop, this will call .find() may times.

3. If we support this, should we support

const result = array.filter(x => x === '🦄');
const item = result.shift();

const result = array.filter(x => x === '🦄');
const [item] = result;

too?

@oscarmarcelo What do you think?

[oscarmarcelo]

Honestly, I don't understand the implications of the first two points, but I totally agree with the third one!

[fisker]

I have one concern about side effects of .filter call, in this case

const arrayTypeObjects = foo.filter(object => {
	const isArray = Array.isArray(object.data);
	object.isArray = isArray; // <-- also add a mark to every object
	return isArray;
});

const firstArray = arrayTypeObjects[0];

doSomething(firstArray);

for (const object of foo) {
	if (object.isArray) { // <-- rely on the mark set above
		doSomething(object.data)
	} else {
		doSomethingDifferent(object.data)
	}
}

If we fix foo.filter to foo.find, the code will be broken.

For this reason, I suggest auto-fix under an option like this

{
	'unicorn/prefer-array-find': [
		'error',
		{
			ignoreSideEffect: true, 
			operatorForDefaultValueOfDestructuring: '??'
		}
	]
}

ignoreSideEffect

Default false, set to true enables auto fix.

operatorForDefaultValueOfDestructuring

Default undefined,

For this case

const [foo = bar] = array.filter(fn);

undefined

Suggest const foo = array.filter(fn) ?? bar and const foo = array.filter(fn) || bar, no auto fix.

nullish-coalescing-operator / ??

Auto fix to const foo = array.filter(fn) ?? bar

logical-or-operator / ||

Auto fix to const foo = array.filter(fn) || bar

//cc @sindresorhus @oscarmarcelo Thoughts?

[oscarmarcelo]

Nice find! I didn't think about this to this level of detail! 😃
LGTM! 👍

[fisker]

I thought this rule is easy too, actually it only took about 30 mins to finish the first implementation, then I dig more and more deeper...