How to get rid of `no-unused-expressions` eslint error, for `&&` and `?:` usage?

Question

Problem statement:

this.componentC && this.componentC.render() // by default, this throws error , per no-unused-expressions eslint rule

Answer 1

&& is appropriate when you need to evaluate whether two expressions are truthy. If that isn't the situation - for example, if you need to test for expression1 's truthyness before evaluating some other expression (like a function call), then you should use if statements. To fix your original code:

if (this.componentC) this.componentC.render();

Linters warn about unused expressions because they're a code smell and are an indication that you're probably implementing something wrong, like here.

Similarly, with the conditional (ternary) operator, instead, if you have an unused expression:

someCondition
? someFn1()
: someFn2();

if you're not using the result of the expression, you should use if/else instead:

if (someCondition) someFn1();
else someFn2();

One of the main goals of programming should be to write clear, understandable code - don't shirk on code character count just for the heck of it, unless you're golfing .

Answer 2

Below is my recommendation:

Just add the below overrides entry to your .eslintrc.json/js

overrides: [{
        files: ["./src/*.js"],
        rules: {
            "no-unused-expressions": [{
                "allowShortCircuit": true,
                "allowTernary": true
            }]
        },
    }
],