{"id":1423,"date":"2021-10-09T04:12:22","date_gmt":"2021-10-09T04:12:22","guid":{"rendered":"https:\/\/usemynotes.com\/?p=1423"},"modified":"2023-06-14T15:33:15","modified_gmt":"2023-06-14T15:33:15","slug":"classes-in-javascript","status":"publish","type":"post","link":"https:\/\/usemynotes.com\/classes-in-javascript\/","title":{"rendered":"How to Create Classes in JavaScript?"},"content":{"rendered":"<p>Hi everyone, welcome back. In this module, I will be discussing <strong>classes in JavaScript<\/strong>. After reading this module, you will get to know what is a class in JavaScript &amp; how to create Classes in JavaScript. So, let\u2019s begin to know about it.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1424 size-full\" src=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/10\/classes-in-javascript.jpg\" alt=\"Classes in JavaScript\" width=\"1000\" height=\"700\" title=\"\" srcset=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/10\/classes-in-javascript.jpg 1000w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/10\/classes-in-javascript-300x210.jpg 300w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/10\/classes-in-javascript-768x538.jpg 768w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/10\/classes-in-javascript-150x105.jpg 150w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/10\/classes-in-javascript-696x487.jpg 696w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/10\/classes-in-javascript-600x420.jpg 600w, https:\/\/usemynotes.com\/wp-content\/uploads\/2021\/10\/classes-in-javascript-100x70.jpg 100w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 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 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#Classes_in_JavaScript\" >Classes in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#How_to_create_classes_in_JavaScript\" >How to create classes in JavaScript?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#Using_the_class_keyword_in_JavaScript\" >Using the class keyword in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#Using_class_expression_in_JavaScript\" >Using class expression in JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#How_to_create_objects_in_JavaScript\" >How to create objects in JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#What_is_a_constructor_in_JavaScript\" >What is a constructor in JavaScript?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#Creating_a_constructor_with_parameters\" >Creating a constructor with parameters.<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#Using_class_keyword_in_JavaScript\" >Using class keyword in JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/usemynotes.com\/classes-in-javascript\/#Using_class_expression_in_JavaScript-2\" >Using class expression in JavaScript<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Classes_in_JavaScript\"><\/span>Classes in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Like other object-oriented programming languages like <a href=\"https:\/\/usemynotes.com\/java-programming\/\">Java<\/a>, <a href=\"https:\/\/usemynotes.com\/python\/\">Python<\/a>, C++, etc., a class in JavaScript is a template for creating objects in JavaScript. It was introduced in ECMAScript 2015, which is also known as ES6. In other words, a class is a blueprint for JavaScript Objects that consist of attributes or member variables &amp; member functions or methods that manipulate and access these variables. These <a href=\"https:\/\/usemynotes.com\/what-are-variables-in-javascript\/\">variables<\/a> &amp; methods can be accessed by creating objects or instances of a class.<\/p>\n<p>An object is a real-world entity that has some characteristics &amp; behaviours. In programming languages, an object is an instance of a JavaScript class. Using class, we can create multiple objects or instances of a class of the same type.<\/p>\n<p>A class is a way of creating a user-defined data type that represents a group of objects that share common characteristics or properties &amp; behaviours.<br \/>\nNow, let\u2019s see how to create <strong>classes in JavaScript<\/strong>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_create_classes_in_JavaScript\"><\/span>How to create classes in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In JavaScript, we can define or create classes in two ways:<\/p>\n<ul>\n<li>Using class keyword.<\/li>\n<li>Using class expressions.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Using_the_class_keyword_in_JavaScript\"><\/span>Using the class keyword in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In JavaScript, we can create a class using the class keyword followed by the name of the class.<\/p>\n<p><strong>Syntax<\/strong><br \/>\nclass class_name{<br \/>\n\/\/ body of the class<br \/>\n}<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">class Demo {\r\n  fun(){\r\n    (&#039;hello&#039;);\r\n  }\r\n}<\/pre>\n<p>In the above example, fun() is an instance member function of a class.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Using_class_expression_in_JavaScript\"><\/span>Using class expression in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">let Demo = class {\r\n  fun() {\r\n    (&quot;hello&quot;);\r\n  }\r\n};<\/pre>\n<p>Now, let&#8217;s create objects in JavaScript.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_create_objects_in_JavaScript\"><\/span>How to create objects in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In JavaScript, we can create <a href=\"https:\/\/usemynotes.com\/object-in-javascript\/\">objects<\/a> using the new keyword.<\/p>\n<p><strong>Syntax<\/strong><br \/>\nlet object_name= new ClassName();<\/p>\n<p>Instead of using let, you can use either var or const for creating objects in JavaScript.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n  &lt;h1&gt;Creating a class in JavaScript&lt;\/h1&gt;\r\n&lt;script&gt;\r\n  class Demo {\r\n   fun(){\r\n   document.write(&#039;This is an example of creating classes in JavaScript.&#039;);\r\n  }\r\n}\r\n\/\/ creating object of Demo class\r\n  const obj=new Demo();\r\n  obj.fun();\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n\/\/Output\r\n\/\/This is an example of creating classes in JavaScript.<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"What_is_a_constructor_in_JavaScript\"><\/span>What is a constructor in JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A constructor is a special member function of a JavaScript class used for initializing properties or attributes of an object. When a new object of a class is created, it is executed automatically.<\/p>\n<p>A constructor method may or may not take parameters depending on the requirement.<br \/>\nA constructor in JavaScript is created using the constructor keyword.<\/p>\n<p>&lt;strong&gt;Syntax&lt;\/strong&gt;<br \/>\nclass class_name{<br \/>\nconstructor(){<br \/>\n\/\/ properties<br \/>\n}<br \/>\n}<\/p>\n<p>JavaScript will add an empty constructor method when you do not create a constructor inside a class.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">class Demo{\r\n  constructor(){\r\n    console.log(&#039;This is a constructor method.&#039;);\r\n  }\r\n}\r\nconst obj=new Demo();\r\n\r\n\/\/Output\r\n\/\/This is a constructor method.<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Creating_a_constructor_with_parameters\"><\/span>Creating a constructor with parameters.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">class Demo {\r\n  constructor(message) {\r\n   this.message = message;\r\n  }\r\n  show(){\r\n    console.log(`Message: ${this.message}`);\r\n  }\r\n}\r\nconst obj=new Demo(&quot;This is a constructor method with parameters.&quot;); obj.show();\r\n\r\n\/\/Output\r\n\/\/Message: This is a constructor method with parameters.<\/pre>\n<p>Now, let\u2019s see one example of how to create a class Student with multiple objects using class keywords &amp; class expressions.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using_class_keyword_in_JavaScript\"><\/span>Using class keyword in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n\r\n&lt;script&gt;\r\nclass Student{\r\n  constructor(name, age, gender){\r\n    this.name=name;\r\n    this.age=age;\r\n    this.gender=gender;\r\n  }\r\n  show(){\r\n    console.log(`Name: ${this.name}`);\r\n    console.log(`Age: ${this.age}`);\r\n    console.log(`Gender: ${this.gender}`);\r\n  }\r\n}\r\nvar raman= new Student(&quot;Raman Singh&quot;,21,&quot;Male&quot;);\r\nvar simran= new Student(&quot;Simran Shukla&quot;,22,&quot;Female&quot;);\r\nraman.show();\r\nsimran.show();\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Using_class_expression_in_JavaScript-2\"><\/span>Using class expression in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;body&gt;\r\n&lt;script&gt;\r\nlet Student=class{\r\n  constructor(name, age, gender){\r\n  this.name=name;\r\n  this.age=age;\r\n  this.gender=gender;\r\n }\r\n show(){\r\n   console.log(`Name: ${this.name}`);\r\n   console.log(`Age: ${this.age}`);\r\n   console.log(`Gender: ${this.gender}`);\r\n  }\r\n}\r\nvar raman= new Student(&quot;Raman Singh&quot;,21,&quot;Male&quot;);\r\nvar simran= new Student(&quot;Simran Shukla&quot;,22,&quot;Female&quot;);\r\nraman.show();\r\nsimran.show();\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n\/\/Output\r\n\/\/Name: Raman Singh\r\n\/\/Age: 21\r\n\/\/Gender: Male\r\n\/\/Name: Simran Shukla\r\n\/\/Age: 22\r\n\/\/Gender: Female<\/pre>\n<p>If we check the type of Student using typeof <a href=\"https:\/\/usemynotes.com\/what-are-operators-in-javascript\/\">operator<\/a>, you will get the function as an output. This shows that in JavaScript, classes are <strong>special functions<\/strong>.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">console.log(typeof Student);\r\n\/\/Output\r\n\/\/function<\/pre>\n<p>Similarly, on checking the type of Raman, you will get an object as an output.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">console.log(typeof raman);\r\n\/\/Output\r\n\/\/object<\/pre>\n<p>I hope you have got a basic knowledge of <strong>classes in JavaScript<\/strong> and how to create it. In the next module, we will be knowing about Inheritance in JavaScript, then you can visit our website for more informative modules like this.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi everyone, welcome back. In this module, I will be discussing classes in JavaScript. After reading this module, you will get to know what is a class in JavaScript &amp; how to create Classes in JavaScript. So, let\u2019s begin to know about it. Classes in JavaScript Like other object-oriented programming languages like Java, Python, C++, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1424,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":{"0":"post-1423","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"_links":{"self":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts\/1423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/comments?post=1423"}],"version-history":[{"count":0,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/posts\/1423\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media\/1424"}],"wp:attachment":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media?parent=1423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/categories?post=1423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/tags?post=1423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}