return statement should not contain assignment 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

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

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)

禁止在返回语句中赋值 (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:

在 JavaScript 中一个有趣有时有令人感到困惑的是几乎可以在任何位置进行赋值操作。正因为如此，本想进行比较操作，结果由于手误，变成了赋值操作。这种情况常见于 return 语句。例如：

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.

在这个例子中，很难断定 return 语句的意图。很有可能这个函数是为了返回 bar + 2 ，但是如果是这样的话，为什么赋值给 foo 呢？也很有可能使用比较运算符比如 == ，如果是这样的话代码是错误的。

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

正是由于这种模棱两可，在 return 语句中不使用赋值，被认为是一个最佳实践。

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 .

此规则目的在于移除 return 语句中的赋值语句。因此，当在 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.
• except-parens （默认）：禁止出现赋值语句，除非使用括号把它们括起来。
• always : Disallow all assignments.
• always ：禁止所有赋值

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:

默认选项 "except-parens" 的 错误 代码示例：

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

默认选项 "except-parens" 的 正确 代码示例：

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

此选项禁止 return 中所有的赋值。所有的赋值均被认为是有问题的。

Examples of incorrect code for the "always" option:

选项 "always" 的 错误 代码示例：

Examples of correct code for the "always" option:

选项 "always" 的 正确 代码示例：

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.

如果你想允许 return 语句中赋值操作符的使用，你可以关闭此规则。

This rule was introduced in ESLint 0.0.9.

该规则在 ESLint 0.0.9 中被引入。

• Rule source
• Documentation source

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

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

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

コードの読みやすさを向上させる！ ESLint ルール no-return-assign の徹底解説

Eslint ルール no-return-assign の解説.

no-return-assign ルールは、ESLint の設定ファイル .eslintrc.json で有効にすることができます。

この設定により、return 文の中で変数への代入が行われると、ESLint からエラーが出力されます。

以下のコードは、 no-return-assign ルールによってエラーが発生します。

このコードは、 x に 1 を代入した後、 return 文で x に 2 を代入しています。 no-return-assign ルールは、return 文の中で変数への代入を行うことを禁止しているため、このコードはエラーとなります。

no-return-assign ルールは、以下の場合に誤検知が発生する可能性があります。

• オブジェクトのプロパティへの代入
• テンプレートリテラル内の変数への代入

これらの場合、誤検知を防ぐために、以下の方法を使用できます。

• オブジェクトリテラルや配列リテラルを括弧で囲む
• テンプレートリテラル内の変数をバッククォートで囲む

以下のコードは、誤検知を防ぐために修正されています。

no-return-assign ルールによってエラーが発生した場合、以下のメッセージが表示されます。

このメッセージは、return 文の中で変数への代入が行われていることを示しています。エラーを修正するには、以下の方法を使用できます。

• 変数への代入を return 文の外側で行う

no-return-assign ルールは、コードの品質を向上させるために役立ちます。ただし、誤検知が発生する可能性があるため、注意が必要です。

return ステートメントで代入演算子を禁止する

JavaScript の興味深い、そして時には混乱を招く側面の 1 つは、割り当てがほぼどの時点でも発生する可能性があることです。このため、 true の目的が比較を行うときに、誤った等号が割り当てを引き起こす可能性があります。これは、特に return ステートメントを使用する場合の true です。例えば：

ここで return ステートメントの意図を伝えるのは困難です。この関数は bar + 2 の結果を返すことを意図している可能性がありますが、ではなぜ foo に代入するのでしょうか? == などの比較演算子を使用することが目的であり、このコードがエラーである可能性もあります。

このあいまいさのため、 return ステートメントでは代入を使用しないことがベスト プラクティスと考えられています。

Rule Details

このルールは、 return ステートメントから代入を排除することを目的としています。そのため、 return の一部として割り当てが見つかると警告が表示されます。

このルールは 1 つのオプション (文字列) を取り、次のいずれかの値を含める必要があります。

• except-parens (デフォルト): 括弧で囲まれていない限り、割り当てを禁止します。
• always : すべての割り当てを禁止します。

except-parens

これはデフォルトのオプションです。括弧で囲まない限り、代入は許可されません。

デフォルトの "except-parens" オプションの間違ったコードの例:

デフォルトの "except-parens" オプションの正しいコードの例:

このオプションは、 return ステートメント内のすべての代入を禁止します。すべての課題は問題として扱われます。

"always" オプションの間違ったコードの例:

"always" オプションの正しいコードの例:

return ステートメントで代入演算子の使用を許可する場合は、このルールを安全に無効にすることができます。

このルールは 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

private なクラスメンバーを使い忘れた？no-unused-private-class-members ルールで警告

no-unused-private-class-members ルールは、使用されていない private なクラスメンバー (フィールド、メソッド、アクセッサー) を検出し、警告またはエラーとして報告します。このルールは、コードの無駄を削減し、コードの読みやすさを向上させるのに役立ちます。

• ESLint ルール "capitalized-comments" の詳細ガイド：使い方、サンプルコード、注意点
• ESLint no-redeclare ルール徹底解説：変数宣言の落とし穴を回避してコードの読みやすさを向上させる
• ワンランク上のJavaScriptコードへ！ESLint no-regex-spaces ルールで正規表現をスッキリさせよう

ESLint no-multi-assign ルール：コードの読みやすさを向上させるためのベストプラクティス

コードの読みやすさを向上させる！ ESLint ルール "no-plusplus" の使い方

No-octal-escape ルールによるエラーメッセージとその解決方法.

ProgrammerAH

Programmer guide, tips and tutorial, arrow function should not return assignment no-return-assign.

Arrow function should not return assignment no return assignment.

This paper describes the problems encountered in learning p221 of the latest Vue and vuejs in 2019, from introduction to mastery. Because the checking code of eslint is referenced, the checking error is reported. There is no problem with the code, it is the problem of eslint checking. Solutions: 1. Remove eslint 2. Modify the code to conform to eslint original code

Changed code

After learning the arrow function, we can know that the {} added can be omitted, but the rule of eslint requires this.

• Under the “return-d” mode, the number of “return / return” is 1
• Solve the problem of flag error valueerror: View function did not return a response
• error: ‘::main’ must return ‘int’
• C++ —Return multiple values of different types
• Python TypeError: return arrays must be of ArrayType
• Error executing Aidl: return code 1
• Vs + CUDA compilation error: msb3721, return code 255
• Waitpid call return error prompt: no child processes problem
• How Notepad + + displays all characters (for hidden carriage return spaces)
• [Android test] solution for error closed after the carriage return of the ADB shell
• error Expected an assignment or function call and instead saw an expression
• To solve the problem, start eclipse and return exit code = 13
• [Solved] hiveonspark:Execution Error, return code 30041 from org.apache.hadoop.hive.ql.exec.spark.SparkTask
• An error is reported in the idea editor missing return statement
• Execution error, return code 1 from org.apache.hadoop . hive.ql.exec .DDLTask.
• Failed: execution error, return code 1 from org.apache.hadoop . hive.ql.exec .DDLTask…
• python reads csv file is an error _csv.Error: iterator should return strings, not bytes (did you open the file in text)
• [Transfer] mdt wds deployment windows Litetouch deployment failed, Return Code = -2147467259 0x80004005 solution…
• mdt wds deployment windows Litetouch deployment failed, Return Code = -2147467259 0x80004005
• FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(me