What is the obj?.prop syntax in javascript?












7















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










share|improve this question

























  • Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015

    – adiga
    40 mins ago
















7















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










share|improve this question

























  • Possible duplicate of Null-safe property access (and conditional assignment) in ES6/2015

    – adiga
    40 mins ago














7












7








7


0






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










share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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



















  • 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












4 Answers
4






active

oldest

votes


















4














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






share|improve this answer

































    4














    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





    share|improve this answer































      3














      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.






      share|improve this answer































        -1














        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?






        share|improve this answer

























          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
          });


          }
          });














          draft saved

          draft discarded


















          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









          4














          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






          share|improve this answer






























            4














            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






            share|improve this answer




























              4












              4








              4







              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






              share|improve this answer















              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







              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited 36 mins ago

























              answered 43 mins ago









              Vishal RajoleVishal Rajole

              821715




              821715

























                  4














                  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





                  share|improve this answer




























                    4














                    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





                    share|improve this answer


























                      4












                      4








                      4







                      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





                      share|improve this answer













                      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






                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered 40 mins ago









                      CertainPerformanceCertainPerformance

                      84.3k154169




                      84.3k154169























                          3














                          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.






                          share|improve this answer




























                            3














                            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.






                            share|improve this answer


























                              3












                              3








                              3







                              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.






                              share|improve this answer













                              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.







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered 42 mins ago









                              Alex ParkAlex Park

                              412




                              412























                                  -1














                                  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?






                                  share|improve this answer






























                                    -1














                                    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?






                                    share|improve this answer




























                                      -1












                                      -1








                                      -1







                                      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?






                                      share|improve this answer















                                      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?







                                      share|improve this answer














                                      share|improve this answer



                                      share|improve this answer








                                      edited 14 mins ago

























                                      answered 28 mins ago









                                      Dhananjai PaiDhananjai Pai

                                      829113




                                      829113






























                                          draft saved

                                          draft discarded




















































                                          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.




                                          draft saved


                                          draft discarded














                                          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





















































                                          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







                                          Popular posts from this blog

                                          A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

                                          Calculate evaluation metrics using cross_val_predict sklearn

                                          Insert data from modal to MySQL (multiple modal on website)