{"id":134,"date":"2023-11-03T04:59:25","date_gmt":"2023-11-03T04:59:25","guid":{"rendered":"https:\/\/focuscrafttech.com\/blog\/?p=134"},"modified":"2024-05-01T06:13:22","modified_gmt":"2024-05-01T06:13:22","slug":"134","status":"publish","type":"post","link":"https:\/\/focuscrafttech.com\/blog\/2023\/11\/03\/134\/","title":{"rendered":"An array of objects vs objects of objects"},"content":{"rendered":"\n    <div class=\"xs_social_share_widget xs_share_url both_content \t\tmain_content  wslu-style-2 wslu-share-box-shaped wslu-fill-colored wslu-share-m-5 wslu-none wslu-share-horizontal wslu-theme-font-yes wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t                    <li class=\"xs-share-li facebook                        wslu-no-extra-data\">\n                        <a href=\"javascript:void();\"\n                           id=\"xs_feed_facebook\"\n                           onclick=\"xs_social_sharer(this);\"\n                           data-pid=\"134\"\n                           data-uri_hash=\"153d3e62f2e01422907cc3b73a7b25af\"\n                           data-key=\"facebook\"\n                           data-xs-href=\"http:\/\/www.facebook.com\/sharer.php?u=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;t=An+array+of+objects+vs+objects+of+objects&amp;v=3\">\n\n                            <div class=\"xs-social-icon\">\n                                <span class=\"met-social met-social-facebook\"><\/span>\n                            <\/div>\n\n\t\t\t\t\t\t\t\n                            <div class=\"wslu-hover-content\">\n                                <div class=\"xs-social-followers\">\n\t\t\t\t\t\t\t\t\t0                                <\/div>\n                                <div class=\"xs-social-follower-text\">\n\t\t\t\t\t\t\t\t\t                                <\/div>\n                                <div class=\"xs-social-follower-label\">\n\t\t\t\t\t\t\t\t\tFacebook                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/li>\n\t\t\t\t\t                    <li class=\"xs-share-li twitter                        wslu-no-extra-data\">\n                        <a href=\"javascript:void();\"\n                           id=\"xs_feed_twitter\"\n                           onclick=\"xs_social_sharer(this);\"\n                           data-pid=\"134\"\n                           data-uri_hash=\"153d3e62f2e01422907cc3b73a7b25af\"\n                           data-key=\"twitter\"\n                           data-xs-href=\"https:\/\/twitter.com\/intent\/tweet?text=An+array+of+objects+vs+objects+of+objects+https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;original_referer=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;related=xpeedstudio\">\n\n                            <div class=\"xs-social-icon\">\n                                <span class=\"met-social met-social-twitter\"><\/span>\n                            <\/div>\n\n\t\t\t\t\t\t\t\n                            <div class=\"wslu-hover-content\">\n                                <div class=\"xs-social-followers\">\n\t\t\t\t\t\t\t\t\t0                                <\/div>\n                                <div class=\"xs-social-follower-text\">\n\t\t\t\t\t\t\t\t\t                                <\/div>\n                                <div class=\"xs-social-follower-label\">\n\t\t\t\t\t\t\t\t\tTwitter                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/li>\n\t\t\t\t\t                    <li class=\"xs-share-li linkedin                        wslu-no-extra-data\">\n                        <a href=\"javascript:void();\"\n                           id=\"xs_feed_linkedin\"\n                           onclick=\"xs_social_sharer(this);\"\n                           data-pid=\"134\"\n                           data-uri_hash=\"153d3e62f2e01422907cc3b73a7b25af\"\n                           data-key=\"linkedin\"\n                           data-xs-href=\"https:\/\/www.linkedin.com\/shareArticle?url=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;title=An+array+of+objects+vs+objects+of+objects&amp;summary=&amp;source=Blog+%7C+FOCUSCRAFT+Tech+Private+Ltd&amp;mini=1\">\n\n                            <div class=\"xs-social-icon\">\n                                <span class=\"met-social met-social-linkedin\"><\/span>\n                            <\/div>\n\n\t\t\t\t\t\t\t\n                            <div class=\"wslu-hover-content\">\n                                <div class=\"xs-social-followers\">\n\t\t\t\t\t\t\t\t\t1                                <\/div>\n                                <div class=\"xs-social-follower-text\">\n\t\t\t\t\t\t\t\t\t                                <\/div>\n                                <div class=\"xs-social-follower-label\">\n\t\t\t\t\t\t\t\t\tLinkedin                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/li>\n\t\t\t\t\t                    <li class=\"xs-share-li pinterest                        wslu-no-extra-data\">\n                        <a href=\"javascript:void();\"\n                           id=\"xs_feed_pinterest\"\n                           onclick=\"xs_social_sharer(this);\"\n                           data-pid=\"134\"\n                           data-uri_hash=\"153d3e62f2e01422907cc3b73a7b25af\"\n                           data-key=\"pinterest\"\n                           data-xs-href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;media=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-content%2Fuploads%2F2023%2F08%2Fcropped-FCT-Logo3-azureblue-web%402x.png&amp;description=\">\n\n                            <div class=\"xs-social-icon\">\n                                <span class=\"met-social met-social-pinterest\"><\/span>\n                            <\/div>\n\n\t\t\t\t\t\t\t\n                            <div class=\"wslu-hover-content\">\n                                <div class=\"xs-social-followers\">\n\t\t\t\t\t\t\t\t\t0                                <\/div>\n                                <div class=\"xs-social-follower-text\">\n\t\t\t\t\t\t\t\t\t                                <\/div>\n                                <div class=\"xs-social-follower-label\">\n\t\t\t\t\t\t\t\t\tPinterest                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/li>\n\t\t\t\t\t        <\/ul>\n    <\/div> \n\n<p class=\"wp-block-paragraph\">Hello everyone, Today I\u2019m going to share a magical trick that helps your code run faster. Unlike Java, JavaScript does not have a built-in library to support manipulating data with less amount of <a href=\"https:\/\/www.freecodecamp.org\/news\/the-complexity-of-simple-algorithms-and-data-structures-in-javascript-11e25b29de1e\/\">time complexity<\/a>. But there is an alternative way available. By using this trick, you can retrieve \/ edit\/append\/search elements in O(1) time complexity. Can\u2019t you believe it? No, matter about best \/ worst \/ average case scenarios. After knowing this trick, you can get your target element at O(1) accessing time from collections.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Let me take you to the actual content. As front-end developers, we have to store the API response into a variable to perform future actions such as displaying data, manipulating the data, and sending it back to the server. To explain this concept, I\u2019m going to take a simple example.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The requirement is, need to display product features as a group of buttons. Users can select a feature at a time. Based on selected features products price will be changed. At any time, a user may deselect a feature and select a different feature. This time we have to minus old feature cost and need to add new feature cost. Consider the below example, based on the product color, the cost of the product will change. Each color has a unique ID, name, price, and price unit. So, what data structure do you prefer for this scenario?<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"796\" height=\"338\" src=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/image-2.png\" alt=\"color characteristics interface\" class=\"wp-image-139\" srcset=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/image-2.png 796w, https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/image-2-300x127.png 300w, https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/image-2-768x326.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/Card.png\" alt=\"Product details card\" class=\"wp-image-136\" style=\"aspect-ratio:1;width:200px;height:auto\" srcset=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/Card.png 200w, https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/Card-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Let me guess. Yep, Of course, you may prefer an array of objects. Good. But every edit, search, and filter take O (N) time complexity which means the entire array has to be traversed from beginning to end to get the targeted element. We can avoid this scenario by using the Object-of-object structure. Typescript and JavaScript support dynamic ways of adding keys to an object. So, at runtime, we can create a new property by using the below interface. But we need to decide which attribute going to be a property name. Because it is the unique identifier to access your data.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>interface Characteristics {\n  colorId: string;\n  colorName: string;\n  price: string;\n  priceUnit: string;\n}\n\ninterface Colors {\n  &#91;colorId: string]: Characteristics;\n}<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/dictionary.png\" alt=\"data storing method representation of object and array\" class=\"wp-image-141\" style=\"aspect-ratio:1;width:315px;height:auto\" srcset=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/dictionary.png 200w, https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/dictionary-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\">Objects<\/a> are also known as dictionaries in other programming languages. An object is a key\u2013value pair. If we know the key, the accessing elements will be simple and will take a constant amount of time for any input.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\">Array<\/a> can store a collection of elements under a variable name. To access the array element, we need to know which index the targeted element is present. Arrays offers a set of operations to get index \/ get element\/searching etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s discuss how objects are different from arrays.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Adding data into an array vs adding data into an object<\/strong><\/h5>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Adding elements into an array<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">After fetching the list of characteristics from the API response, if needed, we can do some parsing or we can directly store it into a redux. To store data in array structure, every object need to be pushed into an array.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Initial stage<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const characteristics: Array&lt;Characteristics&gt; = &#91;\n  {\n    colorId: \"blue_001\",\n    colorName: \"Blue\",\n    price: \"330\",\n    priceUnit: \"dollar\",\n  },\n];<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Memory representation<\/strong> <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"482\" height=\"310\" src=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/11\/image.png\" alt=\"memory block of single element\" class=\"wp-image-194\" srcset=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/11\/image.png 482w, https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/11\/image-300x193.png 300w\" sizes=\"auto, (max-width: 482px) 85vw, 482px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>Adding multiple elements into an array<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const characteristics: Array&lt;Characteristics&gt; = &#91;\n  {\n    colorId: \"blue_001\",\n    colorName: \"Blue\",\n    price: \"330\",\n    priceUnit: \"dollar\",\n  },\n];\n\n\nlistOfCharacteristics.forEach((character) =&gt; {\n  characteristics.push(character);\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Memory representation<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"394\" height=\"246\" src=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/11\/image-1.png\" alt=\"memory blocks of multiple elements\" class=\"wp-image-195\" srcset=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/11\/image-1.png 394w, https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/11\/image-1-300x187.png 300w\" sizes=\"auto, (max-width: 394px) 85vw, 394px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The initial stage array is allocated with a memory address of 1000. Later, Once we start pushing items into an array, it will extend the memory location.<\/p>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Adding elements into an object<\/strong><\/h6>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Init stage<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const characteristics: Colors = {\n  \"blue_001\": {\n    colorId: \"blue_001\",\n    colorName: \"Blue\",\n    price: \"330\",\n    priceUnit: \"dollar\",\n  },\n};<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Adding <strong>multiple<\/strong><\/strong> <strong>properties into an object<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const characteristics: Colors = {\n  \"blue_001\": {\n    colorId: \"blue_001\",\n    colorName: \"Blue\",\n    price: \"330\",\n    priceUnit: \"dollar\",\n  },\n};\n\nlistOfCharacteristics.forEach((character) =&gt; {\n  characteristics&#91;character.colorId] = character;\n});<\/code><\/pre>\n\n\n\n<h6 class=\"wp-block-heading\">Memory representation of object<\/h6>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/Keys.png\" alt=\"memory representation of object\" class=\"wp-image-148\" style=\"aspect-ratio:1;width:200px;height:auto\" srcset=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/Keys.png 200w, https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/Keys-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Every object key is linked with a value using a hash function. A new property will be linked to the object by linking the memory reference.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adding a new item into an array and object requires O (1) complexity.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Displaying content<\/strong> in UI<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">We have to render features into the UI. Here, it\u2019s a group of the same component. Ultimately, we have to use the iteration function to display every feature as a separate button. So, there is no way, we all end up with O(N) complexity.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Displaying array data in UI<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function ProductFeatures({}) {\n  const &#91;characteristics, setCharacteristics] = useState&lt;\n    Array&lt;Characteristics&gt;\n  &gt;(&#91;]);\n\n\n  return characteristics.map((spec) =&gt; (\n    &lt;SpecCard colorId={spec?.colorId} colorName={spec?.colorName} \/&gt;\n  ));\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Displaying object data in UI<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function ProductFeatures({}) {\n  const &#91;characteristics, setCharacteristics] = useState&lt;Colors&gt;({});\n\n  return Object.keys(characteristics).map((specKey) =&gt; (\n    &lt;SpecCard\n      colorId={characteristics&#91;specKey].colorId}\n      colorName={characteristics&#91;specKey].colorName}\n    \/&gt;\n  ));\n}<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Manipulate data<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Once, every child is rendered into UI, it\u2019s important to handle events which are triggered by children. We need to uniquely identify which child triggered the onClick or onChange event. So based on that, we need to perform the next action. From our example, the user triggers the onClick event of the feature button. If a red button clicks, we need to find out what is the price for red and append the price with the product.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Description of manipulating array data<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, Every object has a unique colorId. We can use the indexOf() or find() method to get the color price.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  const handleSelect = (colorId: string) =&gt; {\n    let char: Array&lt;Characteristics&gt; = &#91;];\n    const selectedColorIndex = characteristics.indexOf(\n      (spec: Characteristics) =&gt; spec.colorId === colorId\n    );\n\n    if (selectedColorIndex &gt;= 0) {\n      const price = characteristics&#91;selectedColorIndex].price;\n    }\n  };<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Time complexity<\/strong> &#8211; O(N)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Description of manipulating object data<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We passed the key (colorId) to the child component. So, explicitly we know key. Then, We can directly access the color price like below<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  const handleSelect = (colorId:string) =&gt;{\n    if (colorId in characteristics){\n      const price = characteristics&#91;colorId].price;\n    }\n  }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Time complexity<\/strong> &#8211; O(1)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hint:<\/strong> Since you\u2019re going to use a unique name as an object property name, this can be used as a key while rendering multiple children.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Delete actions<\/h5>\n\n\n\n<h6 class=\"wp-block-heading\">Deleting an element from an array<\/h6>\n\n\n\n<p class=\"wp-block-paragraph\">If your targeted element presents at the end of the array. We can simply delete that particular element by using pop() method. It requires O (1) time complexity. It\u2019s a best-case example. If you want to delete an element at the beginning or middle of the array, then the system have to shift the rest of the elements positions too like below screenshot.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"200\" src=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/0.png\" alt=\"Deleting a element from an array\" class=\"wp-image-155\" srcset=\"https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/0.png 200w, https:\/\/focuscrafttech.com\/blog\/wp-content\/uploads\/2023\/10\/0-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 85vw, 200px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Deleting a property from an object is simple. Using the delete keyword we can delete a property from an object and the object should be in mutable state.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Deleting a element from an array<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  const handleDelete = (colorId: string) =&gt; {\n    const filteredPrice = characteristics.filter(\n      (spec: Characteristics) =&gt; spec.colorId !== colorId\n    );\n  };<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Time complexity<\/strong> &#8211; O(N)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Deleting a property from an object<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>  const handleDelete = (colorId: string) =&gt; {\n    if (colorId in characteristics) {\n      delete characteristics.colorId;\n    }\n  };<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Time complexity<\/strong> &#8211; O(1)<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Conclusion<\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">I have explained what I have learned from my previous experience. Ultimately choosing an array of objects or objects of objects depends on your use case.  Object of object method will be useful when you need to manipulate data based on user events.  It will reduce number of lines of code and it may difficult to understand code flow at first time.<\/p>\n\n    <div class=\"xs_social_share_widget xs_share_url both_content \t\tmain_content  wslu-style-2 wslu-share-box-shaped wslu-fill-colored wslu-share-m-5 wslu-none wslu-share-horizontal wslu-theme-font-yes wslu-main_content\">\n\n\t\t\n        <ul>\n\t\t\t                    <li class=\"xs-share-li facebook                        wslu-no-extra-data\">\n                        <a href=\"javascript:void();\"\n                           id=\"xs_feed_facebook\"\n                           onclick=\"xs_social_sharer(this);\"\n                           data-pid=\"134\"\n                           data-uri_hash=\"153d3e62f2e01422907cc3b73a7b25af\"\n                           data-key=\"facebook\"\n                           data-xs-href=\"http:\/\/www.facebook.com\/sharer.php?u=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;t=An+array+of+objects+vs+objects+of+objects&amp;v=3\">\n\n                            <div class=\"xs-social-icon\">\n                                <span class=\"met-social met-social-facebook\"><\/span>\n                            <\/div>\n\n\t\t\t\t\t\t\t\n                            <div class=\"wslu-hover-content\">\n                                <div class=\"xs-social-followers\">\n\t\t\t\t\t\t\t\t\t0                                <\/div>\n                                <div class=\"xs-social-follower-text\">\n\t\t\t\t\t\t\t\t\t                                <\/div>\n                                <div class=\"xs-social-follower-label\">\n\t\t\t\t\t\t\t\t\tFacebook                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/li>\n\t\t\t\t\t                    <li class=\"xs-share-li twitter                        wslu-no-extra-data\">\n                        <a href=\"javascript:void();\"\n                           id=\"xs_feed_twitter\"\n                           onclick=\"xs_social_sharer(this);\"\n                           data-pid=\"134\"\n                           data-uri_hash=\"153d3e62f2e01422907cc3b73a7b25af\"\n                           data-key=\"twitter\"\n                           data-xs-href=\"https:\/\/twitter.com\/intent\/tweet?text=An+array+of+objects+vs+objects+of+objects+https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;original_referer=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;related=xpeedstudio\">\n\n                            <div class=\"xs-social-icon\">\n                                <span class=\"met-social met-social-twitter\"><\/span>\n                            <\/div>\n\n\t\t\t\t\t\t\t\n                            <div class=\"wslu-hover-content\">\n                                <div class=\"xs-social-followers\">\n\t\t\t\t\t\t\t\t\t0                                <\/div>\n                                <div class=\"xs-social-follower-text\">\n\t\t\t\t\t\t\t\t\t                                <\/div>\n                                <div class=\"xs-social-follower-label\">\n\t\t\t\t\t\t\t\t\tTwitter                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/li>\n\t\t\t\t\t                    <li class=\"xs-share-li linkedin                        wslu-no-extra-data\">\n                        <a href=\"javascript:void();\"\n                           id=\"xs_feed_linkedin\"\n                           onclick=\"xs_social_sharer(this);\"\n                           data-pid=\"134\"\n                           data-uri_hash=\"153d3e62f2e01422907cc3b73a7b25af\"\n                           data-key=\"linkedin\"\n                           data-xs-href=\"https:\/\/www.linkedin.com\/shareArticle?url=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;title=An+array+of+objects+vs+objects+of+objects&amp;summary=&amp;source=Blog+%7C+FOCUSCRAFT+Tech+Private+Ltd&amp;mini=1\">\n\n                            <div class=\"xs-social-icon\">\n                                <span class=\"met-social met-social-linkedin\"><\/span>\n                            <\/div>\n\n\t\t\t\t\t\t\t\n                            <div class=\"wslu-hover-content\">\n                                <div class=\"xs-social-followers\">\n\t\t\t\t\t\t\t\t\t1                                <\/div>\n                                <div class=\"xs-social-follower-text\">\n\t\t\t\t\t\t\t\t\t                                <\/div>\n                                <div class=\"xs-social-follower-label\">\n\t\t\t\t\t\t\t\t\tLinkedin                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/li>\n\t\t\t\t\t                    <li class=\"xs-share-li pinterest                        wslu-no-extra-data\">\n                        <a href=\"javascript:void();\"\n                           id=\"xs_feed_pinterest\"\n                           onclick=\"xs_social_sharer(this);\"\n                           data-pid=\"134\"\n                           data-uri_hash=\"153d3e62f2e01422907cc3b73a7b25af\"\n                           data-key=\"pinterest\"\n                           data-xs-href=\"https:\/\/pinterest.com\/pin\/create\/button\/?url=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-json%2Fwp%2Fv2%2Fposts%2F134&amp;media=https%3A%2F%2Ffocuscrafttech.com%2Fblog%2Fwp-content%2Fuploads%2F2023%2F08%2Fcropped-FCT-Logo3-azureblue-web%402x.png&amp;description=\">\n\n                            <div class=\"xs-social-icon\">\n                                <span class=\"met-social met-social-pinterest\"><\/span>\n                            <\/div>\n\n\t\t\t\t\t\t\t\n                            <div class=\"wslu-hover-content\">\n                                <div class=\"xs-social-followers\">\n\t\t\t\t\t\t\t\t\t0                                <\/div>\n                                <div class=\"xs-social-follower-text\">\n\t\t\t\t\t\t\t\t\t                                <\/div>\n                                <div class=\"xs-social-follower-label\">\n\t\t\t\t\t\t\t\t\tPinterest                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/li>\n\t\t\t\t\t        <\/ul>\n    <\/div> \n","protected":false},"excerpt":{"rendered":"<p>0 Facebook 0 Twitter 1 Linkedin 0 Pinterest Hello everyone, Today I\u2019m going to share a magical trick that helps your code run faster. Unlike Java, JavaScript does not have a built-in library to support manipulating data with less amount of time complexity. But there is an alternative way available. By using this trick, you &hellip; <a href=\"https:\/\/focuscrafttech.com\/blog\/2023\/11\/03\/134\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;An array of objects vs objects of objects&#8221;<\/span><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,14,43],"tags":[35,48,47,49,9,46],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-javascript","category-react-js","category-typescript","tag-array-manipulation","tag-data-structures","tag-javascript","tag-object","tag-react-js","tag-typescript"],"_links":{"self":[{"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":29,"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions\/320"}],"wp:attachment":[{"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/focuscrafttech.com\/blog\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}