What is the obj?.prop syntax in javascript?
I was looking through a code and I came across this:
{{abc?.xvy=== tyu?abc?.xz:abc?.xz}}
I am unable to understand meaning of this expression. I know that it is Null-safe property access but I am bit confused about the chaining.
Any help is much appreciated
javascript ecmascript-5
add a comment |
I was looking through a code and I came across this:
{{abc?.xvy=== tyu?abc?.xz:abc?.xz}}
I am unable to understand meaning of this expression. I know that it is Null-safe property access but I am bit confused about the chaining.
Any help is much appreciated
javascript ecmascript-5
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
40 mins ago
add a comment |
I was looking through a code and I came across this:
{{abc?.xvy=== tyu?abc?.xz:abc?.xz}}
I am unable to understand meaning of this expression. I know that it is Null-safe property access but I am bit confused about the chaining.
Any help is much appreciated
javascript ecmascript-5
I was looking through a code and I came across this:
{{abc?.xvy=== tyu?abc?.xz:abc?.xz}}
I am unable to understand meaning of this expression. I know that it is Null-safe property access but I am bit confused about the chaining.
Any help is much appreciated
javascript ecmascript-5
javascript ecmascript-5
edited 2 mins ago
Apurva Pathak
asked 50 mins ago
Apurva PathakApurva Pathak
1069
1069
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
40 mins ago
add a comment |
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
40 mins ago
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
40 mins ago
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
40 mins ago
add a comment |
4 Answers
4
active
oldest
votes
Its new ES proposal called "optionals" for safe check reading for object properties. Above expression is equivalent to:
(abc && abc.xvy) === (tyu) ? (abc && xz) : (abc && abc.xz)
You can find more details here: https://github.com/davidyaha/ecmascript-optionals-proposal
add a comment |
This looks to be an example of the optional chaining proposal, which is still very much a work in progress (only at Stage 1). It's not actually implemented in vanilla JS environments yet. Using
obj?.prop
means: if obj
is undefined or null, the expression evaluates to undefined
. But otherwise, it will evaluate to the prop
property on the object. This is syntax sugar for
obj && obj.prop
(using just obj.prop
alone will throw if obj
is undefined or null)
So, your
abc?.xvy=== tyu?abc?.xz:abc?.xz
will evaluate to true
if the nested value abc?.xvy
is equal to the nested value abc?.xz
- or, it will evaluate to true
if at least one of the nested values doesn't exist, and the other is undefined
.
Spaced out for easier reading:
abc?.xvy === tyu
? abc?.xz
: abc?.xz
As you can see, both ?
and :
expressions are the same, making the conditional operator unnecessary here. An equivalent test (assuming that referencing tyu
doesn't throw) would be
abc?.xvy === abc?.xz
add a comment |
It's called Null Propagation Operator.
We can think of each ?. operator as a short circuit where "if the expression up until this point is null or undefined, then the whole expression evaluates to undefined".
We could also optionally call functions.
add a comment |
It is called the elvis operator
It is a part of the ECMAScript proposals to make code more readable and reduce the long && chains
essentially, it creates a short-circuit check for null or undefined and prevents the "Cannot read property of undefined"
errors. If the value exists, the latter part is evaluated.
You can read more here : Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54528778%2fwhat-is-the-obj-prop-syntax-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
Its new ES proposal called "optionals" for safe check reading for object properties. Above expression is equivalent to:
(abc && abc.xvy) === (tyu) ? (abc && xz) : (abc && abc.xz)
You can find more details here: https://github.com/davidyaha/ecmascript-optionals-proposal
add a comment |
Its new ES proposal called "optionals" for safe check reading for object properties. Above expression is equivalent to:
(abc && abc.xvy) === (tyu) ? (abc && xz) : (abc && abc.xz)
You can find more details here: https://github.com/davidyaha/ecmascript-optionals-proposal
add a comment |
Its new ES proposal called "optionals" for safe check reading for object properties. Above expression is equivalent to:
(abc && abc.xvy) === (tyu) ? (abc && xz) : (abc && abc.xz)
You can find more details here: https://github.com/davidyaha/ecmascript-optionals-proposal
Its new ES proposal called "optionals" for safe check reading for object properties. Above expression is equivalent to:
(abc && abc.xvy) === (tyu) ? (abc && xz) : (abc && abc.xz)
You can find more details here: https://github.com/davidyaha/ecmascript-optionals-proposal
edited 36 mins ago
answered 43 mins ago
Vishal RajoleVishal Rajole
821715
821715
add a comment |
add a comment |
This looks to be an example of the optional chaining proposal, which is still very much a work in progress (only at Stage 1). It's not actually implemented in vanilla JS environments yet. Using
obj?.prop
means: if obj
is undefined or null, the expression evaluates to undefined
. But otherwise, it will evaluate to the prop
property on the object. This is syntax sugar for
obj && obj.prop
(using just obj.prop
alone will throw if obj
is undefined or null)
So, your
abc?.xvy=== tyu?abc?.xz:abc?.xz
will evaluate to true
if the nested value abc?.xvy
is equal to the nested value abc?.xz
- or, it will evaluate to true
if at least one of the nested values doesn't exist, and the other is undefined
.
Spaced out for easier reading:
abc?.xvy === tyu
? abc?.xz
: abc?.xz
As you can see, both ?
and :
expressions are the same, making the conditional operator unnecessary here. An equivalent test (assuming that referencing tyu
doesn't throw) would be
abc?.xvy === abc?.xz
add a comment |
This looks to be an example of the optional chaining proposal, which is still very much a work in progress (only at Stage 1). It's not actually implemented in vanilla JS environments yet. Using
obj?.prop
means: if obj
is undefined or null, the expression evaluates to undefined
. But otherwise, it will evaluate to the prop
property on the object. This is syntax sugar for
obj && obj.prop
(using just obj.prop
alone will throw if obj
is undefined or null)
So, your
abc?.xvy=== tyu?abc?.xz:abc?.xz
will evaluate to true
if the nested value abc?.xvy
is equal to the nested value abc?.xz
- or, it will evaluate to true
if at least one of the nested values doesn't exist, and the other is undefined
.
Spaced out for easier reading:
abc?.xvy === tyu
? abc?.xz
: abc?.xz
As you can see, both ?
and :
expressions are the same, making the conditional operator unnecessary here. An equivalent test (assuming that referencing tyu
doesn't throw) would be
abc?.xvy === abc?.xz
add a comment |
This looks to be an example of the optional chaining proposal, which is still very much a work in progress (only at Stage 1). It's not actually implemented in vanilla JS environments yet. Using
obj?.prop
means: if obj
is undefined or null, the expression evaluates to undefined
. But otherwise, it will evaluate to the prop
property on the object. This is syntax sugar for
obj && obj.prop
(using just obj.prop
alone will throw if obj
is undefined or null)
So, your
abc?.xvy=== tyu?abc?.xz:abc?.xz
will evaluate to true
if the nested value abc?.xvy
is equal to the nested value abc?.xz
- or, it will evaluate to true
if at least one of the nested values doesn't exist, and the other is undefined
.
Spaced out for easier reading:
abc?.xvy === tyu
? abc?.xz
: abc?.xz
As you can see, both ?
and :
expressions are the same, making the conditional operator unnecessary here. An equivalent test (assuming that referencing tyu
doesn't throw) would be
abc?.xvy === abc?.xz
This looks to be an example of the optional chaining proposal, which is still very much a work in progress (only at Stage 1). It's not actually implemented in vanilla JS environments yet. Using
obj?.prop
means: if obj
is undefined or null, the expression evaluates to undefined
. But otherwise, it will evaluate to the prop
property on the object. This is syntax sugar for
obj && obj.prop
(using just obj.prop
alone will throw if obj
is undefined or null)
So, your
abc?.xvy=== tyu?abc?.xz:abc?.xz
will evaluate to true
if the nested value abc?.xvy
is equal to the nested value abc?.xz
- or, it will evaluate to true
if at least one of the nested values doesn't exist, and the other is undefined
.
Spaced out for easier reading:
abc?.xvy === tyu
? abc?.xz
: abc?.xz
As you can see, both ?
and :
expressions are the same, making the conditional operator unnecessary here. An equivalent test (assuming that referencing tyu
doesn't throw) would be
abc?.xvy === abc?.xz
answered 40 mins ago
CertainPerformanceCertainPerformance
84.3k154169
84.3k154169
add a comment |
add a comment |
It's called Null Propagation Operator.
We can think of each ?. operator as a short circuit where "if the expression up until this point is null or undefined, then the whole expression evaluates to undefined".
We could also optionally call functions.
add a comment |
It's called Null Propagation Operator.
We can think of each ?. operator as a short circuit where "if the expression up until this point is null or undefined, then the whole expression evaluates to undefined".
We could also optionally call functions.
add a comment |
It's called Null Propagation Operator.
We can think of each ?. operator as a short circuit where "if the expression up until this point is null or undefined, then the whole expression evaluates to undefined".
We could also optionally call functions.
It's called Null Propagation Operator.
We can think of each ?. operator as a short circuit where "if the expression up until this point is null or undefined, then the whole expression evaluates to undefined".
We could also optionally call functions.
answered 42 mins ago
Alex ParkAlex Park
412
412
add a comment |
add a comment |
It is called the elvis operator
It is a part of the ECMAScript proposals to make code more readable and reduce the long && chains
essentially, it creates a short-circuit check for null or undefined and prevents the "Cannot read property of undefined"
errors. If the value exists, the latter part is evaluated.
You can read more here : Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
add a comment |
It is called the elvis operator
It is a part of the ECMAScript proposals to make code more readable and reduce the long && chains
essentially, it creates a short-circuit check for null or undefined and prevents the "Cannot read property of undefined"
errors. If the value exists, the latter part is evaluated.
You can read more here : Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
add a comment |
It is called the elvis operator
It is a part of the ECMAScript proposals to make code more readable and reduce the long && chains
essentially, it creates a short-circuit check for null or undefined and prevents the "Cannot read property of undefined"
errors. If the value exists, the latter part is evaluated.
You can read more here : Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
It is called the elvis operator
It is a part of the ECMAScript proposals to make code more readable and reduce the long && chains
essentially, it creates a short-circuit check for null or undefined and prevents the "Cannot read property of undefined"
errors. If the value exists, the latter part is evaluated.
You can read more here : Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
edited 14 mins ago
answered 28 mins ago
Dhananjai PaiDhananjai Pai
829113
829113
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54528778%2fwhat-is-the-obj-prop-syntax-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
40 mins ago