{"id":3531,"date":"2024-11-12T09:33:47","date_gmt":"2024-11-12T08:33:47","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=3531"},"modified":"2024-11-12T09:33:47","modified_gmt":"2024-11-12T08:33:47","slug":"understanding-object-entries-and-object-values-in-javascript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2024\/11\/12\/understanding-object-entries-and-object-values-in-javascript\/","title":{"rendered":"Understanding Object.entries() and Object.values() in JavaScript"},"content":{"rendered":"\n

JavaScript provides several useful methods for working with objects, among which Object.entries()<\/code> and Object.values()<\/code> are particularly valuable. These methods allow developers to manipulate and iterate over object properties efficiently.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1.\u00a0Object.entries()<\/code><\/h4>\n\n\n\n

Object.entries()<\/code> returns an array of a given object’s own enumerable property [key, value]<\/code> pairs. This method is useful when we want to iterate over both the keys and values of an object.<\/p>\n\n\n\n

Object.entries(obj);\r<\/code><\/pre>\n\n\n\n
Example<\/h5>\n\n\n\n
const user = {\r\n  name: 'Alice',\r\n  age: 25,\r\n  city: 'New York'\r\n};\r\n\r\nconst entries = Object.entries(user);\r\nconsole.log(entries);\r\n\/\/ Output: [['name', 'Alice'], ['age', 25], ['city', 'New York']]\r<\/code><\/pre>\n\n\n\n
In the example above, Object.entries(user)<\/code> converts the user<\/code> object into an array of key-value pairs, making it easier to loop through or manipulate the data.<\/p>\n\n\n\n
<\/div>\n\n\n\n
2.\u00a0Object.values()<\/code><\/h4>\n\n\n\n
Object.values()<\/code> returns an array of a given object’s own enumerable property values. This method is useful when we only need the values of an object without the keys.<\/p>\n\n\n\n
Object.values(obj);\r<\/code><\/pre>\n\n\n\n
Example<\/h5>\n\n\n\n
const user = {\r\n  name: 'Alice',\r\n  age: 25,\r\n  city: 'New York'\r\n};\r\n\r\nconst values = Object.values(user);\r\nconsole.log(values);\r\n\/\/ Output: ['Alice', 25, 'New York']\r<\/code><\/pre>\n\n\n\n
Here, Object.values(user)<\/code> extracts just the values from the user<\/code> object, providing a simple way to access all property values directly.<\/p>\n\n\n\n
<\/div>\n\n\n\n
3. Other Useful Object Properties<\/h4>\n\n\n\n
In addition to Object.entries()<\/code> and Object.values()<\/code>, JavaScript provides other useful methods for working with objects:<\/p>\n\n\n\n
  • Object.keys()<\/code><\/strong>: Returns an array of a given object’s own enumerable property names (keys).<\/li><\/ul>\n\n\n\n
    const keys = Object.keys(user);\r\nconsole.log(keys);\r\n\/\/ Output: ['name', 'age', 'city']\r<\/code><\/pre>\n\n\n\n
    • Object.assign()<\/code><\/strong>: Copies the values of all enumerable own properties from one or more source objects to a target object.<\/li><\/ul>\n\n\n\n
      const target = {};\r\nconst source = { a: 1, b: 2 };\r\nObject.assign(target, source);\r\nconsole.log(target);\r\n\/\/ Output: { a: 1, b: 2 }\r<\/code><\/pre>\n\n\n\n
      • Object.freeze()<\/code><\/strong>: Prevents new properties from being added to an object, existing properties from being removed, and existing properties from being changed.<\/li><\/ul>\n\n\n\n
        const obj = { prop: 42 };\r\nObject.freeze(obj);\r\nobj.prop = 33; \/\/ This will not change the value\r\nconsole.log(obj.prop); \/\/ Output: 42\r<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
        JavaScript provides several useful methods for working with objects, among which Object.entries() and Object.values() are particularly valuable. These methods allow developers to manipulate and iterate over object properties efficiently. 1.\u00a0Object.entries() Object.entries() returns an array of a given object’s own enumerable property [key, value] pairs. This method is useful when we want to iterate over both […]<\/p>\n","protected":false},"author":1,"featured_media":1963,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[948,949,950,947,380],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3531"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3531"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3531\/revisions"}],"predecessor-version":[{"id":3532,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3531\/revisions\/3532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1963"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}