{"id":29682,"date":"2019-04-12T23:38:54","date_gmt":"2019-04-12T15:38:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29682"},"modified":"2023-04-06T19:15:05","modified_gmt":"2023-04-06T11:15:05","slug":"getters-setters-javascript","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/","title":{"rendered":"JavaScript Getters and Setters: A Developer’s Guide"},"content":{"rendered":"

Getters<\/a><\/strong> and setters<\/a><\/strong> are functions or methods used to get<\/em> and set<\/em> the values of variables<\/strong>. The getter-setter concept is common in computer programming<\/a><\/strong>: almost all high-level programming languages come with a set of syntax to implement getters and setters, including JavaScipt.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t4 Useful JavaScript Statements You Should Know<\/a>\n\t\t\t\t<\/p>\n

In this post, we\u2019ll see what getters setters are, and how to create and use them in JavaScript<\/strong>.<\/p>\n

Getters-setters and encapsulation<\/h2>\n

The idea of getters and setters is always mentioned in conjunction with encapsulation<\/a><\/strong>. Encapsulation can be understood in two ways<\/strong>.<\/p>\n

Firstly, it is the setting up of the data\u2013getters\u2013setters<\/strong> trio to access and modify that data. This definition is useful when some operations, such as validation, have to be performed on the data<\/strong> before saving or viewing it\u2014getters and setters provide the perfect home for it.<\/p>\n

Secondly, there\u2019s a stricter definition according to which encapsulation is done to hide data<\/strong>, to make it inaccessible from other code, except through the getters and setters<\/strong>. This way we don\u2019t end up accidentally overwriting important data<\/strong> with some other code in the program.<\/p>\n

Create getters and setters<\/h2>\n

1. With methods<\/h3>\n

Since getters and setters are basically functions<\/strong> that fetch\/change a value, there are more than one ways<\/strong> to create and use them. The first way is:<\/p>\n

\r\nvar obj = {\r\n  foo:    'this is the value of foo',\r\n  getFoo: function() {\r\n            return this.foo;\r\n        },\r\n  setFoo: function(val) {\r\n            this.foo = val;\r\n        }\r\n}\r\n\r\nconsole.log(obj.getFoo());\r\n\/\/ \"this is the value of foo\"\r\n\r\nobj.setFoo('hello');\r\n\r\nconsole.log(obj.getFoo());\r\n\/\/ \"hello\"<\/pre>\n
This is the simplest way<\/strong> to create getters and setters. There\u2019s a property foo<\/code> and there are two methods: getFoo<\/code> and setFoo<\/code> to return and assign a value<\/strong> to that property.<\/p>\n
2. With keywords<\/h3>\n
A more \u201cofficial\u201d and robust way of creating getters and setters is by using the get<\/a><\/code> and set<\/a><\/code> keywords<\/strong>.<\/p>\n
To create a getter<\/strong>, place the get<\/code> keyword<\/strong> in front of a function declaration that will serve as the getter method, and use the set<\/code> keyword<\/strong> in the same way to create a setter<\/strong>. The syntax is as follows:<\/p>\n
\r\nvar obj = {\r\n  fooVal: 'this is the value of foo',\r\n  get foo() {\r\n      return this.fooVal;\r\n  },\r\n  set foo(val) {\r\n      this.fooVal = val;\r\n  }\r\n}\r\n\r\nconsole.log(obj.foo);\r\n\/\/ \"this is the value of foo\"\r\n\r\nobj.foo = 'hello';\r\n\r\nconsole.log(obj.foo);\r\n\/\/ \"hello\"\r\n<\/pre>\n
Note that the data can only be stored under a property name<\/strong> (fooVal<\/code>) that\u2019s different<\/strong> from the name of the getter-setter methods (foo<\/code>) because a property holding the getter-setter can\u2019t hold the data<\/strong> as well.<\/p>\n
Which way is better?<\/h3>\n
If you choose to create getters and setters with keywords, you can use the assignment operator to set the data<\/strong> and the dot operator to get the data<\/strong>, the same way you\u2019d access\/set the value of a regular property.<\/p>\n
However, if you choose the first way of coding getters and setters, you have to call the setter and getter methods using the function call syntax<\/strong> because they are typical functions (nothing special like those created using the get<\/code> and set<\/code> keywords).<\/p>\n
Also, there\u2019s a chance you might end up accidentally assigning some other value<\/strong> to the properties that held those getter-setter methods and lose them completely<\/strong>! Something you don\u2019t have to worry about in the later method.<\/p>\n
So, you can see why I said the second technique is more robust<\/strong>.<\/p>\n
Overwrite prevention<\/h3>\n
\r\n\/* Overwrite prevention *\/\r\nvar obj = {\r\n  foo: 'this is the value of foo'\r\n};\r\n\r\nObject.defineProperties(obj, {\r\n  'getFoo': {\r\n      value: function () {\r\n          return this.foo;\r\n      }\r\n  },\r\n  'setFoo': {\r\n      value: function (val) {\r\n          this.foo = val;\r\n      }\r\n  }\r\n});\r\n\r\nobj.getFoo = 66;\r\n\/\/ getFoo is not going to be overwritten!\r\n\r\nconsole.log(obj.getFoo());\r\n\/\/ \"this is the value of foo\"\r\n<\/pre>\n
Operations inside getters and setters<\/h2>\n
Once you\u2019ve introduced the getters and setters, you can go ahead and perform operations on the data<\/strong> before changing or returning it.<\/p>\n
In the code below, in the getter function the data is concatenated with a string<\/strong> before being returned, and  in the setter function a validation of whether the value is a number or not<\/strong> is performed before updating n<\/code>.<\/p>\n
\r\nvar obj = {\r\n  n: 67,\r\n  get id() {\r\n      return 'The ID is: ' + this.n;\r\n  },\r\n  set id(val) {\r\n      if (typeof val === 'number')\r\n          this.n = val;\r\n  }\r\n}\r\n\r\nconsole.log(obj.id);\r\n\/\/ \"The ID is: 67\"\r\n\r\nobj.id = 893;\r\n\r\nconsole.log(obj.id);\r\n\/\/ \"The ID is: 893\"\r\n\r\nobj.id = 'hello';\r\n\r\nconsole.log(obj.id);\r\n\/\/ \"The ID is: 893\"\r\n<\/pre>\n
Protect data with getters and setters<\/h2>\n
So far, we covered the use of getters and setters in the first context of encapsulation. Let\u2019s move on to the second, i.e. how to hide data from outside code<\/strong> with the help of getters and setters.<\/p>\n
Unprotected data<\/h3>\n
The setting up of getters and setters doesn\u2019t mean the data can only be accessed and changed via those methods. In the following example, it\u2019s changed directly<\/strong> without touching the getter and setter methods:<\/p>\n
\r\nvar obj = {\r\n  fooVal: 'this is the value of foo',\r\n  get foo() {\r\n      return this.fooVal;\r\n  },\r\n  set foo(val) {\r\n      this.fooVal = val;\r\n  }\r\n}\r\n\r\nobj.fooVal = 'hello';\r\n\r\nconsole.log(obj.foo);\r\n\/\/ \"hello\"\r\n<\/pre>\n
We didn\u2019t use the setter but directly changed the data (fooVal<\/code>)<\/strong>. The data we initially set inside obj<\/code> is gone now! To prevent this from happening (accidentally), you need some protection<\/strong> for your data. You can add that by limiting the scope<\/strong> of where your data is available. You can do that by either block scoping<\/strong> or function scoping<\/strong>.<\/p>\n
1. Block scoping<\/h3>\n
One way is to use a block scope<\/strong> inside which the data will be defined using the let<\/code> keyword which limits its scope<\/strong> to that block.<\/p>\n
\r\n\/* BLOCK SCOPE, leave the braces alone! *\/\r\n{\r\nlet fooVal = 'this is the value of foo';\r\nvar obj = {\r\n    get foo() {\r\n        return fooVal;\r\n    },\r\n    set foo(val) {\r\n        fooVal = val\r\n    }\r\n  }\r\n}\r\n\r\nfooVal = 'hello';\r\n\/\/ not going to affect the fooVal inside the block\r\n\r\nconsole.log(obj.foo);\r\n\/\/ \"this is the value of foo\"<\/pre>\n
Changing\/creating fooVal<\/code>outside the block won\u2019t affect<\/strong> the fooVal<\/code> referred inside the getters setters.<\/p>\n
2. Function scoping<\/h3>\n
The more common way to protect the data with scoping is by keeping the data inside a function<\/strong> and returning an object<\/strong> with the getters and setters from that function.<\/p>\n
\r\nfunction myobj(){\r\n  var fooVal = 'this is the value of foo';\r\n  return {\r\n      get foo() {\r\n          return fooVal;\r\n      },\r\n      set foo(val) {\r\n          fooVal = val\r\n      }\r\n  }\r\n}\r\n\r\nfooVal = 'hello';\r\n\/\/ not going to affect our original fooVal\r\n\r\nvar obj = myobj();\r\n\r\nconsole.log(obj.foo);\r\n\/\/ \"this is the value of foo\"<\/pre>\n
The object (with the foo()<\/code> getter-setter inside of it) returned by the myobj()<\/code> function is saved in obj<\/code><\/strong>, and then obj<\/code> is used to call the getter and setter<\/strong>.<\/p>\n
3. Data protection without scoping<\/h3>\n
There\u2019s also another way you can protect your data from being overwritten without limiting its scope<\/strong>. The logic behind it goes like this: how can you change a piece of data if you don\u2019t know what is called?<\/p>\n
If the data has a not so easily reproducible variable\/property name<\/strong>, chances are no one (even ourselves) is going to end up overwriting it by assigning some value to that variable\/property name.<\/p>\n
\r\nvar obj = {\r\n  s89274934764: 'this is the value of foo',\r\n  get foo() {\r\n    return this.s89274934764;\r\n  },\r\n  set foo(val) {\r\n    this.s89274934764 = val;\r\n  }\r\n}\r\n\r\nconsole.log(obj.foo);\r\n\/\/ \"this is the value of foo\"\r\n<\/pre>\n
See, that\u2019s one way of working things out. Although the name I chose is not a really good one, you can also use random values or symbols<\/strong> to create property names as it\u2019s proposed by Derick Bailey in this blog post<\/a>. The main goal is to keep the data hidden<\/strong> from other code and let a getter-setter pair to access\/update it.<\/p>\n
When should you use getters and setters?<\/h2>\n
Now comes the big question: do you start assigning getters and setters to all your data<\/strong> now?<\/p>\n
If you\u2019re hiding data<\/strong>, then there\u2019s no other choice<\/strong>.<\/p>\n
But if your data being seen by other code is fine, do you still need to use getters setters just to bundle it up with code<\/strong> that performs some operations on it? I\u2019d say yes<\/strong>. Code adds up very soon<\/strong>. Creating micro units of individual data with its own getter-setter provides you with a certain independence<\/strong> to work on said data without affecting other parts of the code.<\/p>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t10 Reasons Why You Need Code Optimization<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"
Getters and setters are functions or methods used to get and set the values of variables. The getter-setter concept is common in computer programming: almost all high-level programming languages come with a set of syntax to implement getters and setters, including JavaScipt. In this post, we\u2019ll see what getters setters are, and how to create…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[4117,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nJavaScript Getters and Setters: A Developer's Guide - Hongkiat<\/title>\n<meta name=\"description\" content=\"Getters and setters are functions or methods used to get and set the values of variables. The getter-setter concept is common in computer programming:\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Getters and Setters: A Developer's Guide\" \/>\n<meta property=\"og:description\" content=\"Getters and setters are functions or methods used to get and set the values of variables. The getter-setter concept is common in computer programming:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-12T15:38:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:15:05+00:00\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"JavaScript Getters and Setters: A Developer’s Guide\",\"datePublished\":\"2019-04-12T15:38:54+00:00\",\"dateModified\":\"2023-04-06T11:15:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/\"},\"wordCount\":1111,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"Javascripts\",\"Web Developers\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/\",\"name\":\"JavaScript Getters and Setters: A Developer's Guide - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2019-04-12T15:38:54+00:00\",\"dateModified\":\"2023-04-06T11:15:05+00:00\",\"description\":\"Getters and setters are functions or methods used to get and set the values of variables. The getter-setter concept is common in computer programming:\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/getters-setters-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript Getters and Setters: A Developer’s Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Getters and Setters: A Developer's Guide - Hongkiat","description":"Getters and setters are functions or methods used to get and set the values of variables. The getter-setter concept is common in computer programming:","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:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Getters and Setters: A Developer's Guide","og_description":"Getters and setters are functions or methods used to get and set the values of variables. The getter-setter concept is common in computer programming:","og_url":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-04-12T15:38:54+00:00","article_modified_time":"2023-04-06T11:15:05+00:00","author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"JavaScript Getters and Setters: A Developer’s Guide","datePublished":"2019-04-12T15:38:54+00:00","dateModified":"2023-04-06T11:15:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/"},"wordCount":1111,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["Javascripts","Web Developers"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/","url":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/","name":"JavaScript Getters and Setters: A Developer's Guide - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2019-04-12T15:38:54+00:00","dateModified":"2023-04-06T11:15:05+00:00","description":"Getters and setters are functions or methods used to get and set the values of variables. The getter-setter concept is common in computer programming:","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/getters-setters-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript Getters and Setters: A Developer’s Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7IK","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=29682"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29682\/revisions"}],"predecessor-version":[{"id":65872,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/29682\/revisions\/65872"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=29682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=29682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=29682"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=29682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
A block scope<\/a><\/strong> can be created by placing your code inside a pair of curly braces<\/strong>. Whenever you create a block scope make sure to leave a comment<\/strong> above it asking for the braces to be left alone, so that no one removes the braces<\/strong> by mistake thinking they are some extra redundant braces in the code or add a label<\/strong> to the block scope.<\/p>\n
If for some reason you prefer the first technique, make the properties holding the getter-setter methods read-only<\/strong> by creating them using Object.defineProperties<\/code><\/strong>. Properties created via Object.defineProperties<\/a><\/code><\/strong>, Object.defineProperty<\/a><\/code><\/strong> and Reflect.defineProperty<\/a><\/code><\/strong> automatically configure<\/strong> to writable: false<\/code> which means read-only<\/strong>:<\/p>\n