Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Abstraction

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Abstraction

      Abstraction in JavaScript

      The Abstraction in JavaScript can be achieved using the abstract class. In object-oriented programming, the abstraction concept allows you to hide the implementation details and expose features only to the users.
      For example, you can execute the Math object methods in JavaScript by accessing the method using its name but can’t see how it is implemented. Same way array methods like push(), pop(), etc., can be executed, but you don’t know how it is implemented internally.
      So, the abstraction makes code cleaner by exposing the required features and hiding the internal implementation details.

      How to Achieve Abstraction in JavaScript?

      In most programming languages, you can achieve abstraction using the abstract class. The abstract class contains only method declaration but not implementation. Furthermore, you need to implement the methods declared in the abstract class into the child class. Also, you can’t create an instance of the abstract class.
      JavaScript doesn’t allow to create an abstract class like Java or CPP natively, but you can achieve the same functionality using the object constructor function.
      First, let’s create an abstract class using the example below.

      Creating the Abstract Class

      In the below example, the fruit() function initializes the name property. When anyone creates an instance of the fruit(), the value of the constructor property becomes equal to the ‘fruit’. So, we throw an error to prevent creating an instance of the fruit.
      Also, we have added the getName() method to the prototype. After that, we create an instance of the fruit() constructor, and you can observe the error in the output.
      <html>
      <body>
         <div id = "output"> </div>
         <script>
            try {
               // Object constructor
               function fruit() {
                  this.name = "Fruit";
                  if (this.constructor === fruit) {// Preventing the instance of the object
                     throw new Error("You can't create the instance of the fruit.");
                  }
               }
               // Implementing method in the prototype
               fruit.prototype.getName = function () {
                  return this.name;
               }
               const apple = new fruit();
            } catch (error) {
               document.getElementById("output").innerHTML = error;
            }
         </script>
      </body>
      </html>

      Output

      Error: You can't create the instance of the fruit.
      In the above example, you learned to achieve the abstract class functionality.
      Now, you will learn to extend the abstract class and implement the methods defined in the abstract class via the example below.

      Extending the Abstract Class

      In the example below, fruit() constructor is similar to the above example. We have implemented the Apple() constructor, initializing the name property.
      After that, we assign the prototype of the fruit() function to the Apple() function using the Object.create() method. It means Apple() function inherits the properties and methods of the fruit() class.
      After that, we have created the instance of the Apple() class and invoked the getName() method.
      <html>
      <body>
         <div id = "output">The name of the fruit is: </div>
         <script>
            // Abstract class
            function fruit() {
               this.name = "Fruit";
               if (this.constructor === fruit) { // Preventing the instance of the object
                  throw new Error("You can't create the instance of the fruit.");
               }
            }
      
            // Implementing method in the prototype
            fruit.prototype.getName = function () {
               return this.name;
            }
      
            // Child class
            function Apple(fruitname) {
               this.name = fruitname;
            }
      
            // Extending the Apple class with the fruit class
            Apple.prototype = Object.create(fruit.prototype);
      
            const apple = new Apple("Apple");
            document.getElementById("output").innerHTML += apple.getName();
         </script>
      </body>
      </html>

      Output

      The name of the fruit is: Apple
      The prototype implements the getName() method in the above code. So, it is hidden.
      This way, you can use an object constructor to achieve abstraction in JavaScript.