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.
Related
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
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' )
In the Meteor Leaderboard example, there is the following line of Javascript code:
Session.equals("selectedPlayer", this._id) ? "selected" : '';
I know this is shorthand JavaScript, I believe for some sort of 'if' statement, but I can't remember exactly how it works. I was wondering if someone could provide an explanation of what exactly is going on here. Many thanks!
var x = conditionExpression ? trueExpression : falseExpression
// The above is equivalent to the one below.
if(conditionExpression){
var x = trueExpression
}else{
var x = falseExpression
}
the_styles ? the_styles.appendTo('head'); the_styles=null : the_styles = $('.stylesheet').detach();
Obviously, this isn't valid. Notice the ";" between the appendTo() and the_styles=null. How do I write it on 1 line and still have multiple expressions like that?
Use the comma operator this way:
the_styles ? (the_styles.appendTo('head'), the_styles=null) : the_styles = $('.stylesheet').detach();
Here's what the Mozilla Developer Center writes about the comma operator:
You can use the comma operator when you want to include multiple expressions in a location that requires a single expression. The most common usage of this operator is to supply multiple parameters in a for loop.
Read more here: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/Comma_Operator
Who needs the ternary operator?
the_styles = !the_styles && $('.stylesheet').detach() ||
the_styles.appendTo('head') && null;
Had to switch the expressions around as otherwise the null value of the first expression will always force the second expression .detach() to be evaluated.
The only thing about clever code is that once you come back to it after a coffee break, it won't make any sense even to you. So this is much better:
if(the_styles) {
the_styles.appendTo('head')
the_styles = null;
}
else {
the_styles = the_styles.detach('.stylesheet');
}
To me, even the above simplistic version doesn't make any sense. The what part is obvious, but why is it doing that?
the_styles ? (function() {the_styles.appendTo('head'); the_styles=null})() : <etc>
Just wrap the code block in (function() { and })().
Now for the hard part: why would you want to do this? Perhaps there's a better solution!
i agree with glowcoder but if you still want it:
the_styles ? function(){ the_styles.appendTo('head'); the_styles=null;}() : the_styles = $('.stylesheet').detach();
the_styles ? the_styles.appendTo('head') : the_styles = $('.stylesheet').detach();
you dont need to null it if your overwriting it !
the_styles=the_styles || $('.stylesheet').detach(); the_styles.appendTo('head');
Example:
function pcs()
{
var t1 = document.getElementById("tot1").value
var pb = document.getElementById("pcbox").value
var pc = ""
if (t1==! && pb==!)
{
document.getElementId("rbox").innerHTML = ""
}
}
My question is if t1 and pb are null the function pcs() is not called... Why?
The line
if(t1==! && pb==!)
is not legal syntax. If this is exactly how you have written the code it will not parse and thus the function will not be defined (plus you'll be getting Javascript errors).
Perhaps you meant
if(t1 != null && pb != null)
Additionally, while semicolons at the end of lines can be inferred by the interpreter, they are meant to be there (as opposed to being actually optional) and adding them is good practice.
EDIT and while I didn't understand your final question 100%, remember that the code you've written (assuming the syntax were correct) merely defines a function. You will need to have some other code call this function at an appropriate point in order to have it executed, e.g. for some element onblur = pcs();
The line if(t1==! && pb==!) is nonsense - did you mean if (!t1 && !pb)?
if(t1==! && pb==!) --> this is absolutly wrong.... What are you trying to check?
Maybe if(t1!="" && pb!="")?