Interfaces in Object-Oriented Programming Languages & Prototype-Based Languages
What is an interface?
The keyword of this blog post is 'Interfaces', but what are interfaces? In an almost too simplified explanation, an interface is like the blueprint for a class. We use interfaces to hide any and all unnecessary details of objects from a user, abstraction and security. The interface allows a class to become more formal about the behaviour it promises to provide and forms a contract that is enforced at build time. A key benefit to using interfaces in Object-Orientated Programming (OOP) is being able to implement Polymorphism which saves a programmer precious time and a lot of effort.
JavaScript and Interfaces
Interfaces are not really a thing in JavaScript as .js is a dynamic language where types are constantly changing, sometimes even without the developer realising. JavaScripts inheritance is based on objects and not classes. Although JavaScript has the class keyword it is in truth an unsubstantiated constructor function. We use a constructor function, like in the example below, as a way of creating and initializing an object in JavaScript.
Objects are omnipresent so it can be really helpful if we were able to ensure they match a specific shape. There are three ways to emulate interfaces in JavaScript, namely comments, attribute checking and duck typing. Comments are an easy, but not a very effective way of emulating interfaces in comments. It doesn't require any additional classes or functions but is ineffective when debugging as so error messages are provided.
The next way is Attribute Checking whereby all classes clearly state which interfaces they implement and these can then be checked by objects wanting to interact with these classes. It incorporates comments, but this time you will see errors to be able to debug and test easier. The downside of this method is that you cannot be 100% sure that the class really does implement the interface.
The third method is Duck Typing named after the expression, "If it walks like a duck and quacks like a duck, it's a duck." This technique allows us to actually know if an interface is implemented in a class. The method does not use comments and essentially if the methods in your object are named the same as the methods in your interface then the interface will be implemented. All three methods have their drawbacks, but a recommended implementation is using a combination of the Comments and Duck Typing methods.
What is Strict Mode in Javascript?
JavaScript is a loosely-typed scripting language. We can allow strictness in our code by using "use strict" at the top of our code or function. We'd want to use strict mode if we want our program to prevent or throw errors that are considered unsafe and if we want to write more secure JavaScript. Strict mode disables poorly thought out features and can in some cases make the code run faster.
What is TypeScript and what does it have to do with JavaScript?
TypeScript is a superset of JavaScript and extends it by adding additional features like strict typing to the language. TypeScript can also help identify errors while compiling as opposed to during runtime. TypeScript allows us to describe how an object would look which ordinarily isn't possible in JavaScript. It lays out the contract that states what needs to be done, but doesn't specify how it will be done. Below is an example of an interface for the Tesla Model S and an implementation of what it expects:
Additional properties in TypeScript interfaces include read-only properties and indexable properties.
TypeScript implements strict typing in JavaScript using Duck Typing or Structural Typing which essentially means that if two objects or classes share the same shape then they can be considered the same type. In the below example you can see that 'point' and 'Point' are never declared as one another, but as they have the same shape they match:
In conclusion, interfaces are a powerful way of defining contracts in JavaScript and TypeScript.
Sources:
Budinoski, K., 2013. JavaScript Interfaces. [online] Jscriptpatterns.blogspot.com. Available at: <https://jscriptpatterns.blogspot.com/2013/01/javascript-interfaces.html> [Accessed 27 September 2021].
Cs.utah.edu. n.d. OOP - Interfaces. [online] Available at: <https://www.cs.utah.edu/~germain/PPS/Topics/interfaces.html> [Accessed 27 September 2021].
Developer.mozilla.org. n.d. constructor - JavaScript | MDN. [online] Available at: <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor> [Accessed 27 September 2021].
Developer.mozilla.org. 2021. Strict mode - JavaScript | MDN. [online] Available at: <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode> [Accessed 27 September 2021].
Docs.oracle.com. n.d. Object-Oriented Programming Concepts. [online] Available at: <https://docs.oracle.com/javase/tutorial/java/concepts/interface.html> [Accessed 27 September 2021].
Hackernoon.com. 2017. Implementing interfaces in JavaScript with Implement.js | Hacker Noon. [online] Available at: <https://hackernoon.com/implementing-interfaces-in-javascript-with-implement-js-8746838f8caa> [Accessed 27 September 2021].
Heddings, A., 2020. What Does An Interface Do in Object-Oriented Programming?. [online] Cloudsavvyit.com. Available at: <https://www.cloudsavvyit.com/8569/what-does-an-interface-do-in-object-oriented-programming/> [Accessed 27 September 2021].
GeeksforGeeks. 2020. Strict mode in JavaScript - GeeksforGeeks. [online] Available at: <https://www.geeksforgeeks.org/strict-mode-javascript/> [Accessed 27 September 2021].
Typescriptlang.org. 2021. [online] Available at: <https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html> [Accessed 27 September 2021].
W3schools.com. n.d. Java Interface. [online] Available at: <https://www.w3schools.com/java/java_interface.asp> [Accessed 27 September 2021].
Nicely explained Kayla... The simplicity was just amazing
ReplyDelete