return statement should not contain assignment.eslint no return assign

• Arrow function should not return assignment. eslint no-return-assign

Last updated: Mar 7, 2024 Reading time · 4 min

# Table of Contents

• Split the assignment and return statement into 2 lines
• Solving the error in a React.js application
• Trying to return a comparison from a function
• Configuring the no-return-assign ESLint rule
• Disabling the no-return-assign ESLint rule globally
• Disabling the no-return-assign ESLint rule for a single line
• Disabling the no-return-assign ESLint rule for an entire file

# Arrow function should not return assignment. eslint no-return-assign

The ESLint error "Arrow function should not return assignment. eslint no-return-assign" is raised when you return an assignment from an arrow function.

To solve the error, wrap the assignment in curly braces, so it doesn't get returned from the arrow function.

• Return statement should not contain assignment. eslint no-return-assign

Here is an example of how the error occurs.

The issue in the example is that we're returning an assignment from an arrow function.

If you need to mutate a value that is located outside the function, use curly braces and then assign the value in the function's body.

The code sample above doesn't cause any warnings because the arrow function no longer returns the assignment.

Make sure you aren't returning an assignment explicitly as this also causes the error.

You can remove the return statement and assign the value to resolve the issue.

# Split the assignment and return statement into 2 lines

The error also occurs when you try to combine an assignment and a return statement into one.

To resolve the issue, assign a value to the variable on one line and use a return statement on the next.

The example above uses the Array.reduce method.

Notice that we first assign a value to the accumulator variable and then on the next line, return the variable.

Make sure you don't combine the two steps into a single line as it makes your code difficult to read.

# Solving the error in a React.js application

The error is often caused when using refs in older versions of React.js.

The following code causes the error.

To resolve the issue, wrap the assignment in curly braces, so it isn't returned from the arrow function.

Make sure you don't explicitly return the assignment as well.

# Trying to return a comparison from a function

If you meant to return a comparison from a function, use triple equals ( === ) and not a single equal sign.

Three equal signs === are used to compare values and a single equal = sign is used to assign a value to a variable.

# Configuring the no-return-assign ESLint rule

The no-return-assign ESLint rule has 2 values:

• except-parens (default) - disallow assignments unless they are enclosed in parentheses.
• always - disallow all assignments in return statements.

The following examples are all valid if you use the except-parens value.

If the rule's value is set to always , then you all assignments in return statements are disallowed.

# Disabling the no-return-assign ESLint rule globally

If you want to disable the no-return-assign ESLint rule globally, you have to edit your .eslintrc.js config file.

If you use a .eslintrc or .eslintrc.json file, make sure to double-quote all properties and values.

Make sure you don't have any trailing commas if you write your config in a JSON file.

# Disabling the no-return-assign ESLint rule for a single line

If you want to disable the no-return-assign rule for a single line, use the following comment.

Make sure to add the comment directly above the line that causes the warning.

# Disabling the no-return-assign ESLint rule for an entire file

If you want to disable the rule for an entire file, use the following comment instead.

Make sure to add the comment at the top of the file or at least above any functions that return assignments.

You can use the same approach to only disable the rule for a specific function.

The first ESLint comment disables the rule and the second comment enables it.

This is why the function on the last line causes the error - it is placed after the comment that enables the no-return-assign rule.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• React ESLint Error: X is missing in props validation
• eslint is not recognized as an internal or external command
• ESLint: Unexpected lexical declaration in case block [Fixed]
• ESLint error Unary operator '++' used no-plusplus [Solved]
• ESLint Prefer default export import/prefer-default-export
• Assignment to property of function parameter no-param-reassign
• Expected parentheses around arrow function argument arrow-parens
• ESLint: A form label must be associated with a control

Borislav Hadzhiev

Web Developer

Copyright © 2024 Borislav Hadzhiev

no-return-assign

Disallow assignment operators in return statements

One of the interesting, and sometimes confusing, aspects of JavaScript is that assignment can happen at almost any point. Because of this, an errant equals sign can end up causing assignment when the true intent was to do a comparison. This is especially true when using a return statement. For example:

It is difficult to tell the intent of the return statement here. It’s possible that the function is meant to return the result of bar + 2 , but then why is it assigning to foo ? It’s also possible that the intent was to use a comparison operator such as == and that this code is an error.

Because of this ambiguity, it’s considered a best practice to not use assignment in return statements.

Rule Details

This rule aims to eliminate assignments from return statements. As such, it will warn whenever an assignment is found as part of return .

The rule takes one option, a string, which must contain one of the following values:

• except-parens (default): Disallow assignments unless they are enclosed in parentheses.
• always : Disallow all assignments.

except-parens

This is the default option. It disallows assignments unless they are enclosed in parentheses.

Examples of incorrect code for the default "except-parens" option:

Examples of correct code for the default "except-parens" option:

This option disallows all assignments in return statements. All assignments are treated as problems.

Examples of incorrect code for the "always" option:

Examples of correct code for the "always" option:

When Not To Use It

If you want to allow the use of assignment operators in a return statement, then you can safely disable this rule.

This rule was introduced in ESLint v0.0.9.

• Rule source
• Tests source

© OpenJS Foundation and other contributors Licensed under the MIT License. https://eslint.org/docs/latest/rules/no-return-assign

Disallow Assignment in return Statement (no-return-assign)

One of the interesting, and sometimes confusing, aspects of JavaScript is that assignment can happen at almost any point. Because of this, an errant equals sign can end up causing assignment when the true intent was to do a comparison. This is especially true when using a return statement. For example:

It is difficult to tell the intent of the return statement here. It's possible that the function is meant to return the result of bar + 2 , but then why is it assigning to foo ? It's also possible that the intent was to use a comparison operator such as == and that this code is an error.

Because of this ambiguity, it's considered a best practice to not use assignment in return statements.

Rule Details

This rule aims to eliminate assignments from return statements. As such, it will warn whenever an assignment is found as part of return .

The rule takes one option, a string, which must contain one of the following values:

• except-parens (default): Disallow assignments unless they are enclosed in parentheses.
• always : Disallow all assignments.

except-parens

This is the default option. It disallows assignments unless they are enclosed in parentheses.

Examples of incorrect code for the default "except-parens" option:

Examples of correct code for the default "except-parens" option:

This option disallows all assignments in return statements. All assignments are treated as problems.

Examples of incorrect code for the "always" option:

Examples of correct code for the "always" option:

When Not To Use It

If you want to allow the use of assignment operators in a return statement, then you can safely disable this rule.

This rule was introduced in ESLint 0.0.9.

• Rule source
• Documentation source

© OpenJS Foundation and other contributors Licensed under the MIT License. https://eslint.org/docs/rules/no-return-assign

no-return-assign

Disallows assignment operators in return statements.

One of the interesting, and sometimes confusing, aspects of JavaScript is that assignment can happen at almost any point. Because of this, an errant equals sign can end up causing assignment when the true intent was to do a comparison. This is especially true when using a return statement. For example:

It is difficult to tell the intent of the return statement here. It's possible that the function is meant to return the result of bar + 2 , but then why is it assigning to foo ? It's also possible that the intent was to use a comparison operator such as == and that this code is an error.

Because of this ambiguity, it's considered a best practice to not use assignment in return statements.

Rule Details

This rule aims to eliminate assignments from return statements. As such, it will warn whenever an assignment is found as part of return .

The rule takes one option, a string, which must contain one of the following values:

• except-parens (default): Disallow assignments unless they are enclosed in parentheses.
• always : Disallow all assignments.

except-parens

This is the default option. It disallows assignments unless they are enclosed in parentheses.

Examples of incorrect code for the default "except-parens" option:

Examples of correct code for the default "except-parens" option:

This option disallows all assignments in return statements. All assignments are treated as problems.

Examples of incorrect code for the "always" option:

Examples of correct code for the "always" option:

When Not To Use It

If you want to allow the use of assignment operators in a return statement, then you can safely disable this rule.

This rule was introduced in ESLint 0.0.9.

• Rule source
• Test source
• Documentation source

• View all errors
• JSLint errors
• JSHint errors
• ESLint errors
• View all options
• JSLint options
• JSHint options
• ESLint options

Did you mean to return a conditional instead of an assignment?

When do i get this error.

The "Did you mean to return a conditional instead of an assignment?" error, and the alternative "Return statement should not contain assignment", is thrown when JSHint or ESLint encounters a return statement containing an assignment expression . In the following example we attempt to assign the result of an operation to result and also return the result of that assignment:

Since May 2013 JSLint has used the more generic " Unexpected assignment expression " warning in the same situation.

Why do I get this error?

This error is raised to highlight a lack of convention . Your code may run fine if you do not fix this error, but it will be confusing to others, especially at first glance to someone quickly searching through your script.

The above example works because the assignment expression, result = a * b , returns the resultant value of result . Since in a return statement the expression is evaluated and its result is returned from the function we end up with the value we expect. You can resolve this error by splitting the logic out into two distinct steps which makes the code much more readable:

If you didn't mean to return the result of an assignment and are receiving this error then the chances are you actually wanted to return a boolean value. This is why JSHint asks if you meant to return a conditional. If that's the case, make sure the expression is conditional by using === instead of = :

In JSHint 1.0.0 and above you have the ability to ignore any warning with a special option syntax . The identifier of this warning is W093 . This means you can tell JSHint to not issue this warning with the /*jshint -W093 */ directive.

In ESLint the rule that generates this warning is named no-return-assign . You can disable it by setting it to 0 , or enable it by setting it to 1 .

About the author

This article was written by Jonathan Klein, software engineer at Etsy, focusing on solving web performance and scalability challenges. He started and organizes the Boston Web Performance Meetup Group.

Follow me on Twitter  or  Google+

This project is supported by orangejellyfish , a London-based consultancy with a passion for JavaScript. All article content is available on GitHub under the Creative Commons Attribution-ShareAlike 3.0 Unported licence.

Have you found this site useful?

Please consider donating to help us continue writing and improving these articles.

Arrow function should not return assignment? – Javascript

Quick Fix: Enclose the assignment in curly braces to indicate that you are not returning the result, like: <div ref={(el) => }>

The Problem:

In the provided React code, the arrow function that is used as a callback for the ref prop is returning an assignment statement. The ESLint rule no-return-assign is flagging this as an error, as it considers assignment statements in arrow functions to be a potential source of confusion and bugs. The issue with this code is that it is assigning the value of the el parameter to the this.myCustomEl property, which is a potential source of confusion and can lead to unexpected behavior. How can this code be refactored to avoid returning an assignment statement and still achieve the same functionality?

The Solutions:

Solution 1: using curly brackets to enclose the assignment.

To prevent ESLint from raising a warning about returning an assignment, you can remove the return statement and enclose the assignment in curly brackets. This will cause the assignment to be evaluated but not returned, resolving the issue. Here’s the corrected code:

Alternatively, you can disable the ‘no-return-assign’ rule in your ESLint configuration to suppress the warning for this specific case.

Solution 2: Extracting the arrow function as a named method

To fix the linting error and improve the performance of your React component, you can extract the arrow function that sets the ref as a named method of the component. Here’s an example:

In this code, the getRef method is defined as a named function within the MyClass component. The render method then uses this.getRef as the ref callback, passing the element reference to the getRef method.

This approach addresses the linting error by explicitly returning the assignment, improves performance by avoiding anonymous function creation on every render, and maintains the desired functionality of setting the ref.

Solution 3: Use a Destructuring Assignment Statement in the Arrow Function

In this solution, we’ll use a destructuring assignment statement within the arrow function to assign the `this.leafletMap` property with the `m` argument.

Here, the arrow function takes one parameter, `m`, and uses the destructuring assignment operator (**{…m}**) to assign the `m` argument to the `this.leafletMap` property.

This approach is valid and accomplishes the same goal as the original code, but it is more concise and doesn’t require the use of `return`. Additionally, it avoids the eslint warning about returning assignments.

Solution 4: Place Arrow Function Body Inside Curly Braces

Eslint generates an error message if we do not use curly braces to enclose the arrow function body. This is because arrow functions are considered concise syntax for function expressions, and function expressions must have a body enclosed in curly braces.

By placing the arrow function body inside curly braces, we ensure that the function is syntactically correct and that Eslint will not generate any error messages. Additionally, using curly braces makes the code more readable and maintainable, especially when dealing with complex arrow functions.

How to load image files with webpack file-loader – Webpack

How can I find an element by class and get the value? – Jquery

© 2024 deycode.com

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arrow function should not return assignment #948

TaurusWood commented Nov 7, 2016

ljharb commented Nov 7, 2016

• 👍 2 reactions

Sorry, something went wrong.

hazratgs commented Jun 18, 2017

• 👍 36 reactions
• 👎 40 reactions
• 🎉 8 reactions
• ❤️ 3 reactions

ljharb commented Jun 18, 2017

• 👍 9 reactions

ljharb commented Jun 18, 2017 • edited

• 👍 1 reaction

chotalia commented Sep 15, 2017

• 👍 46 reactions
• 🎉 6 reactions
• 🚀 3 reactions

bimalgrg519 commented Nov 10, 2017

• 👍 51 reactions
• 🎉 15 reactions
• ❤️ 13 reactions
• 🚀 4 reactions

No branches or pull requests

Disallow Assignment in return Statement (no-return-assign)

One of the interesting, and sometimes confusing, aspects of JavaScript is that assignment can happen at almost any point. Because of this, an errant equals sign can end up causing assignment when the true intent was to do a comparison. This is especially true when using a return statement. For example:

It is difficult to tell the intent of the return statement here. It’s possible that the function is meant to return the result of bar + 2 , but then why is it assigning to foo ? It’s also possible that the intent was to use a comparison operator such as == and that this code is an error.

Because of this ambiguity, it’s considered a best practice to not use assignment in return statements.

Rule Details

This rule aims to eliminate assignments from return statements. As such, it will warn whenever an assignment is found as part of return .

The rule takes one option, a string, which must contain one of the following values:

• except-parens (default): Disallow assignments unless they are enclosed in parentheses.
• always : Disallow all assignments.

except-parens

This is the default option. It disallows assignments unless they are enclosed in parentheses.

Examples of incorrect code for the default "except-parens" option:

Examples of correct code for the default "except-parens" option:

This option disallows all assignments in return statements. All assignments are treated as problems.

Examples of incorrect code for the "always" option:

Examples of correct code for the "always" option:

When Not To Use It

If you want to allow the use of assignment operators in a return statement, then you can safely disable this rule.

This rule was introduced in ESLint 0.0.9.

• Rule source
• Documentation source

no-return-assign

Disallow assignment operators in return statements

JavaScript 的一个有趣的、有时令人困惑的方面是，赋值几乎可以发生在任何地方。正因为如此，一个错误的等号可能会导致赋值，而真正的意图是做一个比较。这在使用 return 语句时尤其如此。比如：

很难说清这里的 return 语句的意图是什么。有可能该函数的目的是返回 bar + 2 的结果，但为什么要将其赋值给 foo ？也有可能是为了使用一个比较运算符，如 == ，这段代码是一个错误。

由于这种模糊性，一般不在 return 语句中进行赋值。

这条规则的目的是消除 return 语句中的赋值。因此，只要发现有赋值作为 return 的一部分，它就会发出警告。

规则需要一个选项，即一个字符串，它必须包含以下值之一：

• except-parens （默认值）：不允许赋值，除非它们被括在括号内。
• always ：不允许所有的赋值。

except-parens

这是默认的选项。 它不允许赋值，除非它们被括在括号中。

使用默认的 "except-parens" 选项的 错误 示例：

使用默认的 "except-parens" 选项的 正确 示例：

这个选项不允许在 return 语句中进行任何赋值。 所有的赋值都被当作问题处理。

使用 "always" 选项的 错误 示例：

使用 "always" 选项的 正确 示例：

如果你想允许在 return 语句中使用赋值运算符，你可以安全地禁用此规则。

This rule was introduced in ESLint v0.0.9.

• Rule source
• Tests source

Disallow Assignment in return Statement (no-return-assign)

One of the interesting, and sometimes confusing, aspects of JavaScript is that assignment can happen at almost any point. Because of this, an errant equals sign can end up causing assignment when the true intent was to do a comparison. This is especially true when using a return statement. For example:

It is difficult to tell the intent of the return statement here. It’s possible that the function is meant to return the result of bar + 2 , but then why is it assigning to foo ? It’s also possible that the intent was to use a comparison operator such as == and that this code is an error.

Because of this ambiguity, it’s considered a best practice to not use assignment in return statements.

Rule Details

This rule aims to eliminate assignments from return statements. As such, it will warn whenever an assignment is found as part of return .

The rule takes one option, a string, which must contain one of the following values:

• except-parens (default): Disallow assignments unless they are enclosed in parentheses.
• always : Disallow all assignments.

“except-parens”

This is the default option. It disallows assignments unless they are enclosed in parentheses.

The following patterns are considered problems:

The following patterns are not considered problems:

This option disallows all assignments in return statements. All assignments are treated as problems.

When Not To Use It

If you want to allow the use of assignment operators in a return statement, then you can safely disable this rule.

This rule was introduced in ESLint 0.0.9.

• Rule source
• Documentation source