To create an object with key-value pairs, you can use the curly braces notation:
You can also use the bracket notation to create object keys dynamically at runtime:
Accessing Object Keys
You can access object keys using dot notation for keys with valid identifier names:
For keys with invalid identifier names or dynamically-created keys, use bracket notation for new keys:
Looping Through Object Keys
Using for…in loop
To iterate through object keys, you can use a for…in loop:
Using Object.keys() method
Alternatively, use the Object.keys() method to extract keys of an object as an array and loop through them with an iterator.
Object Keys and Object Methods
Object.keys() method returns an array of a given object’s enumerable property keys. It provides a convenient way to extract all the keys from an object. For example:
Object.getOwnPropertyNames() method returns an array of all property names (both enumerable and non-enumerable) found directly on a given object. For example:
Reflect.ownKeys() method returns an array of all property names (both enumerable and non-enumerable) found directly on a given object, including symbols. For example:
Manipulating Object Keys
Checking for Object Keys
To check if a specific key exists in an object, you can use the
in operator or the
hasOwnProperty() method. The
in operator checks if the key exists anywhere in the object’s prototype chain, while the
hasOwnProperty() method only checks if the key exists directly on the object. For example:
Adding and Updating Object Keys
You can add or update object keys by assigning a value to a key:
Deleting Object Keys
To delete an object key, use the
To merge two objects with common or different keys, use the object spread syntax or the Object.assign() method with the given object.
Sorting Object Keys
Sort object keys by obtaining an array of keys and applying the
Optionally use a custom sorting function for specific ordering criteria:
- Fetching and displaying data from an API response
- Form handling and input validation
- Filtering and sorting lists or tables
- Dynamic DOM manipulation
- Use descriptive and meaningful key names: Choose key names that clearly represent the values they hold. This improves code readability and maintainability.
- Prefer dot notation for static keys: When accessing object keys with valid identifier names, use dot notation, as it’s more concise and easier to read.
- Use bracket notation for dynamic keys: When dealing with dynamic or computed keys, use bracket notation to access their values.
- Prefer const over let or var for object declarations: Declare objects using
constwhenever possible to prevent unintended reassignment or modification.
- Be cautious with nested objects: While objects can contain other objects as values, deeply nested structures can be difficult to read and maintain. Consider alternative data structures such as Map or Set if necessary.
- Avoid large objects: Large objects consume more memory, causing increased garbage collection overhead. Keep objects small and focused on specific tasks.
- Minimize object creation and destruction: Repeatedly creating and destroying objects can slow down your application and lead to excessive garbage collection. Use object pooling or other techniques to reuse objects when possible.
- Opt for the spread syntax over Object.assign(): When merging objects with ES6 or newer, prefer the spread syntax since it’s more performant and concise.
- Be mindful of object property access: Accessing deeply nested keys in objects can impact performance. Instead, use local variables to store intermediate values or prefer shallow object structures.
- Consider the trade-offs of sorted keys: Sorting object keys can ease data organization, but it may incur performance costs. Weigh the advantages and disadvantages before sorting keys in performance-sensitive scenarios.
What is the difference between object keys and strings?
- What is the difference between Object.keys() and Object.getOwnPropertyNames()?
Object.keys()method returns enumerable property keys, while
Object.getOwnPropertyNames()returns all property names (enumerable and non-enumerable). The latter includes keys that are not accessible using a regular loop.
- How can I check if a specific key exists in an object?
- You can use the
inoperator or the
hasOwnProperty()method to check if a specific key exists in an object. The
inoperator checks the entire prototype chain, while
hasOwnProperty()only checks the object directly.
- Is it possible to change the value of an object key?
- Yes, you can change the value of an object key by assigning a new value to it. Object keys are mutable.
- Can object keys have spaces?
- Yes, object keys can have spaces. However, it is generally recommended to avoid using spaces in object keys for better code readability and compatibility.