JavaScript - keys() method

revision:

Category : array

The keys() method returns a new array iterator object that contains the keys for each index in the array.

The keys() method does not change the original array.

Syntax : 

        array.keys()

Parameters: none

Examples: 

            const array1 = ['a', 'b', 'c'];
            const iterator = array1.keys();
            for (const key of iterator) {
              console.log(key);
            }
            // Expected output: 0
            // Expected output: 1
            // Expected output: 2

Category : object

The Object.keys() static method returns an array of a given object's own enumerable string-keyed property names.

Syntax : 

        Object.keys(obj)

Parameters:

obj : required. An object.

Examples: 

            const object1 = {
                a: 'somestring',
                b: 42,
                c: false
            };
            console.log(Object.keys(object1));
              // Expected output: Array ["a", "b", "c"]

Practical examples

example: using keys(*) method on sparse arrays.

code: 
                    <div>
                        <p id="key-1"></p>
                        <p id="key-2"></p>
                        <p id="key-3"></p>
                    </div>
                    <script>
                        const arr = ["a", , "c"];
                        const sparseKeys = Object.keys(arr);
                        const denseKeys = [...arr.keys()];
                        console.log(sparseKeys); // ['0', '2']
                        console.log(denseKeys); // [0, 1, 2]
                        document.getElementById("key-1").innerHTML = "arrary: " + arr;
                        document.getElementById("key-2").innerHTML = "sparseKeys: " + sparseKeys;
                        document.getElementById("key-3").innerHTML = "denseKeys: " + denseKeys;
                        
                    </script>

example: create an array iterator object, containing the keys of an array.

keys() returns an Array Iterator object with the keys of an array:

code: 
                    <div>
                        <p>keys() returns an Array Iterator object with the keys of an array:</p>
                        <p id="key-4"></p>
                    </div>
                    <script>
                        const fruits = ["Banana", "Orange", "Apple", "Mango"];
                        const keys = fruits.keys();
                        let text = "";
                        for (let x of keys) {
                            text += x + "<br>";
                        }
                        document.getElementById("key-4").innerHTML = "keys of the array : " + "<br>" + text;
                    </script>

example: use the built-in Object.keys() method.

Object.keys() returns an Array Iterator object with the keys of an object:

code: 
                    <div>
                        <p>Object.keys() returns an Array Iterator object with the keys of an object:</p>
                        <p id="key-5"></p>
                    </div>
                    <script>
                        const fruits1 = ["Banana", "Orange", "Apple", "Mango"];
                        const keys1= Object.keys(fruits1);
                        let text1 = "";
                        for (let x of keys1) {
                            text1 += x + "<br>";
                        }
                        document.getElementById("key-5").innerHTML = "keys of the array : " + "<br>" + text1;
                        
                    </script>

example: using Object.keys().

Object.keys() returns an Array Iterator object with the keys of an object:

code: 
                    <div>
                        <p>Object.keys() returns an Array Iterator object with the keys of an object:</p>
                        <p id="key-6"></p>
                        <p id="key-7"></p>
                        <p id="key-8"></p>
                        <p id="key-9"></p>
            
                    </div>
                    <script>
                        // Simple array
                        const arr1 = ["a", "b", "c"];
                        console.log(Object.keys(arr1)); // ['0', '1', '2']
                        document.getElementById("key-6").innerHTML = "object keys : " + Object.keys(arr1);
                        // Array-like object
                        const obj = { 0: "a", 1: "b", 2: "c" };
                        console.log(Object.keys(obj)); // ['0', '1', '2']
                        document.getElementById("key-7").innerHTML = "object keys : " + Object.keys(obj);
                        // Array-like object with random key ordering
                        const anObj = { 100: "a", 2: "b", 7: "c" };
                        console.log(Object.keys(anObj)); // ['2', '7', '100']
                        document.getElementById("key-8").innerHTML = "object keys : " + Object.keys(anObj);
                        // getFoo is a non-enumerable property
                        const myObj = Object.create(
                            {},
                            {
                                getFoo: {
                                    value() {
                                        return this.foo;
                                    },
                                },
                            },
                        );
                        myObj.foo = 1;
                        console.log(Object.keys(myObj)); // ['foo']
                        document.getElementById("key-8").innerHTML = "object keys : " + Object.keys(myObj);
                    </script>