--- title: Bitovi Academy - Classes description: Learn about JavaScript classes --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us) - ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us) - ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us) - [View more → ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us) - [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us) - [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us) - [View more → ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about perfecting software delivery ](https://bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships?hsLang=en-us) - [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy/?hsLang=en-us) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse our tools or contribute to our open source mission. ](https://www.bitovi.com/open-source?hsLang=en-us) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com - [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us) - [ JavaScript and the DOM ](https://www.bitovi.com/academy/learn-advanced-javascript/js-vs-dom.html?hsLang=en-us) - [ Types, Operators and Primitives ](https://www.bitovi.com/academy/learn-advanced-javascript/js-types.html?hsLang=en-us) - [ Comparison Operators ](https://www.bitovi.com/academy/learn-advanced-javascript/js-comparison.html?hsLang=en-us) - [ Closures ](https://www.bitovi.com/academy/learn-advanced-javascript/closures.html?hsLang=en-us) - [ Context ](https://www.bitovi.com/academy/learn-advanced-javascript/context.html?hsLang=en-us) - [ Prototypes ](https://www.bitovi.com/academy/learn-advanced-javascript/prototypes.html?hsLang=en-us) - [ Classes ](https://www.bitovi.com/academy/learn-advanced-javascript/classes.html?hsLang=en-us) - [ Promises ](https://www.bitovi.com/academy/learn-advanced-javascript/promises.html?hsLang=en-us) - [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us) - [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us) - [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) - [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us) - [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us) - [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us) - [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us) - [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us) - [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us) - [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us) - [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us) - [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us) - [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us) - [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us) - [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us) - [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us) [View More Courses](https://www.bitovi.com/academy/#courses) [ ] # Classes `page` Learn about JavaScript classes > **NOTE:** This section is currently under development. There are no exercises yet. ## Overview In JavaScript, a class is a structured way to define what you saw in the previous section - prototype-based **constructor functions**. Before [ECMAScript 2015](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_-_ECMAScript_2015), you would create **constructor functions** as follows: ``` //prototype way function ParkEmployee(name) { this.name = name; } ParkEmployee.prototype.sayHi = function() { console.log("Hi, my name is " + this.name); } const raptorGuy = new ParkEmployee("Owen"); raptorGuy.sayHi(); // Logs "Hi, my name is Owen" ``` In ECMAScript 2015, [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) are available as syntactic sugar over the existing prototype-based **constructor functions**. You can write the previous example with `class` as follows: ``` class ParkEmployee { constructor(name){ this.name = name; } sayHi(){ console.log("Hi, my name is " + this.name); } } const raptorGuy = new ParkEmployee("Owen"); raptorGuy.sayHi(); // Logs "Hi, my name is Owen" ``` ## Getters, Setters and Method Definitions Classes initially only allowed getters, setters and method definitions in the body of the class. Getters and setters can be used to simulate another value: ``` class ParkEmployee { constructor(first, last){ this.first = first; this.last = last; } sayHi(){ console.log("Hi, my name is " + this.fullName); } get fullName(){ return this.first + " " + this.last; } set fullName(newVal){ const parts = newVal.split(" "); this.first = parts[0]; this.last = parts[1]; } } const employee = new ParkEmployee("Ellie","Sattler"); employee.fullName = "John Hammond"; employee.sayHi(); // Logs "Hi, my name is John Hammond" ``` Method definitions are functions written without the `function` keyword. They look like the following: ``` sayHi(){ console.log("Hi, my name is " + this.fullName); } ``` Classes **do not** allow specifying functions and values on the class prototype using any other syntax available in [object literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer). For example, the following are **not** allowed: ``` class ParkEmployee { // key: function sayHi: function(){ console.log("Hi, my name is " + this.name); } // key: value name: null } ``` ## Static Methods The `static` keywords defines methods directly on the class. For example, the following creates a `ParkEmployee.mathematician()` method: ``` class ParkEmployee { static mathematician(){ return new ParkEmployee("Ian"); } constructor(name){ this.name = name; } sayHi(){ console.log("Hi, my name is " + this.name); } } let goldblum = ParkEmployee.mathematician(); raptorGuy.sayHi(); // Logs "Hi, my name is Ian" ``` ## Field Declarations A few browsers (and Babel) support [field declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Field_declarations). *Field declarations* let you specify fields (properties) and their initial value up front. The following declares that `ParkEmployee` instances will be created with `name` initialized to `undefined` and `age` initialized to `36`: ``` class ParkEmployee { name; age = 36; constructor(name){ this.name = name; } sayHi(){ console.log("Hi, my name is " + this.name); } } const raptorGuy = new ParkEmployee("Owen"); console.log( raptorGuy.age ); // Logs 36 ``` ## Sub Classing Classes (and even constructor functions) can be extended with the `extends` keyword as follows: ``` class ParkEmployee { constructor( runningSpeed ) { this.runningSpeed = runningSpeed; } run(){ return "running at " + this.runningSpeed; } } class Mathematician extends ParkEmployee { mustGoFaster(){ this.runningSpeed = this.runningSpeed * 2; } } const goldblum = new Mathematician(3); console.log( goldblum.run() ) // Logs "running at 3" goldblum.mustGoFaster(); console.log( goldblum.run() ) // Logs "running at 6" ``` The keyword [super](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super) can be used to call functions on a class’s (or object’s) parent. This is how you call "base" methods. ``` class ParkEmployee { constructor( runningSpeed ) { this.runningSpeed = runningSpeed; } run(){ return "running at " + this.runningSpeed; } } class Mathematician extends ParkEmployee { // constructor MUST call `super` before accessing `this` constructor( name, runningSpeed ) { super(runningSpeed); this.name = name; } run(){ return this.name + " " + super.run(); } mustGoFaster(){ this.runningSpeed = this.runningSpeed * 2; } } const goldblum = new Mathematician("ian", 3); console.log( goldblum.run() ) // Logs "ian running at 3" goldblum.mustGoFaster(); console.log( goldblum.run() ) // Logs "ian running at 6" ``` For a deep dive on the mechanics of class inheritance, checkout [JavaScript.info's Class Inheritance guide](https://javascript.info/class-inheritance). It goes into detail about how the `[[HomeObject]]` internal property is used to enable the `super` keyword. ![](https://docs.google.com/drawings/d/e/2PACX-1vRw9Jbz-_KHQsYE_7YmfibHznMvgHlooBRgKrafsyzNzQcDs-xZy4GuYJWDcc09PM6uX30V4riPbKX-/pub?w=872&h=327) ###### On this page... ###### Get help If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4) If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion) ## Join the Bitovi Newsletter Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason! *By providing your email you agree to receive communications from Bitovi* ![](https://bitovi.github.io/academy/static/img/close.svg) ```json { "@context": "http://schema.org", "@type": "Organization", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://www.bitovi.com/academy/learn-advanced-javascript/classes.html", "description": "Learn about JavaScript classes " }, "url": "http://bitovi.com", "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "name": "Bitovi Web App Consulting", "alternateName": "Bitovi", "naics": "541511", "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "address": { "@type": "PostalAddress", "streetAddress": "1134 Pine Tree Lane ", "addressLocality": "Libertyville", "addressRegion": "IL", "addressCountry": "United States", "postalCode": "60048" }, "areaServed": { "@type": "GeoCircle", "geoMidpoint": { "@type": "GeoCoordinates", "latitude": "41.8781", "longitude": "87.6298" }, "geoRadius": "5000 km" }, "telephone": "312-620-0386", "email": "contact@bitovi.com", "sameAs": [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ] } ```