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

26 Jul, 2021
Given an object and the task is to get the first key of a JavaScript Object. Since 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.
<!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:
Before clicking on the button:
After clicking on the button:
Approach 2:
First take the JavaScript Object into a variable.
With the help of loop, start accessing the all keys of JavaScript Object.
After running it one time, break it. Then we will get the first key of Object.
Example: This example illustrate the above approach.
<!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:
Before clicking on the button:
After clicking on the button:
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.
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills