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.
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.
Any help is much appreciated
javascript ecmascript-5
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
16 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.
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.
Any help is much appreciated
javascript ecmascript-5
javascript ecmascript-5
edited 10 mins ago
adiga
7,96962141
7,96962141
asked 26 mins ago
Apurva PathakApurva Pathak
1049
1049
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
16 mins ago
add a comment |
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
16 mins ago
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
16 mins ago
Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015
– adiga
16 mins ago
add a comment |
4 Answers
4
active
oldest
votes
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 |
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 |
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.
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
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 16 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 18 mins ago
Alex ParkAlex Park
312
312
add a comment |
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
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 12 mins ago
answered 19 mins ago
Vishal RajoleVishal Rajole
786715
786715
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.
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.
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.
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.
answered 5 mins ago
Dhananjai PaiDhananjai Pai
831113
831113
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
16 mins ago