{"id":385,"date":"2022-02-04T02:11:50","date_gmt":"2022-02-04T02:11:50","guid":{"rendered":"http:\/\/codebitshub.com\/?p=385"},"modified":"2022-02-05T20:20:39","modified_gmt":"2022-02-05T20:20:39","slug":"what-is-a-class-javascript","status":"publish","type":"post","link":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/","title":{"rendered":"The Insider&#8217;s Guide to What Is A Class In Javascript"},"content":{"rendered":"<p style=\"text-align: justify;\">One of the keys for understanding, what is a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener\">class<\/a> in javascript is the prototypical inheritance and prototypes. You can read more about prototypes in this <a href=\"http:\/\/codebitshub.com\/javascript-prototypes\" target=\"_blank\" rel=\"noopener\">article.<\/a><\/p>\n<p style=\"text-align: justify;\">Javascript classes were introduced in ECMAScript 2015 version (ES6) and are templates for Javascript Objects.<\/p>\n<p style=\"text-align: justify;\">You can consider javascript classes as just syntactical sugar on top of prototypical inheritance that derives new classes from other classes.<\/p>\n<p style=\"text-align: justify;\">Their usage is to provide a cleaner and easier way to develop Object Oriented concepts.<\/p>\n<p style=\"text-align: justify;\">Before the introduction of javascript classes, the developers used to use <a href=\"http:\/\/codebitshub.com\/this-in-javascript\/#Constructor_invocation\" target=\"_blank\" rel=\"noopener\">Function Constructors<\/a> for this reason.<\/p>\n<p style=\"text-align: justify;\">In this article, you are going to learn what is a class in javascript through examples in various use cases.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#Definition\" >Definition<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#Class_declaration\" >Class declaration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#Class_expression\" >Class expression<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#Inheritance\" >Inheritance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#Getters_and_Setters_methods\" >Getters and Setters methods<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#Hoisting\" >Hoisting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#Strict_mode\" >Strict mode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Definition\"><\/span>Definition<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">There are two ways to define a class. These are using a class declaration and class expression.<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Class_declaration\"><\/span>Class declaration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">You can define a javascript class using the keyword <strong>class<\/strong> and a <strong>name<\/strong> for the class. A class body can contain methods and properties.<\/p>\n<p style=\"text-align: justify;\">Furthermore, a class has to contain a special constructor method that you can use to instantiate an object that will follow the class&#8217;s structure.<\/p>\n<p style=\"text-align: justify;\">To instantiate an object using a class you have to use the keyword <strong>new<\/strong>, the <strong>name<\/strong> of the class, and to pass any required <strong>arguments<\/strong> to the constructor method.<\/p>\n<p style=\"text-align: justify;\">Let\u2019s see a simple example.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"GROjGLR\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/GROjGLR\"><br \/>\nUntitled<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">As you can see in the code above, I defined a class named <strong>Dogs<\/strong> with the properties <strong>eats<\/strong>, <strong>num_of_legs<\/strong>, <strong>sound<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Additionally, I created an object named <strong>my_dog<\/strong> with the values &#8220;<strong>meat<\/strong>&#8220;, <strong>4,<\/strong> and &#8220;<strong>barks<\/strong>&#8220;.<\/p>\n<p style=\"text-align: justify;\">Finally, I defined a method named <strong>getInfo<\/strong> that will return all the properties of the class concatenated as a string as you can see below<\/p>\n<p style=\"text-align: justify; border: yellow 5px solid; padding: 5px; background-color: #ffffcc;\">info eats: meat, sound: barks, num_of_legs: 4<\/p>\n<h3 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Class_expression\"><\/span>Class expression<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: justify;\">The second way to define a class is using a class expression. Class expressions can be named or unnamed.<\/p>\n<p style=\"text-align: justify;\">Let\u2019s see an example.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"zYPKLOL\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/zYPKLOL\"><br \/>\nclass expression<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Inheritance\"><\/span>Inheritance<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Inheritance is a concept that is common in Object-Oriented languages like Java and C++. In javascript, a class can be extended and inherit methods and properties from its parent class.<\/p>\n<p style=\"text-align: justify;\">Let\u2019s see an example.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"jOaMpEw\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/jOaMpEw\"><br \/>\ninheritance<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>As you can see in the code above, I have two classes where the class <strong>My_Dogs<\/strong> extends the class <strong>Dogs<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Each class has a constructor method. The class <strong>My_Dogs<\/strong> will call and pass all the required arguments to the constructor method of the <strong>Dogs<\/strong> class.<\/p>\n<p style=\"text-align: justify;\">Furthermore, in the class <strong>My_Dogs<\/strong> I defined the <strong>getDetails<\/strong> method.<\/p>\n<p style=\"text-align: justify;\">The object <strong>my_dogs<\/strong> will inherit all the properties\/methods of the <strong>Dogs<\/strong> class plus its own.<\/p>\n<p style=\"text-align: justify;\">Finally, you can notice in the logs that the prototype of <strong>My_Dogs<\/strong> class is the <strong>Dogs<\/strong> class.<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Getters_and_Setters_methods\"><\/span>Getters and Setters methods<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">Getters and setters methods are useful to define <strong>dynamically computed property values<\/strong> of an object.<\/p>\n<p style=\"text-align: justify;\">The <strong>get<\/strong> syntax binds an object property to a function that you can invoke in order to compute and return the dynamically computed value.<\/p>\n<p style=\"text-align: justify;\">Similarly, the <strong>set<\/strong> syntax binds an object property to a function that you can invoke in order to save a dynamically computed value.<\/p>\n<p style=\"text-align: justify;\">There is no need to call the function directly. Both methods are creating a type of pseudo-property.<\/p>\n<p style=\"text-align: justify;\">Let\u2019s see some examples in objects.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"abVmjOQ\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/abVmjOQ\"><br \/>\ngetters-setters-objects<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p style=\"text-align: justify;\">Likewise, you can use getters and setters methods in classes.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"LYORBpv\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/LYORBpv\"><br \/>\ngetters-setters-classes<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>You can see in the code above that I defined a class with the name <strong>TestSum<\/strong>.<\/p>\n<p>Next, I declared a constructor method that I used to instantiate the object <strong>testSum<\/strong>.<\/p>\n<p>Additionally, I declared the methods <strong>getSum<\/strong>, <strong>isCorrect<\/strong> (getters), and the method <strong>setSum<\/strong> (setter).<\/p>\n<p>As a result, the <strong>getSum<\/strong> method returns the sum of the two numbers a, b.<\/p>\n<p>Furthermore, you can use the setter method <strong>setSum<\/strong> to give an answer of the sum of the two numbers a,b.<\/p>\n<p>Finally, the getter method <strong>isCorrect<\/strong> will check if your answer is correct or wrong and will log in the output the result.<\/p>\n<p style=\"text-align: justify; border: yellow 5px solid; padding: 5px; background-color: #ffffcc;\">4<br \/>\nYour answer is: correct<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Hoisting\"><\/span>Hoisting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">JavaScript Hoisting is the process that takes place when the interpreter moves the declaration of functions, variables, or classes to the top of their scope, before the execution of the code.<\/p>\n<p style=\"text-align: justify;\">Classes that you define using a class declaration are hoisted. The difference is that the class is not initialized by default.<\/p>\n<p style=\"text-align: justify;\">So if you try to execute it before the class initialization you will get a <strong>ReferenceError<\/strong> error.<\/p>\n<p style=\"text-align: justify;\">Similarly, if you want to instantiate an object using a class expression you will have to define the class first.<\/p>\n<p style=\"text-align: justify;\">As a result, if you try to instantiate an object before the line that you define the class then you will get a <strong>ReferenceError<\/strong>.<\/p>\n<p>Let&#8217;s see an example.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"gOXwdXz\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/gOXwdXz\"><br \/>\nUntitled<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>If you run the code above you will get the following ReferenceError in the logs.<\/p>\n<p style=\"text-align: justify; border: yellow 5px solid; padding: 5px; background-color: #ffffcc;\">Uncaught ReferenceError: Cannot access &#8216;Dogs&#8217; before initialization<\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"Strict_mode\"><\/span>Strict mode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\">You will have to remember that the javascript engine will always execute the body of a class in strict mode. So it is subject to stricter syntax, error checking, and performance optimizations.<\/p>\n<p>Let&#8217;s see an example.<\/p>\n<p class=\"codepen\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"300\" data-default-tab=\"js\" data-slug-hash=\"rNYMZKO\" data-user=\"codebitshub\">See the Pen <a href=\"https:\/\/codepen.io\/codebitshub\/pen\/rNYMZKO\"><br \/>\nstrict mode in classes<\/a> by codebitshub (<a href=\"https:\/\/codepen.io\/codebitshub\">@codebitshub<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>As you can see in the code above the parameter <strong>eats<\/strong> is declared twice. That will throw a <strong>SyntaxError<\/strong> as you can see in the logs.<\/p>\n<p style=\"text-align: justify; border: yellow 5px solid; padding: 5px; background-color: #ffffcc;\">Uncaught SyntaxError: Duplicate parameter name not allowed in this context<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let&#8217;s summarize what you have learned so far.<\/p>\n<ul>\n<li>Classes in javascript are syntactical sugar for creating new objects with a similar structure.<\/li>\n<li>Each new object will share similar properties and methods<\/li>\n<li>You can define classes using class declarations and class expressions.<\/li>\n<li>You can extend a class and inherit properties and methods from its parent class.<\/li>\n<li>Classes and objects can have getters and setters methods which are a type of pseudo-properties.<\/li>\n<li>Even though classes are hoisted you will have to instantiate an object first.<\/li>\n<li>The body of a class is always executed in strict mode.<\/li>\n<\/ul>\n<p>Happy coding!<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the keys for understanding, what is a class in javascript is the prototypical inheritance and prototypes. You can read more about prototypes in this article. Javascript classes were introduced in ECMAScript 2015 version (ES6) and are templates for Javascript Objects. You can consider javascript classes as just syntactical sugar on top of prototypical [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11],"tags":[17],"post_folder":[],"class_list":["post-385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-languages","tag-javascript","post-list-post__standard"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Insider&#039;s Guide to What Is A Class In Javascript - codebitshub.com<\/title>\n<meta name=\"description\" content=\"The Insider&#039;s Guide to What Is A Class In Javascript Javascript classes are templates for creating objects with a similar structure\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Insider&#039;s Guide to What Is A Class In Javascript - codebitshub.com\" \/>\n<meta property=\"og:description\" content=\"The Insider&#039;s Guide to What Is A Class In Javascript Javascript classes are templates for creating objects with a similar structure\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codebitshub.com\/what-is-a-class-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"codebitshub.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-04T02:11:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-05T20:20:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1125\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myapos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myapos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/\"},\"author\":{\"name\":\"myapos\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\"},\"headline\":\"The Insider&#8217;s Guide to What Is A Class In Javascript\",\"datePublished\":\"2022-02-04T02:11:50+00:00\",\"dateModified\":\"2022-02-05T20:20:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/\"},\"wordCount\":1033,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"keywords\":[\"javascript\"],\"articleSection\":[\"Programming Languages\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/\",\"name\":\"The Insider's Guide to What Is A Class In Javascript - codebitshub.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"datePublished\":\"2022-02-04T02:11:50+00:00\",\"dateModified\":\"2022-02-05T20:20:39+00:00\",\"description\":\"The Insider's Guide to What Is A Class In Javascript Javascript classes are templates for creating objects with a similar structure\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/what-is-a-class-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codebitshub.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Insider&#8217;s Guide to What Is A Class In Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"name\":\"codebitshub.com\",\"description\":\"A blog about programming and coding\",\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codebitshub.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\",\"name\":\"codebitshub.com\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\",\"name\":\"myapos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"caption\":\"myapos\"},\"url\":\"https:\\\/\\\/codebitshub.com\\\/author\\\/myapos\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Insider's Guide to What Is A Class In Javascript - codebitshub.com","description":"The Insider's Guide to What Is A Class In Javascript Javascript classes are templates for creating objects with a similar structure","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:\/\/codebitshub.com\/what-is-a-class-javascript\/","og_locale":"en_US","og_type":"article","og_title":"The Insider's Guide to What Is A Class In Javascript - codebitshub.com","og_description":"The Insider's Guide to What Is A Class In Javascript Javascript classes are templates for creating objects with a similar structure","og_url":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/","og_site_name":"codebitshub.com","article_published_time":"2022-02-04T02:11:50+00:00","article_modified_time":"2022-02-05T20:20:39+00:00","og_image":[{"width":1920,"height":1125,"url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","type":"image\/jpeg"}],"author":"myapos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myapos","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#article","isPartOf":{"@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/"},"author":{"name":"myapos","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61"},"headline":"The Insider&#8217;s Guide to What Is A Class In Javascript","datePublished":"2022-02-04T02:11:50+00:00","dateModified":"2022-02-05T20:20:39+00:00","mainEntityOfPage":{"@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/"},"wordCount":1033,"commentCount":0,"publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"image":{"@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","keywords":["javascript"],"articleSection":["Programming Languages"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codebitshub.com\/what-is-a-class-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/","url":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/","name":"The Insider's Guide to What Is A Class In Javascript - codebitshub.com","isPartOf":{"@id":"https:\/\/codebitshub.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","datePublished":"2022-02-04T02:11:50+00:00","dateModified":"2022-02-05T20:20:39+00:00","description":"The Insider's Guide to What Is A Class In Javascript Javascript classes are templates for creating objects with a similar structure","breadcrumb":{"@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codebitshub.com\/what-is-a-class-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#primaryimage","url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},{"@type":"BreadcrumbList","@id":"https:\/\/codebitshub.com\/what-is-a-class-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codebitshub.com\/"},{"@type":"ListItem","position":2,"name":"The Insider&#8217;s Guide to What Is A Class In Javascript"}]},{"@type":"WebSite","@id":"https:\/\/codebitshub.com\/#website","url":"https:\/\/codebitshub.com\/","name":"codebitshub.com","description":"A blog about programming and coding","publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codebitshub.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codebitshub.com\/#organization","name":"codebitshub.com","url":"https:\/\/codebitshub.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/","url":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},"image":{"@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61","name":"myapos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","caption":"myapos"},"url":"https:\/\/codebitshub.com\/author\/myapos\/"}]}},"_links":{"self":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/comments?post=385"}],"version-history":[{"count":5,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/385\/revisions"}],"predecessor-version":[{"id":387,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/385\/revisions\/387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media\/24"}],"wp:attachment":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media?parent=385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/categories?post=385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/tags?post=385"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/post_folder?post=385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}