Day3
OOPS, Funtional Programming & Object Prototypes
Youtube Resource for Beginners: OOPS and High Order Functions
Resouce: OOPS and Object Prototypes
Must Read: OOPS and Functional Programming
OOPS
There are certain features or mechanisms which makes a Language Object Oriented like:
- Object (Covered in Day1)
- Classes
- Encapsulation
- Inheritance
Classes
Classes are blueprint of an Object. A class can have many Object, because class is a template while Object are instances of the class or the concrete implementation.
Example: Lets use ES6 classes then we will look into traditional way of defining Object in the Object Prototype part.
// Defining class using es6
class Vehicle {
constructor(name, maker, engine) {
this.name = name;
this.maker = maker;
this.engine = engine;
}
getDetails() {
return `The name of the bike is ${this.name}.`;
}
}
// Making object with the help of the constructor
let bike1 = new Vehicle("Hayabusa", "Suzuki", "1340cc");
let bike2 = new Vehicle("Ninja", "Kawasaki", "998cc");
console.log(bike1.name); // Hayabusa
console.log(bike2.maker); // Kawasaki
console.log(bike1.getDetails()); //The name of the bike is Hayabusa
Encapsulation
The process of wrapping property and function within a single unit is known as encapsulation. Let’s understand encapsulation with an example.
//encapsulation example
class person {
constructor(name, id) {
this.name = name;
this.id = id;
}
add_Address(add) {
this.add = add;
}
getDetails() {
console.log(`Name is ${this.name},Address is: ${this.add}`);
}
}
let person1 = new person("Mukul", 21);
person1.add_Address("Delhi");
person1.getDetails();
Inheritance
It is a concept in which some property and methods of an Object is being used by another Object. Unlike most of the OOP languages where classes inherit classes, JavaScript Object inherits Object i.e. certain features (property and methods)of one object can be reused by other Objects. Lets’s understand inheritance with example:
//Inhertiance example
class person {
constructor(name) {
this.name = name;
}
//method to return the string
toString() {
return `Name of person: ${this.name}`;
}
}
class student extends person {
constructor(name, id) {
//super keyword to for calling above class constructor
super(name);
this.id = id;
}
toString() {
return `${super.toString()},Student ID: ${this.id}`;
}
}
let student1 = new student("Mukul", 22);
console.log(student1.toString());
Functional Programming
Functional programming is a programming paradigm, meaning that it is a way of thinking about software construction based on some fundamental, defining principles (listed above). Other examples of programming paradigms include object oriented programming and procedural programming.
Concepts of functional programming:
- Pure functions
- Recursion
- Referential transparency
- Functions are First-Class and can be Higher-Order
- Variables are Immutable
To read more about them click here
IIFE
An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
(function () {
statements;
})();
Object Prototype
All JavaScript objects inherit properties and methods from a prototype.
Example
// Defining class in a Traditional Way.
function Vehicle(name, maker, engine) {
(this.name = name), (this.maker = maker), (this.engine = engine);
}
Vehicle.prototype.getDetails = function () {
console.log("The name of the bike is " + this.name);
};
let bike1 = new Vehicle("Hayabusa", "Suzuki", "1340cc");
let bike2 = new Vehicle("Ninja", "Kawasaki", "998cc");
console.log(bike1.name); // Hayabusa
console.log(bike2.maker); // Kawasaki
console.log(bike1.getDetails()); //The name of the bike is Hayabusa
Prototype Inheritance
All JavaScript objects inherit properties and methods from a prototype:
- Date objects inherit from Date.prototype
- Array objects inherit from Array.prototype
- Person objects inherit from Person.prototype
The Object.prototype is on the top of the prototype inheritance chain:
Date objects, Array objects, and Person objects inherit from Object.prototype.
Example
The JavaScript prototype property allows you to add new properties to object constructors:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
View more examples here
Excercise
Note: You can solve them anywhere you want if you stuck see the solution. You don’t have to submit the solution to me they are just for your practice.