Back to Biomejs

noParameterAssign

src/content/docs/linter/rules/no-parameter-assign.mdx

latest12.7 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/style/noParameterAssign`](/reference/diagnostics#diagnostic-category) - This rule isn't recommended, so you need to enable it. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - Sources: - Same as [`no-param-reassign`](https://eslint.org/docs/latest/rules/no-param-reassign)

How to configure

json
{
	"linter": {
		"rules": {
			"style": {
				"noParameterAssign": "error"
			}
		}
	}
}

Description

Disallow reassigning function parameters.

Assignment to function parameters can be misleading and confusing, as modifying parameters will also mutate the arguments object. It is often unintended and indicative of a programmer error.

Examples

Invalid

js
function f(param) {
    param = 13;
}
<pre class="language-text"><code class="language-text">code-block.js:2:5 <a href="https://biomejs.dev/linter/rules/no-parameter-assign">lint/style/noParameterAssign</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Assigning a </span><span style="color: Orange;"><strong>function parameter</strong></span><span style="color: Orange;"> is confusing.</span> <strong>1 │ </strong>function f(param) &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> param = 13; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125; <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The </span><span style="color: lightgreen;"><strong>parameter</strong></span><span style="color: lightgreen;"> is declared here:</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>function f(param) &#123; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> param = 13; <strong>3 │ </strong>&#125; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Developers usually expect function parameters to be readonly. To align with this expectation, use a local variable instead.</span> </code></pre>
js
function f(param) {
    param++;
}
<pre class="language-text"><code class="language-text">code-block.js:2:5 <a href="https://biomejs.dev/linter/rules/no-parameter-assign">lint/style/noParameterAssign</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Assigning a </span><span style="color: Orange;"><strong>function parameter</strong></span><span style="color: Orange;"> is confusing.</span> <strong>1 │ </strong>function f(param) &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> param++; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125; <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The </span><span style="color: lightgreen;"><strong>parameter</strong></span><span style="color: lightgreen;"> is declared here:</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>function f(param) &#123; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> param++; <strong>3 │ </strong>&#125; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Developers usually expect function parameters to be readonly. To align with this expectation, use a local variable instead.</span> </code></pre>
js
function f(param) {
    for (param of arr) {}
}
<pre class="language-text"><code class="language-text">code-block.js:2:10 <a href="https://biomejs.dev/linter/rules/no-parameter-assign">lint/style/noParameterAssign</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Assigning a </span><span style="color: Orange;"><strong>function parameter</strong></span><span style="color: Orange;"> is confusing.</span> <strong>1 │ </strong>function f(param) &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> for (param of arr) &#123;&#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125; <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The </span><span style="color: lightgreen;"><strong>parameter</strong></span><span style="color: lightgreen;"> is declared here:</span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>function f(param) &#123; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> for (param of arr) &#123;&#125; <strong>3 │ </strong>&#125; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Developers usually expect function parameters to be readonly. To align with this expectation, use a local variable instead.</span> </code></pre>
ts
class C {
    constructor(readonly prop: number) {
        prop++;
    }
}
<pre class="language-text"><code class="language-text">code-block.ts:3:9 <a href="https://biomejs.dev/linter/rules/no-parameter-assign">lint/style/noParameterAssign</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Assigning a </span><span style="color: Orange;"><strong>function parameter</strong></span><span style="color: Orange;"> is confusing.</span> <strong>1 │ </strong>class C &#123; <strong>2 │ </strong> constructor(readonly prop: number) &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>3 │ </strong> prop++; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>4 │ </strong> &#125; <strong>5 │ </strong>&#125; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">The </span><span style="color: lightgreen;"><strong>parameter</strong></span><span style="color: lightgreen;"> is declared here:</span> <strong>1 │ </strong>class C &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> constructor(readonly prop: number) &#123; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong> prop++; <strong>4 │ </strong> &#125; <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Developers usually expect function parameters to be readonly. To align with this expectation, use a local variable instead.</span> </code></pre>

Valid

js
function f(param) {
    let local = param;
}

Options

propertyAssignment

The noParameterAssign rule can be configured using the propertyAssignment option, which determines whether property assignments on function parameters are allowed or denied. By default, propertyAssignment is set to allow.

json
{
    "options": {
        "propertyAssignment": "allow"
    }
}
  • allow: Allows property assignments on function parameters. This is the default behavior.
    • Example:
json
{
	"linter": {
		"rules": {
			"style": {
				"noParameterAssign": {
					"options": {
						"propertyAssignment": "allow"
					}
				}
			}
		}
	}
}

js
function update(obj) {
    obj.key = "value"; // No diagnostic
}
  • deny: Disallows property assignments on function parameters, enforcing stricter immutability.
    • Example:
json
{
	"linter": {
		"rules": {
			"style": {
				"noParameterAssign": {
					"options": {
						"propertyAssignment": "deny"
					}
				}
			}
		}
	}
}

js
function update(obj) {
    obj.key = "value"; // Diagnostic: Assignment to a property of function parameter is not allowed.
}
<pre class="language-text"><code class="language-text">code-block.js:2:5 <a href="https://biomejs.dev/linter/rules/no-parameter-assign">lint/style/noParameterAssign</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: Orange;">⚠</span></strong> <span style="color: Orange;">Assigning to a </span><span style="color: Orange;"><strong>property of a function parameter</strong></span><span style="color: Orange;"> is confusing.</span> <strong>1 │ </strong>function update(obj) &#123; <strong><span style="color: Tomato;">&gt;</span></strong> <strong>2 │ </strong> obj.key = &quot;value&quot;; // Diagnostic: Assignment to a property of function parameter is not allowed. <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>3 │ </strong>&#125; <strong>4 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Function callers usually don't expect the parameters they pass in to be modified. To avoid mutation, create a new instance and return it to the caller.</span> </code></pre> </TabItem> </Tabs>