{"id":18104,"date":"2020-11-17T00:01:49","date_gmt":"2020-11-17T08:01:49","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18104"},"modified":"2023-12-01T04:04:07","modified_gmt":"2023-12-01T12:04:07","slug":"javascript-object-keys","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-object-keys\/","title":{"rendered":"JavaScript Object.keys(): A Guide"},"content":{"rendered":"\n

The JavaScript Object.keys() method retrieves the keys in an Object and returns a list that contains those keys. The order of the keys in the final list is the order they appear in the original Object.<\/em><\/p>\n\n\n\n

\n\n\n\n

JavaScript (JS) Objects consist of two main parts: keys and values.<\/p>\n\n\n\n

When working with an Object, you may want to retrieve a list of the keys associated with it. That\u2019s where the JavaScript Object.keys()<\/em> method comes in. This method allows you to generate a list of all the property names in an Object.<\/p>\n\n\n\n

Using examples, this tutorial will discuss how to use the Object.keys()<\/em> method to return a list of keys stored in an Object. We’ll also quickly discuss the structure of JavaScript Objects.<\/p>\n\n\n\n

JavaScript Objects: A Refresher<\/h2>\n\n\n\n

Objects (with a capital \u201cO\u201d) are the mapping data type in JavaScript. They map keys to values. The values stored by an Object can include strings, numbers, Booleans, and other data types. Here is an example of an Object in JavaScript:<\/p>\n\n\n\n

const job_description = {\n\tposition: "Sales Assistant",\n\tfloor_worker: true,\n\thours_per_week: 38\n};<\/pre><\/div>\n\n\n\n
The words to the left of the colons (:) are the keys<\/strong> in our dictionary. Words to the right of the colons are the values<\/strong>. You can think of JavaScript Objects as the equivalent of a Python dictionary, but in JavaScript.<\/p>\n\n\n\n
JavaScript Object.keys()<\/h2>\n\n\n\n
The JavaScript Object.keys() method returns the keys inside a JavaScript Object, or a JSON Object. These keys are stored in the order they appear in the Object.<\/p>\n\n\n\n
The syntax for the Object.keys()<\/em> method is:<\/p>\n\n\n\n
Object.keys(object_name)<\/pre><\/div>\n\n\n\n
The Object.keys()<\/em> method accepts one parameter: the name of the Object whose keys you want to retrieve. This method returns the names of all keys in the Object you have specified, stored as a JavaScript list.<\/p>\n\n\n\n
Notice that the method itself is called Object.keys(). This is because keys() is a method of Object. You must specify the Object whose keys you want to retrieve as a parameter of Object.keys(). You cannot append keys() to any Object because that Object will not have access to the keys() method.<\/p>\n\n\n\n
Object.keys() JavaScript Example<\/h2>\n\n\n\n
Let\u2019s walk you through an example to illustrate how this method works.<\/p>\n\n\n\n
Earlier, we created a dictionary called \u201cjob_description\u201d which outlines some information about a job available at a local superstore. Our Object contains a JavaScript boolean<\/a>, a string, and an integer. Now, suppose we want to retrieve a list of the keys in that dictionary.<\/p>\n\n\n\n
We could create this list using the following code:<\/p>\n\n\n\n
const job_description = {\n\tposition: "Sales Assistant",\n\tfloor_worker: true,\n\thours_per_week: 38\n};\n\nvar job_keys = Object.keys(job_description);\n\nconsole.log(job_keys);<\/pre><\/div>\n\n\n\n
Our code returns:<\/p>\n\n\n\n
["position", "floor_worker", "hours_per_week"]<\/pre><\/div>\n\n\n\n
First, we declared a constant called \u201cjob_description\u201d, which stores an Object with information about an available job at a local superstore.<\/p>\n\n\n\n
Then, we used Object.keys()<\/em> to retrieve a list of the keys associated with the dictionary, and we assigned the list to the variable \u201cjob_keys\u201d. Next, we printed out the contents of the \u201cjob_keys\u201d list to the JavaScript console<\/a>.<\/p>\n\n\n\n
As you can see, our code returned a list that contains three values. Each value represents a unique key name in our Object.<\/p>\n\n\n\n
JS Object.keys(): Another Example<\/h2>\n\n\n\n
Let\u2019s discuss another example of how to use this method.<\/p>\n\n\n\n
Suppose we want to print out a list of the keys in our Object, preceded by \u201cKey Name: \u201c. We could do so using this code:<\/p>\n\n\n\n
const job_description = {\n\tposition: "Sales Assistant",\n\tfloor_worker: true,\n\thours_per_week: 38\n};\n\nvar job_keys = Object.keys(job_description);\n\nfor (var key of job_keys) {\n\tconsole.log("Key Name: " + key);\n}<\/pre><\/div>\n\n\n\n
Our code returns:<\/p>\n\n\n\n
Key Name: position\nKey Name: floor_worker\nKey Name: hours_per_week<\/pre><\/div>\n\n\n\n
We first defined our \u201cjob_description\u201d Object whose keys we want to print to the console. Then, we used the JS Object.keys()<\/em> method to retrieve a list of the keys in our Object.<\/p>\n\n\n\n
Next, we used a \u201cfor\u2026of\u201d loop to loop through every key in our \u201cjob_description\u201d Object.<\/p>\n\n\n\n
For each key, we printed \u201cKey Name: \u201c, followed by the name of the key, to the console. If you\u2019re interested in learning more about how \u201cfor\u2026of\u201d loops work, read our beginner\u2019s guide to JavaScript for loops<\/a>.<\/p>\n\n\n\n