{"id":462,"date":"2018-04-13T15:18:45","date_gmt":"2018-04-13T15:18:45","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=462"},"modified":"2018-04-13T15:18:45","modified_gmt":"2018-04-13T15:18:45","slug":"when-to-use-strict-mode-in-javascript","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/when-to-use-strict-mode-in-javascript\/","title":{"rendered":"When to Use Strict Mode in JavaScript"},"content":{"rendered":"<p class=\"note\"><em>This post is work-in-progress learning-note and still in active development and updated regularly<\/em>.<\/p>\n<p>JavaScript, since introduced in 1995, has been evolving without much compatibility issues and standardized script rules. In ECMAScript 5 (ES5), new features, syntax rules including Strict Mode feature were added in the language.<\/p>\n<p>In MDN, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener\">Strict Mode<\/a>\u00a0 is referred as a way to <em>opt in<\/em> to a restricted variant of JavaScript and opting out of of &#8220;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Sloppy_mode\" target=\"_blank\" rel=\"noopener\">sloppy mode<\/a>&#8220;. Strict mode follows different code semantics. Strict mode <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener\">modifies<\/a> several normal code semantics:<\/p>\n<ul>\n<li>Eliminates some JS silent errors by changing them to throw errors.<\/li>\n<li>Fixes mistakes that make it difficult for JS engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that&#8217;s not strict mode.<\/li>\n<li>Prohibits some syntax likely to be defined in future versions of ECMAScript.<\/li>\n<\/ul>\n<h5>How to Declare Strict Mode<\/h5>\n<p>Strict mode is invoked by adding <code>&quot;use strict&quot;<\/code> or <code>&#039;use strict&#039;<\/code> before any statement (at the top). It <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode#Invoking strict mode\" target=\"_blank\" rel=\"noopener\">applies<\/a> to <strong>entire script<\/strong> or <strong>individual functions<\/strong> but does not apply to block statements enclosed in <code>{ }<\/code> braces.<\/p>\n<h6>1. Use Example in Script<\/h6>\n<pre><code class=\"language-javascript\">\/\/ strict mode syntax in script\n&#039;use strict&#039;;\nlet greeting = &quot;An example of strict mode use in script!&quot;;\n\nconsole.log(greeting);\n\n\/\/OUTPUT\nAn example of strict mode use in script!<\/code><\/pre>\n<p>The MDN highlights some pitfall of using &#8216;use strict&#8217; in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode#Strict_mode_for_scripts\" target=\"_blank\" rel=\"noopener\">scripts<\/a>.<\/p>\n<h6>2. Use Example in Function<\/h6>\n<p>To <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode#strict-mode-for-functions\" target=\"_blank\" rel=\"noopener\">invoke Strict mode in function<\/a> add &#8220;use strict&#8221;; or &#8216;use strict&#8217;; in the function&#8217;s body before any other statements.<\/p>\n<pre><code class=\"language-javascript\">\/\/Strict mode syntax in function\nfunction greeting() {\n  \/\/ Function-level strict mode syntax\n  &#039;use strict&#039;;\n  function sayHi() { \n    return &#039;And so am I!&#039;; \n   }\n  return &quot;Hi!  I&#039;m a strict mode function!  &quot; + sayHi();\n }\n\n\/\/invoke function\ngreeting();\n\n\/\/OUTPUT\n&quot;Hi!  I&#039;m a strict mode function!  And so am I!&quot;\n\n\/\/Function w\/o strict mode\nfunction welcome() {\n  return &quot;I&#039;m not in strict mode.&quot;; \n  }\nwelcome();\n\n\/\/OUTPOT\n&quot;I am not in strict mode.&quot;<\/code><\/pre>\n<p class=\"tip\"><strong>Tip<\/strong>: There is no way to cancel <code>&quot;use strict&quot;<\/code> directive once it is invoked. <a href=\"https:\/\/javascript.info\/strict-mode\" target=\"_blank\" rel=\"noopener\">There is no return<\/a>.<\/p>\n<h5>Changes in Strict Mode<\/h5>\n<p>Use of <code>&#039;strict mode&#039;<\/code> modifies both the syntax and runtime behavior. More detailed information are available in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode#strict-mode-in-browsers\" target=\"_blank\" rel=\"noopener\">Mozilla Development Network.<\/a><\/p>\n<h5>Browser Support for Strict Mode<\/h5>\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener\">Most modern browser support strict mode<\/a>. However, it is advised to test in browsers before use. For more information about browser compatibility refer this comprehensive <a href=\"https:\/\/kangax.github.io\/compat-table\/es6\/\" target=\"_blank\" rel=\"noopener\">ECMAScript Compatibility Table on GitHub<\/a> before use.<\/p>\n<h6>Resources &amp; Further Reading:<\/h6>\n<p>While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode#strict-mode-in-browsers\" target=\"_blank\" rel=\"noopener\">Strict Mode<\/a> &#8211; Mozilla Development Network<\/li>\n<li><a href=\"https:\/\/medium.freecodecamp.org\/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81\" target=\"_blank\" rel=\"noopener\">5 JavaScript \u201cBad\u201d Parts That Are Fixed In\u00a0ES6<\/a> &#8211; rajaraodv (medium)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This post is work-in-progress learning-note and still in active development and updated regularly. JavaScript, since introduced in 1995, has been evolving without much compatibility issues and standardized script rules. In ECMAScript 5 (ES5), new features, syntax rules including Strict Mode feature were added in the language. In MDN, Strict Mode\u00a0 is referred as a way [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[32],"tags":[],"class_list":["post-462","post","type-post","status-publish","format-standard","hentry","category-ecmascript-es6"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/comments?post=462"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/462\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}