How to get the first key name of a JavaScript object ?

Read

Discuss

Given an object and the task is to get the first key of a JavaScript Object. Since a JavaScript object does not contains numbered index so we use the following approaches to get the first key name of the object.

Approach 1:

First take the JavaScript Object in a variable.
Use object.keys(objectName) method to get access to all the keys of object.
Now, we can use indexing like Object.keys(objectName)[0] to get the key of first element of object.

Example: This example illustrate the above approach.

html

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to get the first key name 
        of a JavaScript object ? 
    </title>     
</head> 
  
<body style = "text-align:center;"> 
      
    <h1 style = "color:green;" > 
        GeeksforGeeks 
    </h1> 
      
    <p id = "GFG_UP1" style = 
        "font-size: 15px; font-weight: bold;"> 
    </p> 
      
    <p id = "GFG_UP2" style = 
        "font-size: 15px; font-weight: bold; color: green;"> 
    </p> 
      
    <button onclick = "GFG_Fun()"> 
        click here 
    </button> 
      
    <p id = "GFG_DOWN" style = 
        "color:green; font-size: 20px; font-weight: bold;"> 
    </p> 
      
    <script> 
        var up1 = document.getElementById('GFG_UP1'); 
        var up2 = document.getElementById('GFG_UP2'); 
        var down = document.getElementById('GFG_DOWN'); 
          
        var obj = { 
            "Prop_1": ["Val_11", "Val_12", "Val_13"], 
            "Prop_2": ["Val_21", "Val_22", "Val_23"], 
            "Prop_3": ["Val_31", "Val_32", "Val_33"] 
        }; 
          
        up1.innerHTML = "Click on the button to get the "+ 
                                "first key of Object."; 
          
        up2.innerHTML = JSON.stringify(obj); 
          
        function GFG_Fun() { 
            down.innerHTML = "The first key = '" + 
            Object.keys(obj)[0] + "' <br> Value = '" 
            + obj[Object.keys(obj)[0]] + "'"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Get the first key name of a JavaScript object

Approach 2:

First, take the JavaScript Object into a variable.
With the help of a loop, start accessing the all keys of the JavaScript Object.
After running it one time, break it. Then we will get the first key of the Object.

Example: This example illustrates the above approach.

html

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to get the first key name 
        of a JavaScript object ? 
    </title>     
</head> 
  
<body style = "text-align:center;"> 
      
    <h1 style = "color:green;" > 
        GeeksforGeeks 
    </h1> 
      
    <p id = "GFG_UP1" style = 
        "font-size: 15px; font-weight: bold;"> 
    </p> 
      
    <p id = "GFG_UP2" style = 
        "font-size: 15px; font-weight: bold; color: green;"> 
    </p> 
      
    <button onclick = "GFG_Fun()"> 
        click here 
    </button> 
      
    <p id = "GFG_DOWN" style = 
        "color:green; font-size: 20px; font-weight: bold;"> 
    </p> 
      
    <script> 
        var up1 = document.getElementById('GFG_UP1'); 
        var up2 = document.getElementById('GFG_UP2'); 
        var down = document.getElementById('GFG_DOWN'); 
          
        var obj = { 
            "Prop_1": ["Val_11", "Val_12", "Val_13"], 
            "Prop_2": ["Val_21", "Val_22", "Val_23"], 
            "Prop_3": ["Val_31", "Val_32", "Val_33"] 
        }; 
          
        up1.innerHTML = "Click on the button to get " 
                        + "the first key of Object."; 
          
        up2.innerHTML = JSON.stringify(obj); 
          
        function GFG_Fun() { 
            var key; 
              
            for (var k in obj) { 
                key = k; 
                break; 
            } 
              
            down.innerHTML = "The first key = '" + key + 
                    "' <br> Value = '" + obj[key] + "'"; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Get the first key name of a JavaScript object

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 14 Nov, 2022

How to skip over an element in .map() ?

How to Show and Hide div elements using Checkboxes ?

How to get the first key name of a JavaScript object ?

html

html

Please Login to comment...