Ways to implement Object.values() in JavaScript

There is a method Object.values() which returns the values of JavaScript Object. Here we are going to see all other alternatives to this method with the help of JavaScript. Here a few approaches are discussed.

Approach 1: Use Object.keys() method to get the keys and then use map() method to map the keys to the values and store the values in an array.

  • Example: This example implements the above approach.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Alternative version for Object.values() in JavaScript.
        </title>
    </head>
      
    <body style="text-align:center;">
        <h1 style="color: green">  
                GeeksForGeeks  
            </h1>
        <p id="GFG_UP">
        </p>
        <button onclick="gfg_Run()">
            Click Here
        </button>
        <p id="GFG_DOWN">
        </p>
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var arr = [];
            var obj = {
                a: 'val_1',
                b: 'val_2'
            };
            el_up.innerHTML = 
              "Click on the button to get the values.<br>Object = "
            + JSON.stringify(obj);
      
            function gfg_Run() {
                var val = Object.keys(obj).map(function(e) {
                    return obj[e];
                });
                el_down.innerHTML = JSON.stringify(val);
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Approach 2: Visit every property of the object by running a loop and push the value in an array each time. obj.hasOwnProperty() and push() method are used.

  • Example: This example implements the above approach.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Alternative version for Object.values() in JavaScript.
        </title>
    </head>
      
    <body style="text-align:center;">
        <h1 style="color: green">  
                GeeksForGeeks  
            </h1>
        <p id="GFG_UP">
        </p>
        <button onclick="gfg_Run()">
            Click Here
        </button>
        <p id="GFG_DOWN">
        </p>
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var arr = [];
            var obj = {
                a: 'val_1',
                b: 'val_2'
            };
            el_up.innerHTML = 
              "Click on the button to get the values.<br>Object = " 
            + JSON.stringify(obj);
      
            function getValues(obj) {
                var ret = [];
                for (var i in obj) {
                    if (obj.hasOwnProperty(i)) {
                        ret.push(obj[i]);
                    }
                }
                return ret;
            }
      
            function gfg_Run() {
                el_down.innerHTML = JSON.stringify(getValues(obj));
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Approach 3:(In ES6 format) Use Object.keys() method to get the keys and then use map() method to map the keys to the values and store the values in an array.

  • Example: This example implements the above approach.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Alternative version for Object.values() in JavaScript.
        </title>
    </head>
      
    <body style="text-align:center;">
        <h1 style="color: green">  
                GeeksForGeeks  
            </h1>
        <p id="GFG_UP">
        </p>
        <button onclick="gfg_Run()">
            Click Here
        </button>
        <p id="GFG_DOWN">
        </p>
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var arr = [];
            var obj = {
                a: 'val_1',
                b: 'val_2'
            };
            el_up.innerHTML = 
              "Click on the button to get the values.<br>Object = "
            + JSON.stringify(obj);
      
            function gfg_Run() {
                el_down.innerHTML = Object.keys(obj).map(e => obj[e]);
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.