{"id":4263,"date":"2017-03-16T15:24:29","date_gmt":"2017-03-16T15:24:29","guid":{"rendered":"https:\/\/www.ckl.io\/?p=4263"},"modified":"2022-07-01T17:43:35","modified_gmt":"2022-07-01T17:43:35","slug":"objects-immutability-javascript","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/","title":{"rendered":"Things you should know about Objects and Immutability in JavaScript"},"content":{"rendered":"<p>As a JavaScript developer, we should know that <strong>most things are objects<\/strong> \u2013 from core features, like strings and arrays, to the browser\u2019s APIs. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\" target=\"_blank\" rel=\"noopener\">Here<\/a> you can have a full introduction about objects in JavaScript.<br \/>\nJS\u2019s objects are so beautiful: we can copy them, change and remove properties and do many cool things.<\/p>\n<p><!--more--><\/p>\n<p>However, it\u2019s always good to remember:<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-4271 aligncenter\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/spiderman.gif\" alt=\"Ben Parker says to Peter Parker: With great power comes great responsibility. \" width=\"498\" height=\"207\"><\/p>\n<h2>What\u2019s wrong with mutability?<\/h2>\n<p><span style=\"font-weight: 400\">That&#8217;s a question many developers have, and here a reasonable answer: <\/span><b>there is nothing wrong if the code is mutable<\/b><span style=\"font-weight: 400\"> \u2013 the JavaScript&#8217;s Array API is and there\u2019s nothing wrong with that. Yet, the misuse of mutability can cause side effects to your software. Here\u2019s an example:<\/span><\/p>\n<pre><code class=\"language-javascript\">\nconst user = {\n  name: 'John Due',\n  birthdate: '1988-08-15',\n}\n\nconst changeName = (user, newName) =&gt; {\n  const newUser = user\n  newUser.name = newName\n  return newUser\n}\n\nconst userWithNewName = changeName(user, 'Jojo') \n\/\/ both users will have the name = 'Jojo'\nconsole.log(user, userWithNewName) \n<\/code><\/pre>\n<p><span style=\"font-weight: 400\">We can see that: although we are creating a new object, the <code>user<\/code> one was modified. <\/span><span style=\"font-weight: 400\">This happens because when you assign a new value to an existing object, you are just assigning a memory reference to it.<\/span><\/p>\n<pre><code class=\"language-javascript\">\nconst newUser = user\n<\/code><\/pre>\n<h2>Come to the Immutable side of the force<\/h2>\n<p><span style=\"font-weight: 400\">Immutability is the art of maintaining the state of an object, making development simple, traceable, testable and decreasing any possible side effects. The main idea is:&nbsp;<\/span><b>an update should not change the object, but create a new object with the updated data. <\/b><\/p>\n<p><span style=\"font-weight: 400\">We can achieve immutability through pure functions, aka <strong>functions that will always return a given value if provided with the same input values<\/strong>. Neat, right? See this example:<\/span><\/p>\n<pre><code class=\"language-javascript\">\nconst user = {\n  name: 'John Due',\n  birthdate: '1988-08-15',\n}\n\nconst changeName = (user, newName) =&gt; {\n  return {\n    ...user, \/\/ destructuring user object\n    name: newName, \/\/ override name attribute with new name\n  }\n}\n\nconst userWithNewName = changeName(user, 'Jojo')\n\/\/ the old user object has name = 'John Due' and the new object, name = 'Jojo'\nconsole.log(user, userWithNewName) \n<\/code><\/pre>\n<p><span style=\"font-weight: 400\">Here we have a <code>user<\/code> object and its <code>changeName<\/code> function. You can see that, given the initial user and the new name, the initial object isn\u2019t updated, and we always have the same result.<\/span><\/p>\n<h2>Creating Pure Functions and Removing References<\/h2>\n<p><span style=\"font-weight: 400\">Okay, we already know what can happen if we change the object\u2019s state, now we need to know how to work with objects without causing side effects.<\/span><\/p>\n<p><span style=\"font-weight: 400\">There are some ways to make immutable objects, but the most recommended approach to create them is using the Objects API and the ES6 destructuring assignment. We could also use functions like <code>.map<\/code>, <code>.filter<\/code> and <code>.reduce<\/code> to accomplish the same task.<\/span><\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Example using Objects.assign\nconst changeName = (user, newName) =&gt; Object.assign({}, user, {\n  name: newName\n})\n\n\/\/ Example using destructuring assignment\nconst changeName = (user, newName) =&gt; ({\n  ...user,\n  name: newName,\n})\n<\/code><\/pre>\n<h2>Wrapping up<\/h2>\n<p><span style=\"font-weight: 400\">When coding with JavaScript, manipulating objects is simple and practical, even though, it requires some care so your code does not end up bringing you headaches. Always remember to <a href=\"https:\/\/medium.com\/javascript-scene\/tdd-the-rite-way-53c9b46f45e3#.g5iny1yev\" target=\"_blank\" rel=\"noopener\">test your code<\/a> to avoid <\/span><span style=\"font-weight: 400\">unexpected <\/span><span style=\"font-weight: 400\">mutation of objects.<\/span><\/p>\n<p><span style=\"font-weight: 400\">There are some libraries that work pretty good with immutability, like <a href=\"https:\/\/facebook.github.io\/immutable-js\/\" target=\"_blank\" rel=\"noopener\">ImmutableJS<\/a>, <a class=\"\" href=\"https:\/\/github.com\/arqex\/freezer\" target=\"_blank\" rel=\"noopener\">Freezer<\/a> and <a href=\"https:\/\/github.com\/rtfeldman\/seamless-immutable\" target=\"_blank\" rel=\"noopener\">seamless-immutable<\/a>.<\/span><\/p>\n<p>Here at Cheesecake Labs we use <a href=\"https:\/\/github.com\/reactjs\/redux\" target=\"_blank\" rel=\"noopener\">Redux<\/a> and ImmutableJS to accomplish pure and functional Front-end projects, keeping our code clean and easy to read.<\/p>\n<p><span style=\"font-weight: 400\">Happy Coding!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a JavaScript developer, we should know that most things are objects \u2013 from core features, like strings and arrays, to the browser\u2019s APIs. Here you can have a full introduction about objects in JavaScript. JS\u2019s objects are so beautiful: we can copy them, change and remove properties and do many cool things.<\/p>\n","protected":false},"author":65,"featured_media":4275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432,7],"tags":[400],"class_list":["post-4263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","category-opinion","tag-tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Things you should know about Objects and Immutability in JavaScript<\/title>\n<meta name=\"description\" content=\"Immutability is the art of maintaining the state of an object, an update should not change the object, but create a new object with the updated data.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Things you should know about Objects and Immutability in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Immutability is the art of maintaining the state of an object, an update should not change the object, but create a new object with the updated data.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-16T15:24:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:43:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/\"},\"author\":{\"name\":\"Daniel Leite\"},\"headline\":\"Things you should know about Objects and Immutability in JavaScript\",\"datePublished\":\"2017-03-16T15:24:29+00:00\",\"dateModified\":\"2022-07-01T17:43:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/\"},\"wordCount\":428,\"commentCount\":4,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png\",\"keywords\":[\"JavaScript\"],\"articleSection\":[\"Engineering\",\"Opinion\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/\",\"name\":\"Things you should know about Objects and Immutability in JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png\",\"datePublished\":\"2017-03-16T15:24:29+00:00\",\"dateModified\":\"2022-07-01T17:43:35+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Daniel Leite\"},\"description\":\"Immutability is the art of maintaining the state of an object, an update should not change the object, but create a new object with the updated data.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png\",\"width\":2000,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Things you should know about Objects and Immutability in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Daniel Leite\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/daniel-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/daniel-300x300.jpg\",\"caption\":\"Daniel Leite\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/dleitee\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Things you should know about Objects and Immutability in JavaScript","description":"Immutability is the art of maintaining the state of an object, an update should not change the object, but create a new object with the updated data.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Things you should know about Objects and Immutability in JavaScript","og_description":"Immutability is the art of maintaining the state of an object, an update should not change the object, but create a new object with the updated data.","og_url":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2017-03-16T15:24:29+00:00","article_modified_time":"2022-07-01T17:43:35+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/"},"author":{"name":"Daniel Leite"},"headline":"Things you should know about Objects and Immutability in JavaScript","datePublished":"2017-03-16T15:24:29+00:00","dateModified":"2022-07-01T17:43:35+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/"},"wordCount":428,"commentCount":4,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png","keywords":["JavaScript"],"articleSection":["Engineering","Opinion"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/","url":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/","name":"Things you should know about Objects and Immutability in JavaScript","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png","datePublished":"2017-03-16T15:24:29+00:00","dateModified":"2022-07-01T17:43:35+00:00","author":{"@type":"person","name":"Daniel Leite"},"description":"Immutability is the art of maintaining the state of an object, an update should not change the object, but create a new object with the updated data.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/03\/Banner_functional.png","width":2000,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/objects-immutability-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Things you should know about Objects and Immutability in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Daniel Leite","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/daniel-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2016\/11\/daniel-300x300.jpg","caption":"Daniel Leite"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/dleitee\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/4263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=4263"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/4263\/revisions"}],"predecessor-version":[{"id":10308,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/4263\/revisions\/10308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/4275"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=4263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=4263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=4263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}