{"id":590,"date":"2016-12-05T11:44:00","date_gmt":"2016-12-05T11:44:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=590"},"modified":"2025-02-19T07:09:44","modified_gmt":"2025-02-19T07:09:44","slug":"constants-in-javascript","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/constants-in-javascript","title":{"rendered":"How To Create Constants in JavaScript?"},"content":{"rendered":"\n

Constants are immutable variables which value cannot be changed. Once, you have created a constant, its value cannot be changed.<\/p>\n\n\n\n

\"constants<\/figure>\n\n\n\n

While coding in JavaScript, you may have come across a requirement to create constants. Before ECMA Script 6, it was not very easy to create constants in JavaScript. In this post, I will show you to create constants in both ECMA Script 5 and ECMA Script 6.<\/p>\n\n\n\n

Constants in ECMA 5<\/h2>\n\n\n\n

We can create a constant in ECMA Script 5 using Object.defineProperty().  First we need to find out, whether variable would be a global variable or part of the window object.  Once that is determined, create variable by setting writable to false.<\/p>\n\n\n\n

Object.defineProperty(typeof global===\"object\" ? global : window,\n    \"foo\",\n    {\n    value: 10000,\n    enumerable: true,\n    configurable: true,\n    writable: false\n});<\/pre>\n\n\n\n
 Object.defineProperty() function takes three parameters,<\/p>\n\n\n\n
    \n
  1. Object for which variable should be created<\/li>\n\n\n\n
  2. Name of the variable to be created<\/li>\n\n\n\n
  3. Object to configure behavior of the variable.<\/li>\n<\/ol>\n\n\n\n
     To create a constant,<\/p>\n\n\n\n
      \n
    1. As first parameter, we are passing either window object or global object<\/li>\n\n\n\n
    2. As second parameter, we are passing name of the variable to be created, which is foo in this case.<\/li>\n\n\n\n
    3. As third parameter, we are passing object to configure the variable behavior. Keep in mind to make the writable property to false.<\/li>\n<\/ol>\n\n\n\n
      We have created a constant foo. If we try to reassign value of foo, JavaScript will ignore it. However, if we run, JavaScript in strict mode, then JavaScript will throw exception.  Let us see this in action, We are running JavaScript in strict mode and trying to reassign value of foo.<\/p>\n\n\n\n
      \"use strict\"\n\nObject.defineProperty(typeof global===\"object\" ? global : window,\n    \"foo\",\n    {\n    value: 10000,\n    enumerable: true,\n    configurable: true,\n    writable: false\n});\n\nconsole.log(foo);\nfoo=90;\nconsole.log(foo);<\/pre>\n\n\n\n
      Due to strict mode, JavaScript will throw exception as shown in the image below:<\/p>\n\n\n\n
      \"Due<\/figure>\n\n\n\n
      In this way using the Object.defineProperty() and making writable to false, we can create a constant in ECMA Script 5.<\/p>\n\n\n\n
      Constants in ECMA 6<\/h2>\n\n\n\n
      As you might have noticed that, creating constants in ECMA Script 5 was not very simple. In ECMA Script 6, new feature const has been introduced. It enables us to create constants or immutable variable.<\/p>\n\n\n\n
      const foo=10000;\nconsole.log(foo);<\/pre>\n\n\n\n
      If we try to reassign value of foo, JavaScript will complain about it in ECMA Script 6.  Let us try to reassign value of foo as shown in the listing below:<\/p>\n\n\n\n
      const foo=10000;\nconsole.log(foo);\nfoo=90;\nconsole.log(foo);<\/pre>\n\n\n\n
      JavaScript will complain about this as shown in the image below:<\/p>\n\n\n\n
      \"<\/figure>\n\n\n\n
      These are two ways constants can be created in JavaScript. I hope you find this post useful. Thanks for reading.<\/p>\n\n\n\n
      <\/p>\n","protected":false},"excerpt":{"rendered":"
      Constants are immutable variables which value cannot be changed. Once, you have created a constant, its value cannot be changed. While coding in JavaScript, you may have come across a requirement to create constants. Before ECMA Script 6, it was not very easy to create constants in JavaScript. In this post, I will show you […]<\/p>\n","protected":false},"author":65,"featured_media":1089,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-590","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\/590","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=590"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/590\/revisions"}],"predecessor-version":[{"id":1917,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/590\/revisions\/1917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1089"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}