I am having problem understanding the behavior of below code in JavaScript





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







7















I was playing with below javascript code. Understanding of Object.defineProperty() and I am facing a strange issue with it. When I try to execute below code in the browser or in the VS code the output is not as expected whereas if I try to debug the code the output is correct



When I debug the code and evaluate the profile I can see the name & age property in the object
But at the time of output, it only shows the name property






//Code Snippet 
let profile = {
name: 'Barry Allen',
}

// I added a new property in the profile object.
Object.defineProperty(profile, 'age', {
value: 23,
writable: true
})

console.log(profile)
console.log(profile.age)





Now expected output here should be



{name: "Barry Allen", age: 23}
23


but I get the output as.
Note that I am able to access the age property defined afterwards.
I am not sure why the console.log() is behaving this way.



{name: "Barry Allen"}
23









share|improve this question









New contributor




Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.



























    7















    I was playing with below javascript code. Understanding of Object.defineProperty() and I am facing a strange issue with it. When I try to execute below code in the browser or in the VS code the output is not as expected whereas if I try to debug the code the output is correct



    When I debug the code and evaluate the profile I can see the name & age property in the object
    But at the time of output, it only shows the name property






    //Code Snippet 
    let profile = {
    name: 'Barry Allen',
    }

    // I added a new property in the profile object.
    Object.defineProperty(profile, 'age', {
    value: 23,
    writable: true
    })

    console.log(profile)
    console.log(profile.age)





    Now expected output here should be



    {name: "Barry Allen", age: 23}
    23


    but I get the output as.
    Note that I am able to access the age property defined afterwards.
    I am not sure why the console.log() is behaving this way.



    {name: "Barry Allen"}
    23









    share|improve this question









    New contributor




    Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.























      7












      7








      7








      I was playing with below javascript code. Understanding of Object.defineProperty() and I am facing a strange issue with it. When I try to execute below code in the browser or in the VS code the output is not as expected whereas if I try to debug the code the output is correct



      When I debug the code and evaluate the profile I can see the name & age property in the object
      But at the time of output, it only shows the name property






      //Code Snippet 
      let profile = {
      name: 'Barry Allen',
      }

      // I added a new property in the profile object.
      Object.defineProperty(profile, 'age', {
      value: 23,
      writable: true
      })

      console.log(profile)
      console.log(profile.age)





      Now expected output here should be



      {name: "Barry Allen", age: 23}
      23


      but I get the output as.
      Note that I am able to access the age property defined afterwards.
      I am not sure why the console.log() is behaving this way.



      {name: "Barry Allen"}
      23









      share|improve this question









      New contributor




      Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.












      I was playing with below javascript code. Understanding of Object.defineProperty() and I am facing a strange issue with it. When I try to execute below code in the browser or in the VS code the output is not as expected whereas if I try to debug the code the output is correct



      When I debug the code and evaluate the profile I can see the name & age property in the object
      But at the time of output, it only shows the name property






      //Code Snippet 
      let profile = {
      name: 'Barry Allen',
      }

      // I added a new property in the profile object.
      Object.defineProperty(profile, 'age', {
      value: 23,
      writable: true
      })

      console.log(profile)
      console.log(profile.age)





      Now expected output here should be



      {name: "Barry Allen", age: 23}
      23


      but I get the output as.
      Note that I am able to access the age property defined afterwards.
      I am not sure why the console.log() is behaving this way.



      {name: "Barry Allen"}
      23





      //Code Snippet 
      let profile = {
      name: 'Barry Allen',
      }

      // I added a new property in the profile object.
      Object.defineProperty(profile, 'age', {
      value: 23,
      writable: true
      })

      console.log(profile)
      console.log(profile.age)





      //Code Snippet 
      let profile = {
      name: 'Barry Allen',
      }

      // I added a new property in the profile object.
      Object.defineProperty(profile, 'age', {
      value: 23,
      writable: true
      })

      console.log(profile)
      console.log(profile.age)






      javascript






      share|improve this question









      New contributor




      Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited 36 mins ago









      Eddie

      20.3k51642




      20.3k51642






      New contributor




      Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 38 mins ago









      Ravi WRavi W

      384




      384




      New contributor




      Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Ravi W is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.
























          3 Answers
          3






          active

          oldest

          votes


















          7














          You should set enumerable to true. In Object.defineProperty its false by default. According to MDN.




          enumerable

          true if and only if this property shows up during enumeration of the properties on the corresponding object.
          Defaults to false.




          Non-enumerable means that property will not be shown in Object.keys() or for..in loop neither in console






          let profile = {
          name: 'Barry Allen',
          }

          // I added a new property in the profile object.

          Object.defineProperty(profile , 'age', {
          value: 23,
          writable: true,
          enumerable: true
          })
          console.log(profile)
          console.log(profile.age)





          Example: All the properties and methods on prototype object of built-in classes are non-enumerable. Thats is the reason you can call them from instance but they don't appear while iterating.



          To get all properties(including non-enumerable)Object​.get​OwnProperty​Names()
          .






          share|improve this answer


























          • I didn't knew about this, but when I checked by running the local code in browser, it shows up perfectly (in spite of explicitly specifying enumerable to false).

            – randomSoul
            25 mins ago











          • @randomSoul I can't get what you mean.

            – Maheer Ali
            20 mins ago













          • See - pasteboard.co/IaOxMqB.png . I did not set enumerable to true for age, but still it is shown.

            – randomSoul
            14 mins ago





















          6














          By default, properties you define with defineProperty are not enumerable - this means that they will not show up when you console.log them, nor when you iterate over their Object.keys. (Similarly, the length property of an array does not get displayed, because it's non-enumerable.)



          See MDN:




          enumerable



          true if and only if this property shows up during enumeration of the properties on the corresponding object.



          Defaults to false.




          Make it enumerable instead:






          //Code Snippet 
          let profile = {
          name: 'Barry Allen',
          }

          // I added a new property in the profile object.
          Object.defineProperty(profile, 'age', {
          value: 23,
          writable: true,
          enumerable: true
          })

          console.log(profile)
          console.log(profile.age)








          share|improve this answer
























          • Someone give this pasteboard.co/IaOxMqB.png Its showing age property in chrome console. Can you please explain that? Does chrome console works differently?

            – Maheer Ali
            2 mins ago





















          2














          Whenever you use".defineProperty" method of object. You should better define all the properties of the descriptor. Because if you don't define other property descriptor then it assumes default values for all of them which is false. So your console.log checks for all the enumerable : true properties and logs them.



          //Code Snippet 
          let profile = {
          name: 'Barry Allen',
          }

          // I added a new property in the profile object.
          Object.defineProperty(profile, 'age', {
          value: 23,
          writable: true,
          enumerable : true,
          configurable : true
          })

          console.log(profile)
          console.log(profile.age)





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


            }
            });






            Ravi W is a new contributor. Be nice, and check out our Code of Conduct.










            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55757089%2fi-am-having-problem-understanding-the-behavior-of-below-code-in-javascript%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            7














            You should set enumerable to true. In Object.defineProperty its false by default. According to MDN.




            enumerable

            true if and only if this property shows up during enumeration of the properties on the corresponding object.
            Defaults to false.




            Non-enumerable means that property will not be shown in Object.keys() or for..in loop neither in console






            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.

            Object.defineProperty(profile , 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })
            console.log(profile)
            console.log(profile.age)





            Example: All the properties and methods on prototype object of built-in classes are non-enumerable. Thats is the reason you can call them from instance but they don't appear while iterating.



            To get all properties(including non-enumerable)Object​.get​OwnProperty​Names()
            .






            share|improve this answer


























            • I didn't knew about this, but when I checked by running the local code in browser, it shows up perfectly (in spite of explicitly specifying enumerable to false).

              – randomSoul
              25 mins ago











            • @randomSoul I can't get what you mean.

              – Maheer Ali
              20 mins ago













            • See - pasteboard.co/IaOxMqB.png . I did not set enumerable to true for age, but still it is shown.

              – randomSoul
              14 mins ago


















            7














            You should set enumerable to true. In Object.defineProperty its false by default. According to MDN.




            enumerable

            true if and only if this property shows up during enumeration of the properties on the corresponding object.
            Defaults to false.




            Non-enumerable means that property will not be shown in Object.keys() or for..in loop neither in console






            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.

            Object.defineProperty(profile , 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })
            console.log(profile)
            console.log(profile.age)





            Example: All the properties and methods on prototype object of built-in classes are non-enumerable. Thats is the reason you can call them from instance but they don't appear while iterating.



            To get all properties(including non-enumerable)Object​.get​OwnProperty​Names()
            .






            share|improve this answer


























            • I didn't knew about this, but when I checked by running the local code in browser, it shows up perfectly (in spite of explicitly specifying enumerable to false).

              – randomSoul
              25 mins ago











            • @randomSoul I can't get what you mean.

              – Maheer Ali
              20 mins ago













            • See - pasteboard.co/IaOxMqB.png . I did not set enumerable to true for age, but still it is shown.

              – randomSoul
              14 mins ago
















            7












            7








            7







            You should set enumerable to true. In Object.defineProperty its false by default. According to MDN.




            enumerable

            true if and only if this property shows up during enumeration of the properties on the corresponding object.
            Defaults to false.




            Non-enumerable means that property will not be shown in Object.keys() or for..in loop neither in console






            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.

            Object.defineProperty(profile , 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })
            console.log(profile)
            console.log(profile.age)





            Example: All the properties and methods on prototype object of built-in classes are non-enumerable. Thats is the reason you can call them from instance but they don't appear while iterating.



            To get all properties(including non-enumerable)Object​.get​OwnProperty​Names()
            .






            share|improve this answer















            You should set enumerable to true. In Object.defineProperty its false by default. According to MDN.




            enumerable

            true if and only if this property shows up during enumeration of the properties on the corresponding object.
            Defaults to false.




            Non-enumerable means that property will not be shown in Object.keys() or for..in loop neither in console






            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.

            Object.defineProperty(profile , 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })
            console.log(profile)
            console.log(profile.age)





            Example: All the properties and methods on prototype object of built-in classes are non-enumerable. Thats is the reason you can call them from instance but they don't appear while iterating.



            To get all properties(including non-enumerable)Object​.get​OwnProperty​Names()
            .






            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.

            Object.defineProperty(profile , 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })
            console.log(profile)
            console.log(profile.age)





            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.

            Object.defineProperty(profile , 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })
            console.log(profile)
            console.log(profile.age)






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited 14 mins ago

























            answered 36 mins ago









            Maheer AliMaheer Ali

            11.5k826




            11.5k826













            • I didn't knew about this, but when I checked by running the local code in browser, it shows up perfectly (in spite of explicitly specifying enumerable to false).

              – randomSoul
              25 mins ago











            • @randomSoul I can't get what you mean.

              – Maheer Ali
              20 mins ago













            • See - pasteboard.co/IaOxMqB.png . I did not set enumerable to true for age, but still it is shown.

              – randomSoul
              14 mins ago





















            • I didn't knew about this, but when I checked by running the local code in browser, it shows up perfectly (in spite of explicitly specifying enumerable to false).

              – randomSoul
              25 mins ago











            • @randomSoul I can't get what you mean.

              – Maheer Ali
              20 mins ago













            • See - pasteboard.co/IaOxMqB.png . I did not set enumerable to true for age, but still it is shown.

              – randomSoul
              14 mins ago



















            I didn't knew about this, but when I checked by running the local code in browser, it shows up perfectly (in spite of explicitly specifying enumerable to false).

            – randomSoul
            25 mins ago





            I didn't knew about this, but when I checked by running the local code in browser, it shows up perfectly (in spite of explicitly specifying enumerable to false).

            – randomSoul
            25 mins ago













            @randomSoul I can't get what you mean.

            – Maheer Ali
            20 mins ago







            @randomSoul I can't get what you mean.

            – Maheer Ali
            20 mins ago















            See - pasteboard.co/IaOxMqB.png . I did not set enumerable to true for age, but still it is shown.

            – randomSoul
            14 mins ago







            See - pasteboard.co/IaOxMqB.png . I did not set enumerable to true for age, but still it is shown.

            – randomSoul
            14 mins ago















            6














            By default, properties you define with defineProperty are not enumerable - this means that they will not show up when you console.log them, nor when you iterate over their Object.keys. (Similarly, the length property of an array does not get displayed, because it's non-enumerable.)



            See MDN:




            enumerable



            true if and only if this property shows up during enumeration of the properties on the corresponding object.



            Defaults to false.




            Make it enumerable instead:






            //Code Snippet 
            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.
            Object.defineProperty(profile, 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })

            console.log(profile)
            console.log(profile.age)








            share|improve this answer
























            • Someone give this pasteboard.co/IaOxMqB.png Its showing age property in chrome console. Can you please explain that? Does chrome console works differently?

              – Maheer Ali
              2 mins ago


















            6














            By default, properties you define with defineProperty are not enumerable - this means that they will not show up when you console.log them, nor when you iterate over their Object.keys. (Similarly, the length property of an array does not get displayed, because it's non-enumerable.)



            See MDN:




            enumerable



            true if and only if this property shows up during enumeration of the properties on the corresponding object.



            Defaults to false.




            Make it enumerable instead:






            //Code Snippet 
            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.
            Object.defineProperty(profile, 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })

            console.log(profile)
            console.log(profile.age)








            share|improve this answer
























            • Someone give this pasteboard.co/IaOxMqB.png Its showing age property in chrome console. Can you please explain that? Does chrome console works differently?

              – Maheer Ali
              2 mins ago
















            6












            6








            6







            By default, properties you define with defineProperty are not enumerable - this means that they will not show up when you console.log them, nor when you iterate over their Object.keys. (Similarly, the length property of an array does not get displayed, because it's non-enumerable.)



            See MDN:




            enumerable



            true if and only if this property shows up during enumeration of the properties on the corresponding object.



            Defaults to false.




            Make it enumerable instead:






            //Code Snippet 
            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.
            Object.defineProperty(profile, 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })

            console.log(profile)
            console.log(profile.age)








            share|improve this answer













            By default, properties you define with defineProperty are not enumerable - this means that they will not show up when you console.log them, nor when you iterate over their Object.keys. (Similarly, the length property of an array does not get displayed, because it's non-enumerable.)



            See MDN:




            enumerable



            true if and only if this property shows up during enumeration of the properties on the corresponding object.



            Defaults to false.




            Make it enumerable instead:






            //Code Snippet 
            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.
            Object.defineProperty(profile, 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })

            console.log(profile)
            console.log(profile.age)








            //Code Snippet 
            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.
            Object.defineProperty(profile, 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })

            console.log(profile)
            console.log(profile.age)





            //Code Snippet 
            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.
            Object.defineProperty(profile, 'age', {
            value: 23,
            writable: true,
            enumerable: true
            })

            console.log(profile)
            console.log(profile.age)






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered 35 mins ago









            CertainPerformanceCertainPerformance

            101k166291




            101k166291













            • Someone give this pasteboard.co/IaOxMqB.png Its showing age property in chrome console. Can you please explain that? Does chrome console works differently?

              – Maheer Ali
              2 mins ago





















            • Someone give this pasteboard.co/IaOxMqB.png Its showing age property in chrome console. Can you please explain that? Does chrome console works differently?

              – Maheer Ali
              2 mins ago



















            Someone give this pasteboard.co/IaOxMqB.png Its showing age property in chrome console. Can you please explain that? Does chrome console works differently?

            – Maheer Ali
            2 mins ago







            Someone give this pasteboard.co/IaOxMqB.png Its showing age property in chrome console. Can you please explain that? Does chrome console works differently?

            – Maheer Ali
            2 mins ago













            2














            Whenever you use".defineProperty" method of object. You should better define all the properties of the descriptor. Because if you don't define other property descriptor then it assumes default values for all of them which is false. So your console.log checks for all the enumerable : true properties and logs them.



            //Code Snippet 
            let profile = {
            name: 'Barry Allen',
            }

            // I added a new property in the profile object.
            Object.defineProperty(profile, 'age', {
            value: 23,
            writable: true,
            enumerable : true,
            configurable : true
            })

            console.log(profile)
            console.log(profile.age)





            share|improve this answer




























              2














              Whenever you use".defineProperty" method of object. You should better define all the properties of the descriptor. Because if you don't define other property descriptor then it assumes default values for all of them which is false. So your console.log checks for all the enumerable : true properties and logs them.



              //Code Snippet 
              let profile = {
              name: 'Barry Allen',
              }

              // I added a new property in the profile object.
              Object.defineProperty(profile, 'age', {
              value: 23,
              writable: true,
              enumerable : true,
              configurable : true
              })

              console.log(profile)
              console.log(profile.age)





              share|improve this answer


























                2












                2








                2







                Whenever you use".defineProperty" method of object. You should better define all the properties of the descriptor. Because if you don't define other property descriptor then it assumes default values for all of them which is false. So your console.log checks for all the enumerable : true properties and logs them.



                //Code Snippet 
                let profile = {
                name: 'Barry Allen',
                }

                // I added a new property in the profile object.
                Object.defineProperty(profile, 'age', {
                value: 23,
                writable: true,
                enumerable : true,
                configurable : true
                })

                console.log(profile)
                console.log(profile.age)





                share|improve this answer













                Whenever you use".defineProperty" method of object. You should better define all the properties of the descriptor. Because if you don't define other property descriptor then it assumes default values for all of them which is false. So your console.log checks for all the enumerable : true properties and logs them.



                //Code Snippet 
                let profile = {
                name: 'Barry Allen',
                }

                // I added a new property in the profile object.
                Object.defineProperty(profile, 'age', {
                value: 23,
                writable: true,
                enumerable : true,
                configurable : true
                })

                console.log(profile)
                console.log(profile.age)






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 32 mins ago









                RK_15RK_15

                5749




                5749






















                    Ravi W is a new contributor. Be nice, and check out our Code of Conduct.










                    draft saved

                    draft discarded


















                    Ravi W is a new contributor. Be nice, and check out our Code of Conduct.













                    Ravi W is a new contributor. Be nice, and check out our Code of Conduct.












                    Ravi W is a new contributor. Be nice, and check out our Code of Conduct.
















                    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%2f55757089%2fi-am-having-problem-understanding-the-behavior-of-below-code-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

                    Knooppunt Holsloot

                    Altaar (religie)

                    Gregoriusmis