JavaScript Prototype Introduction - Programming Paradigms
What is JavaScript Prototype?
December 20, 2024Today, I want to review one of the most important concepts in JS, which is the prototype, but I think it's better to start with the basic, let's review the programming language paradigms first.
What is so-called programming language paradigms?
Think of a tool box, you have a hammer, a screwdriver, a saw, etc. Each tool has its own purpose, and you can solve different problems with different tools, sometime you need to combine them to solve a complex problem, this idea is similar to programming language paradigms.
Programming paradigms are fundamental approaches or styles of programming, it defines the way of thinking and solving problems.
Here are some common programming paradigms and its characteristics:
-
Imperative Programming:
- Change the state of the program by executing statements.
- Focused on how to perform tasks using explicit instructions, such as loops, conditions, etc.
- Example: C, Java.
-
Declarative Programming:
- Describe what to do, not how to do.
- Focused on the result.
- Example: SQL, HTML.
-
Functional Programming:
- functions as the primary building blocks.
- Avoid changing state and mutable data.
- Example: Haskell.
-
Object-Oriented Programming:
- Organize code into objects.
- Encapsulate data and behavior.
- Example: Java, Python.
JavaScript wears multiple hats
JavaScript is a multi-paradigm programming language, it supports OOP concepts, it treats functions as first-class citizens, it can be used in an imperative style or a declarative style.
Let's say we want to filter out the odd numbers from an array, and multiply each number by 2, and then sum them up.
Imperative style
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function imperativeApproach(arr: number[]) {
let result = 0;
for (let i = 0; i < arr.length; i++) {
if (arr[i] % 2 === 0) {
result += arr[i] * 2;
}
}
return result;
}
console.log(imperativeApproach(numbers));
Declarative style
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function declarativeApproach(arr: number[]) {
return arr
.filter((num) => num % 2 === 0)
.map((num) => num * 2)
.reduce(acc, (curr) => acc + curr, 0);
}
console.log(declarativeApproach(numbers));
Functional style
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const isEven = (num: number) => num % 2 === 0;
const multiplyByTwo = (num: number) => num * 2;
const sum = (acc: number, curr: number) => acc + curr;
function functionalApproach(arr: number[]) {
return arr.filter(isEven).map(multiplyByTwo).reduce(sum, 0);
}
console.log(functionalApproach(numbers));
Object-Oriented style
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
class NumberProcessor {
constructor(private numbers: number[]) {}
isEven(num: number) {
return num % 2 === 0;
}
multiplyByTwo(num: number) {
return num * 2;
}
sum(acc: number, curr: number) {
return acc + curr;
}
process() {
return this.numbers.filter(this.isEven).map(this.multiplyByTwo).reduce(this.sum, 0);
}
}
const processor = new NumberProcessor(numbers);
Prototype in JavaScript
In OOP, there're two ways to create objects: class-based and prototype-based.
Class-based OOP
It is more traditional, more intuitive, think of a blueprint, you can create multiple instances from the blueprint.
class Enemy() {
constructor(name) {
this.name = name;
}
attack() {
console.log(`${this.name} is attacking!`);
}
defend() {
console.log(`${this.name} is defending!`);
}
}
const enemy1 = new Enemy("Goblin");
const enemy2 = new Enemy("Orc");
enemy1.attack(); // Goblin is attacking!
enemy2.defend(); // Orc is defending!
Prototype-based OOP
It is more flexible, it allows you to create objects without a blueprint, simply by cloning an existing object.
const enemy = {
attack() {
console.log(`${this.name} is attacking!`);
},
defend() {
console.log(`${this.name} is defending!`);
},
};
const enemy1 = Object.create(enemy);
enemy1.name = "Goblin";
enemy1.attack(); // Goblin is attacking!
const enemy2 = Object.create(enemy);
enemy2.name = "Orc";
enemy2.defend(); // Orc is defending!
Summary
In this article, we've reviewed the programming language paradigms, and how JavaScript supports multiple paradigms, and we've learned the difference between class-based OOP and prototype-based OOP.
- JavaScript is a multi-paradigm programming language.
- JavaScript is a prototype-based OOP language.
- A programming paradigm defines the way of thinking and solving problems.
- There're four common programming paradigms: imperative, declarative, functional, and object-oriented.