{"id":4110,"date":"2021-11-21T09:28:33","date_gmt":"2021-11-21T03:58:33","guid":{"rendered":"https:\/\/www.interviewbit.com\/blog\/?p=4110"},"modified":"2023-08-16T13:20:23","modified_gmt":"2023-08-16T07:50:23","slug":"javascript-features","status":"publish","type":"post","link":"https:\/\/www.interviewbit.com\/blog\/javascript-features\/","title":{"rendered":"Top JavaScript Features You Must Know"},"content":{"rendered":"\n<div class=\"gutentoc tocactive ullist\"><div class=\"gutentoc-toc-wrap\"><div class=\"gutentoc-toc-title-wrap\"><div class=\"gutentoc-toc-title\">Table Of Contents<\/div><div id=\"open\" class=\"text_open\">show<\/div><\/div><div id=\"toclist\"><div class=\"gutentoc-toc__list-wrap\"><ul class=\"gutentoc-toc__list\"><li><a href=\"#introduction\">Introduction<\/a><\/li><li><a href=\"#what-is-javascript\">What is Javascript?<\/a><\/li><li><a href=\"#top-features-of-javascript\">Top Features of JavaScript<\/a><\/li><ul class=\"gutentoc-toc__list\"><li><a href=\"#general-language-features\">General language features<\/a><\/li><li><a href=\"#language-use-features\">Language Use Features<\/a><\/li><li><a href=\"#prototype-based\">Prototype-based<\/a><\/li><li><a href=\"#experimental-amp-newer-features\">Experimental &amp; Newer features<\/a><\/li><\/ul><li><a href=\"#conclusion\">Conclusion<\/a><\/li><li><a href=\"#faq\u2019s\">FAQ\u2019s<\/a><\/li><li><a href=\"#additional-resources\">Additional Resources<\/a><\/li><\/ul><\/div><\/div><\/div><\/div>\n\n\n\n<h2 id=\"introduction\">Introduction<\/h2>\n\n\n\n<p>JavaScript is one of the most popular languages and has a host of handy features for web development. On GitHub, it\u2019s among the highest volumes of code is written in repositories across all users. In fact, according to Stack Overflow, nearly 70% of professional developers who responded to the 2020 survey coded in JavaScript. JavaScript has been the most-used technology since Stack Overflow started doing the annual poll. The reason for this overwhelming popularity of JavaScript is three-part.&nbsp;<\/p>\n\n\n\n<p>First is its ability to be used in all aspects of web development, as in front-end and back-end. This versatility makes it possible to make a web application using only javascript.<\/p>\n\n\n\n<p>Second, its nature as a scripting language makes its syntax easy to understand; also, there is no particular setup required to run it, as it runs on the browser readily. This ease in running JavaScript makes it popular for doing small odd tasks using scripts.<\/p>\n\n\n\n<p>Third, because of the first two points, it has strong community support. A vast community makes it so that there are a lot of open-source libraries available for free use. As the number of open-source, public libraries increases, so does the number of users, increasing community support.<\/p>\n\n\n\n<p>The only prerequisite to learning JavaScript is basic computer literacy and a basic understanding of HTML and CSS.<\/p>\n\n\n\n<h2 id=\"what-is-javascript\">What is Javascript?<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img  loading=\"lazy\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"What Is JavaScript?\"  class=\"wp-image-2799 pk-lazyload\"  width=\"354\"  height=\"354\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 354px) 100vw, 354px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-1024x1024.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-1024x1024.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-300x300.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-150x150.png 150w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-768x768.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-1536x1536.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-80x80.png 80w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-110x110.png 110w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-380x380.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-550x550.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-800x800.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript-1160x1160.png 1160w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/10\/What-Is-JavaScript.png 2048w\" ><\/figure><\/div>\n\n\n\n<p>At a high level, JavaScript is a scripting or programming language that allows you to implement complex features on web pages. The HTML you write only creates a static page on the web, so every time a web page does more than just display static information for you to look at; it is using javascript to enhance the page\u2019s functionality! To display content updates promptly, interactive interfaces for maps, animated 2D\/3D graphics, scrolling video jukeboxes, etc., we can use JavaScript. It is the third layer in the cake of standard web technologies, the other two of which are HTML and CSS<\/p>\n\n\n\n<h2 id=\"top-features-of-javascript\">Top Features of JavaScript<\/h2>\n\n\n\n<p>Below are a few features of JavaScript based on general features, language use, and experimental features.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img  loading=\"lazy\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  class=\"wp-image-4254 pk-lazyload\"  width=\"351\"  height=\"512\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 351px) 100vw, 351px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-11-702x1024.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-11-702x1024.png 702w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-11-206x300.png 206w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-11-380x554.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-11-550x802.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-11.png 754w\" ><\/figure>\n\n\n\n<h3 id=\"general-language-features\">General language features<\/h3>\n\n\n\n<h4 id=\"scripting-language\">Scripting Language<\/h4>\n\n\n\n<p>JavaScript is a lightweight scripting language made for client-side execution on the browser. Since it is not designed as a general-purpose language and is specially engineered for web applications, the set of libraries is also geared primarily towards web applications.<\/p>\n\n\n\n<h4 id=\"interpreter-based\">Interpreter Based<\/h4>\n\n\n\n<p>JavaScript is an interpreted language instead of a compiled one. In that sense, it is closer to languages like Ruby and Python. The browser interprets JavaScript\u2019s source code, line by line and runs it. In contrast, a compiled language needs to be compiled into a byte-code code executable. Java and C++ are examples of compiled languages.<\/p>\n\n\n\n<h4 id=\"event-handling\">Event Handling<\/h4>\n\n\n\n<p>An event is an action or an occurrence in a system that communicates about said occurrence so that you can respond to it somehow. For example, a user clicks on a button, and the system tells you to respond to the button click event with an action, say an information box.<\/p>\n\n\n\n<p>JavaScript enables you to handle events and even generate custom events.<\/p>\n\n\n\n<h4 id=\"light-weight\">Light Weight<\/h4>\n\n\n\n<p>JavaScript isn\u2019t a compiled language, so it doesn\u2019t get converted to byte-code beforehand. However, it does follow a paradigm called Just-In-Time (JIT) Compilation. Meaning it gets converted to bytecode just as it\u2019s about to run. This enables JS to be lightweight. Even less powerful devices are capable of running JavaScript.<\/p>\n\n\n\n<h4 id=\"case-sensitive\">Case Sensitive<\/h4>\n\n\n\n<p>JavaScript is highly case sensitive. All keywords, variables, functions names and other identifiers can and must only follow a consistent capitalisation of letters. E.g.:<\/p>\n\n\n\n<p><em>var hitCounter = 5<\/em><br><em>var hitcounter = 5<\/em><\/p>\n\n\n\n<p>Here variables <em>hitCounter<\/em> and <em>hitcounter<\/em> are both different variables because of the difference in the case. Also, all keywords such as \u201cvar\u201d are case sensitive.<\/p>\n\n\n\n<h4 id=\"control-statements\">Control Statements<\/h4>\n\n\n\n<p>JavaScript is equipped with control statements like if-else-if, switch-case, and loops like for, while, and do-while loops. These control statements make it a powerful programming language, enabling its user to write complex logic.<\/p>\n\n\n\n<h4 id=\"objects-as-first-class-citizens\">Objects as first-class citizens<\/h4>\n\n\n\n<p>All non-primitive data types in JavaScript are actually objects, i.e. data types like Arrays, Functions, Symbols etc. inherit all the properties of the Object prototype.<\/p>\n\n\n\n<p>The term first-class citizen means \u201cbeing able to do what everyone else can do\u201d. In JavaScript Objects prototype is the base prototype of all. They can be passed as reference, returned in a function, and assigned to variables for manipulation. This concept is also extended to functions as Object is also the prototype of functions.<\/p>\n\n\n\n<h4 id=\"functions-as-first-class-citizenssupports-functional-programming\">Functions as First-class citizens(supports functional programming)<\/h4>\n\n\n\n<p>What do we mean by functions as first-class objects\/citizens? Functions that return a function are called Higher Order Functions, which JavaScript supports. Functions as first-class citizens simply mean functions enjoy similar behaviour from the JavaScript interpreter as that of objects or any other variable. Meaning, we can pass them into arguments (pass by reference), return them by another function, and assign them to a variable as a value.<\/p>\n\n\n\n<h4 id=\"dynamic-typing\">Dynamic Typing<\/h4>\n\n\n\n<p>JavaScript is a dynamically typed language. It means that the JS interpreter does not require explicit declaration of the variables before they are used. E.g.:<\/p>\n\n\n\n<p><em>var dynamicType = \u201ca string\u201d<\/em><br><em>dynamicType = 5<\/em><\/p>\n\n\n\n<p>Here we can see the same variable <em>dynamicType <\/em>can contain either a string or an integer with the same variable declaration. That is, the variable type does not need to be declared during creation or assignment.<\/p>\n\n\n\n<h3 id=\"language-use-features\">Language Use Features<\/h3>\n\n\n\n<h4 id=\"client-side-validations\">Client-side validations<\/h4>\n\n\n\n<p>JavaScript is heavily used for easing the interactions between users and web applications. Towards this, validation plays a significant role. Validations can guide users to fill forms correctly with valid data and prevent spam submissions.&nbsp;<\/p>\n\n\n\n<h4 id=\"platform-independent\">Platform Independent<\/h4>\n\n\n\n<p>JavaScript is platform-independent; it can run on any computer irrespective of the operating systems used. JavaScript is built into Netscape 2.0 and greater. Since the JavaScript interpreter is part of Netscape, it runs on platforms that support Netscape, which means that a piece of Javascript code will give the same output with the same setup on all platforms.<\/p>\n\n\n\n<h4 id=\"async-processing\">Async Processing<\/h4>\n\n\n\n<p>JavaScript supports asynchronous behaviour through the use of Promises and Async functions. In Promises, we can make a request and attach a .then() clause to it, which only executes on the completion of the promise. The other alternative is to use the async-await syntax functions; async functions don\u2019t execute sequentially but parallelly, which positively affects pages\u2019 processing time and responsiveness.<\/p>\n\n\n\n<h3 id=\"prototype-based\">Prototype-based<\/h3>\n\n\n\n<p>JavaScript is a prototype-based scripting language, which means it uses the prototypal inheritance model instead of the commonly known class inheritance. This means instead of creating classes and deriving objects from them, we define the Objects prototype and use this object prototype to create more Objects of the same type. This behaviour is similar to the Object factory method, and thus such a design pattern is commonly seen in JavaScript code.<\/p>\n\n\n\n<h3 id=\"experimental-amp-newer-features\"><span id=\"experimental-newer-features\">Experimental &amp; Newer features<\/span><\/h3>\n\n\n\n<p>Here are a few more unique features of javascript; these features are handy for professional developers and assist in writing idiomatic code. Some of these features do not come out of the box. In those cases, you need a transpiler like <a href=\"https:\/\/babeljs.io\/\">Babel<\/a> to run them.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Nullish_coalescing_operator\" target=\"_blank\" rel=\"noreferrer noopener\">Nullish coalescing operator (??)<\/a><\/strong><\/p>\n\n\n\n<p>According to MDN: \u201cThe nullish coalescing operator ( ?? ) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand\u201d. This handy feature allows for distinction between 0 and null\/undefined values, which is necessary during calculations! For example &#8211;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function addTax(price, taxes, description) {\n  \/\/ 10% or 0.1 is default tax  \n  taxes = taxes || 0.1\n  \/\/ What if taxes are 0%, that could be a problem.\n  const total = price * (1 + taxes)\n  console.log(\n    `%c${description} with tax, totals to: ${total}`,\n    \"font-weight: bold; color: blue\"\n  )\n}\n\naddTax(100, 0.3, \"An item\")\naddTax(100, undefined, \"Default tax\")\naddTax(100, 0, \"Zero tax\")<\/pre>\n\n\n\n<p>In the example above, in the third case of no tax, we can see that the answer is wrong! The total should be 100 as the intention is to have no tax on this item. But as we can see, JavaScript treats the 0 value as false, thus assigning taxes a value of 0.1 instead of 0.<\/p>\n\n\n\n<p>We can simply fix this by using the Nullish coalescing operator, like so:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function addTax(price, taxes, description) {\n  \/\/ 10% or 0.1 is default tax  \n  taxes = taxes ?? 0.1\n  const total = price * (1 + taxes)\n  console.log(\n    `%c${description} with tax, totals to: ${total}`,\n    \"font-weight: bold; color: blue\"\n  )\n}\n\naddTax(100, 0.3, \"An item\")\naddTax(100, undefined, \"Default tax\")\naddTax(100, 0, \"Zero tax\")<\/pre>\n\n\n\n<p>The ?? operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined; therefore, we get the correct value for taxes.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_nullish_assignment\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Logical nullish assignment (??=)<\/strong><\/a><\/p>\n\n\n\n<p>The Logical nullish assignment is simply the shorthand for the line of code:<\/p>\n\n\n\n<p><em>taxes = taxes ?? 0.1<\/em><\/p>\n\n\n\n<p><strong>Styling Console Log<\/strong><\/p>\n\n\n\n<p>It is possible to style your console logs in javascript; that is, you can apply styling to your boring and static console logs! The syntax is simple, add a %c to what you want to style and pass the styles you want to apply as the second parameter:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">console.log(\n    `%c${description} with tax, totals to: ${total}`,\n    \"font-weight: bold; color: blue\"\n  )\n\nTo add more styles, just add another %c and another parameter like so:\n\n  console.log(\n    `%c${description} with tax, totals to: %c${total}`,\n    \"font-weight: bold; color: blue\",\n    \"font-weight: bold; color: green\"\n  )<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"1024\"  height=\"959\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  class=\"wp-image-4255 pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 1024px) 100vw, 1024px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12-1024x959.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12-1024x959.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12-300x281.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12-768x719.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12-380x356.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12-550x515.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12-800x749.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12-1160x1087.png 1160w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image1-12.png 1168w\" ><\/figure>\n\n\n\n<p><strong>Object Shorthand<\/strong><\/p>\n\n\n\n<p>According to ES6\/ES2015 syntax, if you want to define an object whose keys have the same name as the variables passed in as properties, you can use the shorthand and simply pass the key name. The object shorthand allows you to save time and space by allowing you to use this shorthand, making the code more idiomatic and concise:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"1024\"  height=\"248\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  alt=\"\"  class=\"wp-image-4256 pk-lazyload\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 1024px) 100vw, 1024px\"  data-pk-src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-1024x248.png\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-1024x248.png 1024w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-300x73.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-768x186.png 768w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-1536x372.png 1536w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-380x92.png 380w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-550x133.png 550w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-800x194.png 800w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5-1160x281.png 1160w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image3-5.png 1999w\" ><\/figure>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\"><strong>Optional chaining (?.)<\/strong><\/a><\/p>\n\n\n\n<p>Optional Chaining, also commonly known as null safe traversal, is a feature similar to nullish coalescing but exponentially more helpful as it solves a prevalent issue. Suppose there is an object with nested properties, as is often common in JS. E.g.:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const peter = {\n  name: 'Peter',\n  address: {\n    street: 'church street',\n    apt: 'Parker'\n  }\n}\n\nfunction printStreet(person) {\n  console.log(person &amp;&amp; person.address &amp;&amp; person.address.street)\n}\nprintStreet(peter)<\/pre>\n\n\n\n<p>The old way of checking whether an object exists.<\/p>\n\n\n\n<p>If you want to print the street, you will have to check the property at each level in the object for undefined cause if any of the properties are not defined. JS will throw an error saying that \u201ccannot read property X of undefined\u201d, to avoid this, we need to do a null safe traversal of the object.<\/p>\n\n\n\n<p><strong>Defer\/Async Loading<\/strong><\/p>\n\n\n\n<p>The script tag attributes <em>async<\/em> and <em>defer<\/em> are features that tackle page load time issues for heavy <em>scripts<\/em>; both will download the file during HTML parsing, allowing faster load times. Both do not interrupt the parser.<\/p>\n\n\n\n<ul><li>The script with the async attribute will be executed once downloaded, irrespective of the order in which they are written. Therefore, the order of execution isn\u2019t guaranteed.&nbsp;<\/li><li>On the other hand, the script with defer attribute will be executed after completing the DOM parsing, respecting the order in which script tags are mentioned. Therefore scripts loaded with defer attributes maintain the order in which they appear on the DOM.<\/li><\/ul>\n\n\n\n<p>Use &lt;script async&gt; when the script is independent(has no dependency). When the script depends, use &lt;script defer&gt;.<\/p>\n\n\n\n<p>The best solution regarding dependency would be to add the &lt;script&gt; at the bottom of the body. There will be no issue with blocking or rendering.<\/p>\n\n\n\n<p>Typically, we put out script tags at the bottom of the body(left image). This allows the HTML to parse before scripts are loaded, which is vital because your JS has to plug into the existing HTML. If you put your scripts in the head, they will load faster, but the <em>script<\/em> won&#8217;t attach itself to the HTML since the HTML parsing was interrupted to load the script.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped\">\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"419\"  height=\"230\"  data-id=\"4257\"   src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image2-6.png\"  alt=\"\"  class=\"wp-image-4257 pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 419px) 100vw, 419px\"  data-pk-src=\"\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image2-6.png 419w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image2-6-300x165.png 300w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image2-6-380x209.png 380w\" ><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img  loading=\"lazy\"  width=\"371\"  height=\"221\"  data-id=\"4258\"   src=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image5.png\"  alt=\"\"  class=\"wp-image-4258 pk-lazyload\"  src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\"  data-pk-sizes=\"auto\"  data-ls-sizes=\"(max-width: 371px) 100vw, 371px\"  data-pk-src=\"\"  data-pk-srcset=\"https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image5.png 371w, https:\/\/www.interviewbit.com\/blog\/wp-content\/uploads\/2021\/11\/image5-300x179.png 300w\" ><\/figure>\n<\/figure>\n\n\n\n<h2 id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>Many of the Features of Javascript are unique and quirky as they were results from partial defects\/bugs written into the core of the language. Others are the result of trying to mimic the features of languages like Java and its Object-Oriented programming concepts (Oops). Yet more features are a result of it intended as a scripting language. The governing body for Javascript is ECMA was established in 2009. Earlier than 2009, in the starting years of JavaScript, it was not developed according to a road map but as per its adopted use cases.<\/p>\n\n\n\n<h2 id=\"faq\u2019s\"><span id=\"faqs\">FAQ\u2019s<\/span><\/h2>\n\n\n\n<p><strong>Q. Why is JavaScript the best?<\/strong><br>A. There are a few reasons why learning JavaScript is best:<\/p>\n\n\n\n<ol><li>It is better for website development<\/li><li>Experienced developers are more likely to know or require JavaScript<\/li><li>It is easy to learn<\/li><li>Its the most popular programming language<\/li><\/ol>\n\n\n\n<p>Why wait? Do check out this Free <a rel=\"noreferrer noopener\" href=\"https:\/\/www.scaler.com\/topics\/course\/javascript-beginners\/\" target=\"_blank\">JavaScript course<\/a> from Scaler Topics and learn JavaScript from scratch. <\/p>\n\n\n\n<p><strong>Q. Where is JavaScript used?<\/strong><br>A. Its most commonly used to create web pages. It helps to add dynamic behaviour to the web pages, such as validations, special effects and other complex interactions between users and web pages.<\/p>\n\n\n\n<p><strong>Q. What are the limitations of JavaScript?<\/strong><br>A. JavaScript can be used on the Frontend and Backend (using Node.js), however, there are certain scenarios where JavaScript is not suited for development.<\/p>\n\n\n\n<ul><li>If you want to do some compute-intensive tasks or calculations, JavaScript will cause latency and delay. This is also called the blocking-nature of JavaScript.<\/li><li>If you need multiple threads or multiprocessor capabilities, JavaScript is not suited to you. JavaScript is single-threaded and is best suited for async tasks.<\/li><li>Client-side JavaScript cannot read or write files by default.<\/li><\/ul>\n\n\n\n<p><strong>Q. What is unique about JavaScript?<\/strong><br>A. JavaScript is a flexible and powerful programming language implemented consistently by various browsers, making it very portable. It\u2019s the most used and most easily accessible language. To run a piece of Js code, you just need a browser. Apart from that, it makes responsive design easier for web apps.<\/p>\n\n\n\n<p><strong>Q. How does JavaScript work?<\/strong><br>A. The basic flow is that you add script tags in your HTML, typically at the end of the body; this loads the js when your HTML is done parsing. The interpreter picks the downloaded code and runs it in the order the script tags are written.<\/p>\n\n\n\n<h2 id=\"additional-resources\">Additional Resources<\/h2>\n\n\n\n<ul><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/javascript-interview-questions\/\" target=\"_blank\">Javascript Interview Questions<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/online-javascript-compiler\/\" target=\"_blank\">Online Javascript Compiler<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/javascript-projects\/\" target=\"_blank\">Javascript Projects<\/a><\/li><li><a href=\"https:\/\/www.interviewbit.com\/blog\/best-javascript-books\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript Books<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/top-javascript-libraries\/\" target=\"_blank\">Top JavaScript Libraries<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/javascript-ide\/\" target=\"_blank\">JavaScript IDE<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/javascript-frameworks\/\" target=\"_blank\">JavaScript Frameworks<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/difference-between-html-and-javascript\/\" target=\"_blank\">Difference Between HTML and JavaScript<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/javascript-vs-jquery\/\" target=\"_blank\">Javascript vs JQuery<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/javascript-vs-python\/\" target=\"_blank\">Javascript Vs Python<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/difference-between-java-and-javascript\/\" target=\"_blank\">Java vs Javascript<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.interviewbit.com\/blog\/typescript-vs-javascript\/\" target=\"_blank\">Typescript vs Javascript<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"Introduction JavaScript is one of the most popular languages and has a host of handy features for web&hellip;\n","protected":false},"author":4,"featured_media":4252,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_daextam_enable_autolinks":"1","csco_singular_sidebar":"","csco_page_header_type":"","csco_appearance_grid":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_location_hash":"","csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0},"categories":[532],"tags":[606],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/posts\/4110"}],"collection":[{"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/comments?post=4110"}],"version-history":[{"count":9,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/posts\/4110\/revisions"}],"predecessor-version":[{"id":22821,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/posts\/4110\/revisions\/22821"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/media\/4252"}],"wp:attachment":[{"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/media?parent=4110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/categories?post=4110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.interviewbit.com\/blog\/wp-json\/wp\/v2\/tags?post=4110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}