Let me ask you: What do you think this code does?
resizeImage(imagePath, 300, 200, true, true, 1)
It resizes image... but what exactly does it do? For the most part, we cannot tell without looking up the function definition.
Let's say you are reviewing a PR and it includes this change:
-resizeImage(imagePath, 300, 200, true, true, 1)
+resizeImage(imagePath, 300, 200, false, true, 1)
Can you confidently say what is the impact of this change? For the most part... no. You need to know what each positional argument does.
Let's say you know that the interface is:
function resizeImage(
imagePath: string,
width: number,
height: number,
upscale: boolean,
crop: boolean,
quality: number,
): Promise<Buffer>
But now a PR introduces a change to the parameter order (e.g. to make it consistent with other functions):
function resizeImage(
imagePath: string,
width: number,
height: number,
+ crop: boolean,
upscale: boolean,
- crop: boolean,
quality: number,
): Promise<Buffer>
How do you review this change? Sure, reviewing the interface diff is easy, but what about the dozens or hundreds of diffs that update function invocation?
-resizeImage(imagePath, 300, 200, true, false, 1)
+resizeImage(imagePath, 300, 200, false, true, 1)
resizeImage(imagePath, 300, 200, false, false, 1)
-resizeImage(imagePath, 300, 200, false, true, 1)
+resizeImage(imagePath, 300, 200, false, false, 1)
-resizeImage(imagePath, 300, 200, true, false, 1)
+resizeImage(imagePath, 300, 200, false, true, 1)
Hopefully the problem is self-explanatory: Positional arguments create a breading ground for hard and even impossible bugs to catch/debug/fix, esp. when code needs to be refactored. Fear not though as there is a better way.
Let's start from the start, but this time use a single-object parameter:
resizeImage({
imagePath,
width: 300,
height: 200,
upscale: true,
crop: false,
quality: 1,
})
Can you tell what is the intention behind this code? Yes, you can get a good sense, even if you are not familiar with the implementation.
Can you easily refactor the interface? Yes, linter will warn you if contract is not satisfied.
We end up with positional arguments because they feel the most natural to start with. However, as functions grow in scope, what started as a simple function with 1-2 arguments becomes an unreadable mess.
This is where max-params
comes to the rescue. Simply adding an ESLint rule that restricts having functions with more than X parameters ensures that your code remains legible and easy to refactor as your codebase scales.
Top comments (8)
3 params makes me uncomfortable, 4 makes me crazy 😆
@gajus totally agree! To the point that I've a plugin that takes limiting function parameters and arguments to the next level! 😊
Wanna give it a try? Check it out 👇
Limit the number of function parameters and arguments with ease and flexibility!
I would be thrilled to get feedback from you or answer any questions you might have about it 🙂
That's awesome, make me wanna digging the ESlint document!
25 arguments is the current record I've used in production. You can hear that ESLint rule screaming from the moon...
Next Todo for all my older projects and packages: reduce all functions to single parameter
Thanks for sharing.
Thank you for sharing!
Thanks for sharing 🤍