{"id":719,"date":"2017-09-19T14:20:00","date_gmt":"2017-09-19T14:20:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=719"},"modified":"2025-02-26T08:41:26","modified_gmt":"2025-02-26T08:41:26","slug":"easy-javascript","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/easy-javascript","title":{"rendered":"Easy JavaScript Part 8: What Are Getters and Setters?"},"content":{"rendered":"\n

First, a setter is used to set the value of a property. A setter gets called each time the value of the property is changed. In other words, it executes a function for each time a property used inside the setter function is changed. Take a look at the following code:<\/p>\n\n\n\n

var\u00a0foo\u00a0=\u00a0{\n\u00a0\u00a0\u00a0\u00a0set\u00a0cal(x)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.a\u00a0=\u00a0x\u00a0+\u00a05\n\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0a:\u00a0undefined\n}\n \nfoo.cal\u00a0=\u00a08;\nconsole.log(foo.a);<\/pre>\n\n\n\n
In the object foo<\/b>, the setter cal<\/b> will be called each time the property a<\/b> is changed. As an output, you will get 13 printed. While creating a setter, you need to follow these rules:<\/p>\n\n\n\n
    \n
  1. A setter name could be either string or number.<\/li>\n\n\n\n
  2. A setter must have exactly one input parameter.<\/li>\n\n\n\n
  3. There should be only one setter with the same identifier in an object<\/li>\n\n\n\n
  4. You can remove a setter using the delete operator<\/li>\n<\/ol>\n\n\n\n
    For other examples of a setter, let\u2019s take a look at the following code:<\/p>\n\n\n\n
    var\u00a0greet\u00a0=\u00a0{\n\u00a0\u00a0\u00a0\u00a0set\u00a0welcome(m)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.msg\u00a0=\u00a0this.msg\u00a0+\u00a0m;\n\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0msg:\u00a0\"Hello\u00a0\"\n}\ngreet.welcome\u00a0=\u00a0\"Jaosn\";\nconsole.log(greet.msg);<\/pre>\n\n\n\n
    For the above code snippet as output, Hello Jason<\/b> will be printed. You can also add the setter to an existing object using Object.defineProperty<\/b>. Let\u2019s say that you have an object foo<\/b>: <\/p>\n\n\n\n
    var\u00a0foo\u00a0=\u00a0{\n\u00a0\u00a0\u00a0\u00a0num:\u00a00\n}<\/pre>\n\n\n\n
    Now to add a setter for the existing object foo , use Object.defineProperty. <\/p>\n\n\n\n
    Object.defineProperty(foo,\u00a0'cal',\u00a0{\n\u00a0\u00a0\u00a0\u00a0set:\u00a0function\u00a0(x)\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.num\u00a0=\u00a0this.num\u00a0+\u00a0x;\n\u00a0\u00a0\u00a0\u00a0}\n});\nfoo.cal\u00a0=\u00a09;\nconsole.log(foo.num);\u00a0\/\/9<\/pre>\n\n\n\n
    Above, you are adding a setter to an existing object, and you\u2019ll get 9<\/b> as your output. <\/p>\n\n\n\n
    JavaScript Getter<\/h2>\n\n\n\n
    Using a JavaScript getter, you can call a function each time you do a property reading. So, if you want to call a function, JavaScript will use a getter each time an object is looked up. Consider the following code:<\/p>\n\n\n\n
    var\u00a0cal\u00a0=\u00a0{\n\u00a0\u00a0\u00a0\u00a0num:\u00a00,\n\u00a0\u00a0\u00a0\u00a0get\u00a0add()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0this.num\u00a0+\u00a05;\n\u00a0\u00a0\u00a0\u00a0}\n}\nconsole.log(cal.add);<\/pre>\n\n\n\n
    In the above code, your output will be the computed value of the property num<\/b>. Mainly, you\u2019re going to use getters to read the value of a property that returns a dynamically computed value. If you need to read the value of a property on the following criteria:<\/p>\n\n\n\n
      \n
    1. The property will return  dynamic computed value<\/li>\n\n\n\n
    2. The property\u2019s internal value should not be reflected without calling a method explicitly<\/li>\n<\/ol>\n\n\n\n
      To achieve these two requirements, you should use a getter. Consider the code below:<\/p>\n\n\n\n
      var\u00a0foo\u00a0=\u00a0{\n\u00a0\u00a0\u00a0\u00a0name:\u00a0'jason',\n\u00a0\u00a0\u00a0\u00a0get\u00a0Name()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0this.name\u00a0+\u00a0\"\u00a0beres\";\n\u00a0\u00a0\u00a0\u00a0}\n}\nconsole.log(foo.Name);<\/pre>\n\n\n\n
      In the above code, you are using a getter to compute the value of the name property. Here you will get the output jason beres<\/b>.<\/p>\n\n\n\n
      While creating a getter, you need to remember the following rules:<\/p>\n\n\n\n
        \n
      1. A getter name can be either a string or a number.<\/li>\n\n\n\n
      2. A getter must not have any input parameters – it must have exactly zero parameters.<\/li>\n\n\n\n
      3. There should be only one getter with the same identifier in an object<\/li>\n\n\n\n
      4. You can remove a getter using the delete operator<\/li>\n<\/ol>\n\n\n\n
         <\/p>\n\n\n\n
        You can also add a getter to an existing object using the Object.defineProperty<\/b>.  Let us say that you have an object foo<\/b>:<\/p>\n\n\n\n
        var\u00a0foo\u00a0=\u00a0{\n\u00a0\u00a0\u00a0\u00a0num:\u00a01\n}<\/pre>\n\n\n\n
        To add a getter for the existing object foo<\/b>, use the Object.defineProperty<\/b>. <\/p>\n\n\n\n
        Object.defineProperty(foo,\u00a0'numgetter',\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0get:\u00a0function\u00a0()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return\u00a0this.num\u00a0+\u00a01;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\nconsole.log(foo.numgetter);\u00a0\/\/2<\/pre>\n\n\n\n
        As you can see above, you\u2019re adding a getter to an existing object, and your output will be 2<\/b>.<\/p>\n\n\n\n
         Conclusion<\/h2>\n\n\n\n
        Having a good understanding of getters and setters is necessary to work with objects in JavaScript. Using a setter, you can call a function each time the value of a property is changed, and using a getter, you can return the computed value of a property. And that\u2019s it!<\/p>\n\n\n\n
        Don\u2019t forget to check out Ignite UI for JavaScript\/HTML5 and ASP.NET MVC<\/a>, which you can use with HTML5, Angular, React, and ASP.NET MVC to create rich Internet applications. You can download a trial<\/a> of all our JavaScript controls for free!<\/p>\n","protected":false},"excerpt":{"rendered":"
        In JavaScript, you may have heard of getters and setters. Let\u2019s take a look at what these things are.<\/p>\n","protected":false},"author":65,"featured_media":1445,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=719"}],"version-history":[{"count":2,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/719\/revisions"}],"predecessor-version":[{"id":2425,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/719\/revisions\/2425"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1445"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}