Jade if else shorthand to select checkbox - javascript

select.className(((#{obj.active} == 1) ? selected : disabled))
I don't know why this return me an error of Unexpected token =, for me the logic is fine. I must done something wrong somewhere.

You have two problems here:
You are trying to use interpolation inside an expression, which both isn't needed and doesn't work, and
The outputs of your ternary operator aren't quoted, which Jade/Pug will interpret as variables and not strings.
Note that this error message is caused by the first problem.
Here is the correct statement to use here:
select.className( obj.active == 1 ? 'selected' : 'disabled' )
If your obj.active variable is either 1 or 0 (or undefined) then consider simplifying it as the "truthiness" of a ternary operator will reject both 0 and undefined and resolve the second value:
select.className( obj.active ? 'selected' : 'disabled' )

Related

Can i use multiple line in ternary operator

I want to use the if else statement in the ternary operator
if (open) {
setOpen(false)
} else {
setOpen(true)
navigator.clipboard.writeText(link)
}
There is no problem in "if" I cant figuring out how to convert else to ternary. Like something the code below:
open ? setOpen(false) : setOpen(true) ; navigator.clipboard.writeText(link)
Something like this or is there another method to do the job?
Don't.
You're trying to use the ternary conditional operator for the wrong reason. It is not a drop-in replacement for any if block.
The ternary conditional operator is an expression. It resolves to a value, which can be used elsewhere. For example:
let x = someCondition ? 1 : 0;
The expression resolves to a value, either 1 or 0, and that value is used in an assignment statement.
The code you're showing is not an expression. What you have is a series of statements, conditionally executed based on some value. An if block is a structure for conditionally executing statements.
The code you have now is correct.
Yes, it's possible to write multiple statements in ternary if else cases:
The format is:
condition ? codeLine1 : ( codeLine2 , codeLine3 )
Which makes your statement as:
open ? setOpen(false) : (setOpen(true), navigator.clipboard.writeText(link));
Combine multiple statements in parenthesis separated by commas in between each line.
That being said it's recommended to use old fashioned way of if-else statement if multiple statements are involved.
Please select answer if it helps and let me know if any questions.
Yes. it is possible (although not a best practice and not recommended)
they way to to it is by:
Put everything inside parenthesis
Seperate each statement with comma (",")
e.g:
condition ? statement1 : ( statement2, statement3, statement4 )
Try this snippet:
let a = 1;
let b = 1;
a == b ?
(console.log("they"),console.log("are"), console.log("equal")) :
(console.log("they're"), console.log("not equal"));

sonarlint JavaScript warning: "Remove the unnecessary boolean literal"

Please note: as far as I'm aware this isn't a duplicate. There is some discussion about this warning in other languages but as we all know, == in JavaScript isn't like other languages.
The code reads:
let channelValue = filter == true ? 2 : 1;
SonarLint suggests "remove the unnecessary boolean literal, which tempts me to write:
let channelValue = filter ? 2 : 1;
but of course that will give a different result if filter has the value 87 or "Cheese on Toast". Is there a way to avoid the == true but retain the same semantics?
You should consider using === instead of == as the second one is not recommended and may behave unexpectedly. It also resolves sonarlint warning.
So you code should look like this:
let channelValue = filter === true ? 2 : 1;

ReactJs SyntaxError with ternary operator

Below code shows syntax error in ReactJs component:
(that.props.actionType == "opinion")
?
{that.state._CmtCnt?<ViewAnswer isFullView={that.props.isFullView?true:false} />:null}
:
{that.state._CmtCnt?<ViewComment isFullView={that.props.isFullView?true:false} />:null}
Basic Syntax is:
condition? expression1 : expression2
This is because you are using {} with expression1 and expression2, remove that, {} is required when we want to put JS expressions inside JSX. The way you are using, it means you are trying to return an object and error is because key is not valid.
Write it like this:
(that.props.actionType == "opinion") ?
(that.state._CmtCnt?<ViewAnswer isFullView={that.props.isFullView?true:false} />:null)
:
(that.state._CmtCnt?<ViewComment isFullView={that.props.isFullView?true:false} />:null)
You need to use normal parenthesis for grouping. Braces work only within jsx expressions.
that.props.actionType == "opinion"
? (that.state._CmtCnt ? <ViewAnswer isFullView={that.props.isFullView} /> : null)
// ^ ^
: (that.state._CmtCnt ? <ViewComment isFullView={that.props.isFullView} /> : null)
// ^ ^
You should write easier to understand code rather than complex nested terinary with little changes between them - all you choose is pick up a component to use, so move that up and you end up with easier to read code with less logic inside JSX
const Renderer = that.props.actionType == "opinion" ? ViewAnswer : ViewComment
// ...
{that.state._CmtCnt && <Renderer isFullView={!!that.props.isFullView} />}
// or
{that.state._CmtCnt ?
<Renderer isFullView={!!that.props.isFullView} /> :
null
}
not sure why you are using that either - aliases for context such as self or that are a bit out of date, you tend to want to keep context to your instances and bind correctly

Boolean value in javascript

Ok, I've got an issue I don't understand.
I have a boolean value which I test and if true I do something.
BUT javascript never go in it even if the var is true.
I try this :
if(isConfigD)
handleConfigurationD;
this :
if(isConfigD == true)
handleConfigurationD;
And this :
if(isConfigD === true)
handleConfigurationD;
But nothing work whereas isConfigD is always set on true :(
What am I missing ?
You condition works well, but if you call a function, then you need parenthesis for the call.
handleConfigurationD();
// ^^
handleConfigurationD is just an identifier. That statement is going to have one of two outcomes:
A ReferenceError
"Yup, that's a bit of data"
Presumably you have stored a function in it and want to call the function.
handleConfigurationD();

button.js in ternary operator code

I was just looking up the code in button.js and I saw this ternary operator that's hard to decode. Basically I am talking about the below line of code:
$el[val](data[state] == null ? this.options[state] : data[state])
I understand the below part:
data[state] == null ? this.options[state] : data[state]
But what is this:
$el[val]
I am having a problem understanding this javascript syntax, can somebody decode the complexity and explain this to me please. I ran through the code a few times, but still couldn't quite understand.
You can check out the plugin on GitHub too, here's the link : link (line 40)
On line 31, you can see this line
var val = $el.is('input') ? 'val' : 'html'
val and html functions of jQuery object. So, $el[val] returns a function reference of either val or html, which is called by passing the result of
data[state] == null ? this.options[state] : data[state]
To be more clear,
var func = $el[val]; // function reference is gotten
func(data[state] == null ? this.options[state] : data[state]); // invocation
The above is just to show how it works. In real time it would break, as context of $el is missing.

Categories

Resources