This question already has answers here:
Optional Chaining in JavaScript [duplicate]
(8 answers)
Closed 2 years ago.
I met in code condition line like this someObject.arrParam?.length. What syntax is that? How does that question mark thing's called? I know an optional operator which used for parameters in functions. Is that a variation of usage of it? Never met before.
This is called Optional Chaining in JavaScript. It allows to drill
down on objects without raising null exception.
Eg: Try running the below code snippet, then uncomment the line and run it to understand a working example.
let employeeA ={ name: "Dane", address : { city:"London"}}
let employeeB ={ name: "John"}
console.log(employeeA.address.city)
// console.log(employeeB.address.city) <---- this will raise an error
console.log(employeeB.address?.city) // <--- this wont
This was introduced as new feature in the latest ESNext iterations.
NodeJS Support : https://node.green/#ES2020-features-optional-chaining-operator-----
Current Browser Support : https://caniuse.com/#feat=mdn-javascript_operators_optional_chaining
More Details here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
That is called Optional Chaining (or conditional chaining) which basically will evaluate the whole expression as undefined if arrParam is undefined or null.
It's called "Conditional (ternary) operator".
result=condition?ifTrue:ifFalse
In x=(y>10)?100:1, if y>10, x is set to 100, else, x is set to 1.
Equivalent to:
if(y>10) x=100;
else x= 1;
Related
This question already has answers here:
In Typescript, what is the ! (exclamation mark / bang) operator when dereferencing a member?
(5 answers)
Two sets of parentheses after function call
(4 answers)
Closed last month.
In Codemirror 6's documentation, and in the code line 41, ...
while (pending.length) pending.pop()!(data.updates)
What does this syntax mean?
Seems to be typescript specific.
What would be the javascript equivalent?
In TypeScript, the ! operator can also be used to assert that a value is non-nullable. This is called a non-null assertion operator, and it is used to tell the TypeScript compiler that a value is definitely not null or undefined. Check the documentation
The pop() method removes the last element from an array and returns that element. See the documentation.
Since the return value is a function, well you can call it.
This question already has answers here:
In Typescript, what is the ! (exclamation mark / bang) operator when dereferencing a member?
(5 answers)
Closed 7 months ago.
I've seen somewhere written in the code fixture.componentInstance.dataSource!.data = [];
I want to know the meaning of dataSource!.data
I know about the meaning of question mark(?) before dot(.) like key1?.key2 but an Exclamation(!) before dot(.) !. expression makes me curious.
Many thanks in advance!!
It's called the Non-null Assertion Operator
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-
It removes null and undefined, allowing you to assert that you know there will be a value. Usually this is a code smell, something that should give you pause to consider other methods so that you can avoid using it. Type narrowing would be preferred. But in some specific instances, this operator can be a useful tool.
This question already has answers here:
Location of parenthesis for auto-executing anonymous JavaScript functions?
(4 answers)
Closed 7 months ago.
I've inherited a project with some Java Script. I know nothing about js. There are some auto-build steps involved, the result of which is an anonymous function. The version is version control is different from the version I build, even though the environments were supposed to be the same.
One version is, void parameter list inside the evaluation brackets:
(function(){...}( ))
The other version is, void parameter list outside the evaluation brackets:
(function(){...} ) ( )
Are these two forms technically the same? Is one form technically an error? Is either form actually an error? Or what?
In this case, both are equivalent and valid.
Note that for the first option, when the outer parentheses are excluded, that will result in a SyntaxError
function(){...}() // error
(function(){...}()) // no error
(function(){...})() // no error
This question already has answers here:
Why does any JavaScript code want to "cut the binding"?
(1 answer)
JavaScript syntax (0, fn)(args)
(2 answers)
Closed 2 years ago.
var type = (0, _reactIs.isMemo)(nodeOrComponent) ? nodeOrComponent.type.type : nodeOrComponent.type;
(0, _reactIs.isMemo) really confuse me. What's the meaning of this?
ps: I know (0, _reactIs.isMemo) this expression's value is _reactIs.isMemo
The comma operator there ensures that what's inside the parentheses is evaluated as an expression without a calling context.
To take a shorter example, if the code was:
var type = obj.fn(someArg);
then fn would be called with a calling context of obj. But the original untranspiled code, whatever it is, does not have such a calling context, so in order to be faithful to the original code, the calling context has to be removed, which can be done with the comma operator:
var type = (0, obj.fn)(someArg);
Another way of doing the same thing would be:
var fn = obj.fn;
var type = fn(someArg);
(but that takes more characters, so minifiers prefer the comma operator version)
This is a silly-looking minification trick that's often seen with imported modules. Usually, you'd only be looking at the source code, which won't have this sillyness.
This question already has answers here:
ECMAScript 6 arrow function that returns an object
(6 answers)
Closed 3 years ago.
I am trying to do this :
setMyState(prevState=> {...prevState, name: e.nativeEvent.text });
While the console says src/components/addItem.js: Unexpected token
And it doesn't work :(
While using a js file .. I tried with .jsx too and same error :(.
Also I found an answer here WebStorm error: expression statement is not assignment or call
but it didn't solve my problem since when I run the app now it crashes exactly there ...
If you use an arrow function and want to return an object you need to wrap your object with (). If you don't use, arrow function thinks {} is the body block. So, try using:
setMyState(prevState=> ({...prevState, name: e.nativeEvent.text }));