There are a few things to know about object keys such as how to get an array of public key names from a given object, and how to create and get hidden key names. In addition there is also how to work with inherited keys when it comes to the nature of the prototype object of a class of objects. Still when it comes to taking one thing at a time, there is just knowing how to get a list of pubic key names for an object itself, and not any additional keys that are hidden, or inherited. With that said one way to go about getting just that basic public key list would be the Object.keys static method.
These Objects contain property names, or keys, that corresponds with values that can be Numbers, Strings, other primitives, or additional nested Objects of one type or another. So you have key names, and then you have values that correspond to these keys that can be both public, as well as privet or hidden. There are keys and values that are unique to a single object, and then there are keys and values that are not.
Often there might be a need to get an array of key names, or key values of an object. When doing so often it is desired to only get an array of keys and or values that are the own properties of an object. In addition in most situations I would only need to get public own key names or values. However in some situations I might want to also have everything that there is going on with the object.
Object keys can be enumerable meaning that it is possible for the key name to be easily acquired into an array of key names. However it is also possible for them to be non-enumerable as well, when this is the case it is still possible to to include them in an array of key names it just means that a method like Object.getOwnPropertyNames needs to be used to do so. It is also possible to set this value for an object key as well, more on that later.
So say I have an object that contains some public keys and corresponding values such as a x and y key along with number values for example. If just simply want an array of these key names i can pass the Object to the Object keys method as the first and only argument, and then assign the array that is returned to a variable. The variable will then contain my array of key names for this object of mine.
So you get the basic idea, but lets look at a few more use cases examples just to help to get a better understanding of how useful this method is in all kinds of situations that will creep up now and then.
The array for each method might not be the best example of this, however you get the general idea. Other array prototype methods can of course also be used with the resulting array such as array map, and array filter just to name a few. So lets look at some more advanced use case examples of the Object keys method in action to get a better feel of this method.
Say you have an array of weird objects where values that you want are encoded into the key names. What you want to do is create an array of arrays where each nested array contains a value that is encoded in the key names of the objects that are in the array of objects. One way to go about doing that would be to use the Object keys method in conjunction with array map, and the string split method maybe.
The object keys static method has decent browser support these days. However still in some situations the method might need to be pollyfilled, as a way to make sure that the method is there to work with in the event that a user visits a site with a browser that is out of date will not run into an issue with code braking as a result of the object keys method not being there.
Here is an Object keys polyfill that i just copied and pasted from the Mozilla page for object keys just so save you the trip there.
I have come to find that I prefer to use a user space option over polyfilling. One such example of this might be the lodash keys method. However when using the lodash keys method it is not just a question of using lodash and being done with it. Late versions of lodash might just reference the native object keys method actually, so it is still a good idea to keep an eye and how far back browser support goes with the version of lodash that you are suing if you choose to go that way with it.
For the most part the Object keys method is well supported these days. In addition there are of course ways of polyfilling the method, or using some kind of user space module to have a stand alone method for object keys that will work on older platforms. When I look at by browser stats for my website here i can nit say there is much need to worry about it, but the use of for in loops is one way to go about dealing with this concern if it does become a problem.
In some situations I might have some properties in an Object own properties that are not enumerable. In a way these kinds of properties are still enumerable, it just means that it can not be done with a for in loop or Object.keys. The Object.getOwnProperyNames method can still be used to include these kinds of object keys in an array.
The Object.keys method is good for getting an array public of key names for and Object, but what about an array of values? For this there is the Object.values method that will work more or less the same way, only an array of values will be returned rather than an array of key names.