<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Alan Devlin</title>
    <description>The latest articles on DEV Community by Alan Devlin (@alandevlin).</description>
    <link>https://dev.to/alandevlin</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F794988%2F77395bc4-e153-4bc7-b656-72d81a1381bf.jpeg</url>
      <title>DEV Community: Alan Devlin</title>
      <link>https://dev.to/alandevlin</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/alandevlin"/>
    <language>en</language>
    <item>
      <title>Explaining Abstraction - One of the Basic Principals of OOP</title>
      <dc:creator>Alan Devlin</dc:creator>
      <pubDate>Sun, 23 Oct 2022 16:37:49 +0000</pubDate>
      <link>https://dev.to/alandevlin/explaining-abstraction-one-of-the-basic-principals-of-oop-ngn</link>
      <guid>https://dev.to/alandevlin/explaining-abstraction-one-of-the-basic-principals-of-oop-ngn</guid>
      <description>&lt;p&gt;Abstraction is one of the basic principals of Object-Oriented Programming, and one which is super easy to understand.&lt;/p&gt;

&lt;h2&gt;
  
  
  What exactly is Abstraction?
&lt;/h2&gt;

&lt;p&gt;In a nutshell, abstraction involves hiding the complicated logic of an object from its users, and only providing the required inputs and outputs.&lt;/p&gt;

&lt;p&gt;It's a very common practice, and one which every single software developer will have come across at some stage. I think we are all familiar with &lt;code&gt;print('Hello World!)&lt;/code&gt;or &lt;code&gt;console.log('Hello World!')&lt;/code&gt;. Its probably the first thing every developer learns, and it's a perfect example of abstraction usage. You don't need to know the inner details of how the &lt;code&gt;print()&lt;/code&gt; function works here, but you just know that calling it while passing in a string will print the message. The hidden (and actually quite complex) logic of printing the string message is of no concern to the user and has been abstracted away from them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why use Abstraction?
&lt;/h2&gt;

&lt;p&gt;The usage of abstraction and it's benefits are pretty clear from its definition - reducing complexity for users. Abstraction's key benefit is making our code simple and easy to use when implemented.&lt;br&gt;
Abstraction is also important in the sense that it also allows users to implement more logic on top of an abstraction, without needing to think about all the hidden complexity.&lt;/p&gt;
&lt;h2&gt;
  
  
  When to use Abstraction?
&lt;/h2&gt;

&lt;p&gt;Abstraction is most commonly used in two scenarios:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;When we want to share some common behavior&lt;/li&gt;
&lt;li&gt;Using the Template Method Pattern&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Sharing common behavior is the most widely used usage of Abstraction. Lets take a look at how we can use abstraction in order to share common behaviour.&lt;/p&gt;
&lt;h2&gt;
  
  
  Example of Abstraction
&lt;/h2&gt;

&lt;p&gt;Using TypeScript, I am going to create an abstract class called &lt;code&gt;Vehicle&lt;/code&gt; which, when instantiated, will set the number of wheels and max speed of the object (in both km and miles). It also has three functions, one for returning the number of wheels, one for returning the max speed in km, and one for returning the max speed in miles.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;abstract&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Vehicle&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;noWheels&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;maxSpeed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="k"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;KM_TO_MILE_CONVERSION&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mf"&gt;1.609&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;noWheels&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;maxSpeedKilometers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;noWheels&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;noWheels&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;maxSpeed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;maxSpeedKilometers&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;getNoWheels&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;noWheels&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;getMaxSpeedKilometers&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;maxSpeed&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

   &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;getMaxSpeedMiles&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; 
             &lt;span class="nb"&gt;parseFloat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
                    &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;maxSpeed&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;KM_TO_MILE_CONVERSION&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toFixed&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;As you can see, the function for returning the max speed in miles has some additional logic tied to. We are diving the maxSpeed in km by the conversion number, before rounding the number to 2 decimal places, and parsing it back to float. In abstraction terminology, this is what we refer to as the "complicated logic", which abstraction is hiding from the end user.&lt;/p&gt;

&lt;p&gt;Lets take a look at a child class, or a user of this abstract class below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Car&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Vehicle&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

    &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;carMake&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;numberOfWheels&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;maximumSpeed&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
                &lt;span class="nx"&gt;carMake&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;
        &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;numberOfWheels&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;maximumSpeed&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;carMake&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;carMake&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;printMaxSpeedInMiles&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;public&lt;/span&gt; &lt;span class="nx"&gt;printMaxSpeedInMiles&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="k"&gt;void&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="c1"&gt;// Max Speed of the Car in Miles from the Parent Object&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;The Max Speed of the Car in Miles is: &lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; 
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getMaxSpeedMiles&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can see that this class utilizes the abstract class due to the use of the &lt;code&gt;implements&lt;/code&gt; keyword. This, alongside calling the &lt;code&gt;super()&lt;/code&gt; method, gives us access to the abstract classes functions. We can see this by the fact that within &lt;code&gt;printMaxSpeedInMiles()&lt;/code&gt; we are able to call the &lt;code&gt;Vehicle&lt;/code&gt; function &lt;code&gt;getMaxSpeedMiles()&lt;/code&gt;, without defining it ourselves.&lt;/p&gt;

&lt;p&gt;What this all means is that if we then instantiate a new object of type &lt;code&gt;Car&lt;/code&gt;:&lt;br&gt;
&lt;code&gt;new Car(2, 175, 'hyundai');&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;We will automatically get the max speed per miles printed to the console:&lt;br&gt;
&lt;code&gt;The Max Speed of the Car in Miles is: 108.76&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The benefit here, of course, is that we can have multiple 'child' classes which are abstracted from &lt;code&gt;Vehicle&lt;/code&gt;. We could have a class &lt;code&gt;Bicycle&lt;/code&gt; or &lt;code&gt;Motorcyle&lt;/code&gt; and we would also have the ability to retrieve the max speed of either in km or miles, alongside adding additional functionality on top of this. Of course, this is a very basic example, but hopefully you get the picture.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;So there you have it, a basic example of one of the key principals of OO Programming - Abstraction&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>abstraction</category>
      <category>typescript</category>
      <category>oop</category>
      <category>learning</category>
    </item>
  </channel>
</rss>
