Have you ever wondered why most things in JavaScript are either objects or behave like objects? or why are you able to access .toString() method on any object without defining it at the time of object creation? This is because JavaScript has a property known as prototype. Let’s dive deep into what a prototype is and how it works internally to make JavaScript seem almost entirely object-oriented.

In JavaScript, Object class or Object type is the base class for almost all objects.
It is the fundamental part of the language itself, that provides some properties and methods to all objects either directly or via inheritance.

So, the Object class has a property known as prototype, and we can access it using . operator. If you console Object.prototype you’ll get something like this in the image:

So, when you create any function, class or data type like below, the JavaScript engine injects all the above properties and methods of base class into that data type.
e.g: class

class Person{
    constructor(fname, lname,) {
        this.firstname = fname;
        this.lastname = lname;
    }
    getFullName() {
        if (this.lastname !== undefined) 
            return `${this.firstname} ${this.lastname}`
        return this.firstname;
    }
}
const objectOne = new Person("Ashish", "Shah");

and If we do console Person.prototype we’ll get something like this:

So, what is happening under the hood is: that JavaScript is creating a property prototype to class Person, and injecting all the methods that are defined inside the class along with base Object class’s properties and method via Person.prototype = Object.prototype. That’s why at the start we’re able to see our user-defined method and then the base Object class methods. JavaScript does the same to all types of classes either predefined (String, Array, Number, Boolean, Function, Date etc) or user-defined as above (That’s the reason almost everything in JS seems an object because in some way they all have Object class’s methods and properties). It creates a prototype property and injects it into all base class methods or parent class methods into the object’s prototype property.

So even on a string, we’re able to call a method .toUpperCase() like the below without defining it and also on the object we’re able to call .toString() method.

let name = "Ashish shah"
name.toUpperCase();
//Output: ASHISH SHAH

let one = {
    fname: "Ashish",
    lname: "Shah"
}
one.toString()
// output: [object Object]

So what prototype is?

prototype is a way of accessing the properties and methods of other objects (as we were accessing methods of the base Object class on string class above). But the superpower of prototype comes here: Let’s take the example of below code snippet

const objOne = {
    fname: "Ashish",
    lname: "Shah",
    getFullName: function () {
        if (this.lname !== undefined) return `${this.fname} ${this.lname}`
        return this.fname;
    }
}

const objTwo = {
    fname: "Abhay",
    lname: "Sharma",
}

console.log(objOne.getFullName())
console.log(objTwo.getFullName())

Can you guess the output for both the console.log() ? (try on). For the first console.log() the output will be Ashish Shah and for the second console.log() we’ll get an error saying: Uncaught TypeError: objTwo.getFullName is not a function. Why is that so? Simply because we don’t have a method named getFullName in the objTwo object, right? Absolutely right. But what if we can make a way so that we can access the getFullName method on objTwo as well? (I’m not gonna write again the getFullName method in objTwo because it will violet DRY concept in programming).

So when you run this line: console.log(objTwo.getFullName()), the interpreter’s flow will go like the below image:

First will check into object definition methods and if it doesn’t find then goes into .__proto__ property’s methods.

objTwo.__proto__ 
/* .prototype this is the way of accessing prototype values on class like
   String, Array, Date, Person but .__proto__ is the way of accesing 
   prototype on the object/instance of classes.
*/

and internally JavaScript injects all the properties and methods of its parent class. Here JavaScript did something like this:

objTwo.__proto__ = Object.prototype

and here comes the superpower of the prototype property. If JS engine doing like this objTwo.__proto__ = Object.prototype then can’t we modify it and inject the objOne methods and properties into objTwo.__proto__ then we’ll have access to the getFullName method into objTwo as well. Yessssss ofc we can do.

const objTwo = {
    fname: "Abhay",
    lname: "Sharma",
}
objTwo.__proto__ = objOne

Now if you print objTwo, you’ll able to see the getFullName method inside of objTwo.__proto__

and the third box’s methods are coming from objOne.__proto__, and the second box methods are coming from the objOne object’s definition (or objTwo.__proto__) and the first box’s methods are coming from objTwo object’s definition and this goes on until the interpreter reaches null and this is known as prototype chaining.

Prototype chaining:

Keep on checking the methods or properties of the objects by JS interpreter into the object’s prototype until it reaches to null value, is known as prototype chaining.
For the above image, the JS interpreter will go like this:

objTwo -> objTwo.__proto__ -> objTwo.__proto__.__proto__ -> .... until
objTwo.__proto__.__proto__....__proto__ = null

Inheritance:

Inheriting properties and methods from different objects either directly(using extends keyword) or indirectly (via prototype chaining) is known as inheritance.

// direct inheritance:
class A{
    funInsideA() {
        console.log("Hello from A class.")
    }
}

class B extends A{
    funInsideB() {
        console.log("Hello from B class.")
    }
}
console.log(B.prototype)
// Now class B will also have funInsideA method


// indirectly: via prototype chaining as we were doing earlier
class A{
    funInsideA() {
        console.log("Hello from A class.")
    }
}

class B{
    funInsideB() {
        console.log("Hello from B class.")
    }
}
B.prototype = A.prototype

Prototype Inheritance:

Inheriting properties and methods via prototype chaining is known as prototype inheritance. below, you can go as nested as you want.

class A{
    funInsideA() {
        console.log("Hello from A class.")
    }
}

class B{
    funInsideB() {
        console.log("Hello from B class.")
    }
}
B.prototype = A.prototype

Now, can you get the job done of extends keyword without using it? if yes then return something or else read from different sources and come again on this article, you’ll get to know how easy I’ve explained without video :)

Thanks for the reading guys, keep reading and keep writing articles.

The Goal is to Share: Some important methods of array that are most used in Full Stack Development.

I’m Ashish Shah, writing this blog on ‘Wed 05 Fab 2025 at 21:42:59 PM IST’, because I think these methods should be known by each developer. I’m listening to the song Synergy by Tash Sultana

1. Array.filter():

Suppose, you’ve database of Aadhar Card of Indian citizens, and Modi Government ask you to filter out those people who are Eligible for voting so that they can give freebies, How can you do that? using array’s filter() because database (might) contain people’s details in the form of array like this: citizens = [ { name: “Ashish”, age: 21, city: “Bangalore”}, … ]

Syntax: arrayName.filter(callbackfun, argThis(optional)) and it will return an array that passes the certain condition implemented by callbackfun. Let’s see example and you’ll understand better:

const citizens = [
  { name: "Ashish", age: 21, city: "Bangalore" },
  { name: "Priya", age: 9, city: "Mumbai" },
  { name: "Ravi", age: 18, city: "Delhi" },
  { name: "Neha", age: 16, city: "Chennai" },
  { name: "Sandeep", age: 23, city: "Hyderabad" }
];
let electorate = citizens.filter((citizen) => citizen.age >= 18)
console.log(electorate);

// output
[
  { name: 'Ashish', age: 21, city: 'Bangalore' },
  { name: 'Ravi', age: 18, city: 'Delhi' },
  { name: 'Sandeep', age: 23, city: 'Hyderabad' }
]
// as you can see this is also an array.

(citizen) => citizen.age >= 18 this part is function (to be precise arrow function, you can directly pass name of the function there as well.

In brief: you can filter out elements based on certain conditions, and it will give you array itself that passes the condition or gives Truthy values.

2. Array.map() :

Lets say Modi Government wants to give ₹1000 to each woman as freebies in order to win 2029 election. How can they do it? They can use map() function on the array of citizen data, do some manipulation to the data, and returns the array of details of Indian Citizens with updated bank balance and win hell the election.

Syntax: array.map(callbackFun, thisArg(optional)); and it will return new created array, that will hold the updated value only not all elements. (Hint💡: if you want to hold all value use spread operator first.)

const womenCitizens = [
  { name: "Priya", state: "Maharashtra", balance: 500, age: 30 },
  { name: "Neha", state: "Tamil Nadu", balance: 1200, age: 25 },
  { name: "Sita", state: "Uttar Pradesh", balance: 700, age: 35 },
  { name: "Anjali", state: "Karnataka", balance: 800, age: 28 },
  { name: "Rekha", state: "West Bengal", balance: 600, age: 40 }
];

womenCitizens.map((women) => women.balance += 1000)
console.log(womenCitizens);
// output: 
/*[
  { name: 'Priya', state: 'Maharashtra', balance: 1500, age: 30 },
  { name: 'Neha', state: 'Tamil Nadu', balance: 2200, age: 25 },
  { name: 'Sita', state: 'Uttar Pradesh', balance: 1700, age: 35 },
  { name: 'Anjali', state: 'Karnataka', balance: 1800, age: 28 },
  { name: 'Rekha', state: 'West Bengal', balance: 1600, age: 40 }
]
*/
console.log(womenCitizens.map((women) => women.balance += 1000))
// guess the output of above line

In brief: want to do some manipulation on the existing array, use map() function of array.

3. Array.forEach():

Now, Modi Government decides to meet each one of them who they gave ₹1000 (in programming print or visit each element of array) so that they can whisper “Vote for Modi” nahi to mai paisa wapas le lunga. (otherwise I’ll get back ₹1000 if you don’t vote for Modi).

Syntax: array.forEach(callbackFun, thisArg(optional)) callback function executes for each element of array once, and inside the callback function you can do whatever you want to do with the element of array. And it returns nothing or undefined

const womenCitizens = [
  { name: 'Priya', state: 'Maharashtra', balance: 1500, age: 30 },
  { name: 'Neha', state: 'Tamil Nadu', balance: 2200, age: 25 },
  { name: 'Sita', state: 'Uttar Pradesh', balance: 1700, age: 35 },
  { name: 'Anjali', state: 'Karnataka', balance: 1800, age: 28 },
  { name: 'Rekha', state: 'West Bengal', balance: 1600, age: 40 }
]
// lets say government is interested only in names
let val = womenCitizens.forEach((citizen) => console.log(citizen.name))
/* output: 
Priya
Neha
Sita
Anjali
Rekha
*/
console.log(val)
// guess the output

//output: undefined

In brief: If you want to visit each element of an array use forEach() function.

4. Array.find():

The government has identified their target electorate and now needs to decide which candidate should represent their side in the Bangalore region, and they have 5 members for the Bangalore region. They can decide by getting to know who won the most number of times in Bangalore region, and the catch over here is First Come, First Serve, meaning who get first in the array will be selected (if their criterion is lets say wins > 5).

Syntax: array.find(callbackFun, thisArg(optional)) It returns the first element of the array which satisfy the condition, and in the case of no-one, undefined will be returned.

const candidates = [
    { name: "Ashish", region: "Bangalore", wins: 3 },
    { name: "Priya", region: "Bangalore", wins: 7 },
    { name: "Ravi", region: "Bangalore", wins: 5 },
    { name: "Neha", region: "Bangalore", wins: 6 },
    { name: "Sandeep", region: "Bangalore", wins: 8 }
];

const candidate = candidates.find((candidate) => candidate.wins > 5)
console.log(candidate);
/* output:
{ name: 'Priya', region: 'Bangalore', wins: 7 }
*/

console.log(candidates.find((candidate) => candidate.wins > 5));
// can you guess the output of the above line?

// { name: 'Priya', region: 'Bangalore', wins: 7 }

Although, there is sandeep who won 8 times but didn’t get select because he comes last in the array, and the find() function works on first-come, first serve.

In brief: Want to find the first element from L-To-R in the array who satisfies conditions, use find() function.

5. Array.concat():

lets say priya didn’t get the winning number of seats in Karnataka but got majority of seats and Modi Government wants to build their Government in Karnataka, they can do alliance with other party, lets say with AAP and Congress as well (that ain’t gonna happen in real life for sure). So they will combine the seats of BJP, AAP and Congress and will get the total seats.

Syntax: array.concat(value1, value2, /* …, */ valueN) It returns a new array with the combined values or populated values of all arrays without modifying their individual’s actual values.

// Numbers in the array is representing seats in particular region by party
const BJP = [3, 4, 5, 2];
const AAP = [6, 3, 4];
const Congress = [1, 2, 7, 3, 5];

const total = BJP.concat(AAP, Congress); 
// or 
const halfhalf = BJP.concat(AAP);
const total = halfhalf.concat(Congress);
console.log(total);
/* output: 
[ 3, 4, 5, 2, 6, 3, 4, 1, 2, 7, 3, 5 ]
*/

console.log(AAP);
console.log(BJP);
console.log(Congress);
// can you guess the output of the above snippet

In brief: All the elements of arrays will be populated into a new array without modifying the original one when you use concat() function.

6. Array.every():

Now they want to check whether the number of seats from the alliance of a particular region is greater than 2 or not? if the seats in particular region is greater than 2 then they will form the alliance otherwise not. To check this they will use every() function of array because if each element I said eachhhhh passes the condition then it will return true only otherwise false .

Syntax: array.every(callbackFun, thisArg) It returns boolean value and it will return true if and only if all the elements pass the condition or else false.

// Seats from alliance as well
const total = [3, 4, 5, 2, 6, 3, 4, 1, 2, 7, 3, 5]
const willAllianceForm = total.every((seat) => seat >=2)

console.log(willAllianceForm);
// output: false cuz not all elements are greater than or equal to 2

In brief: To check condition on all the elements of an array use every() function.

7. Array.includes():

Now enough about Politics and Government for today, lets talk about our most favorite place our wardrobe. You want to check if you have black color shirt or not, and you can represent your shirts in an array (you can right? can’t you🤔). We can check if we have black color shirt or not (I do, wau? you have let me know in comment or mail) using includes() function or array.

Syntax: array.includes(toBeSearchElement, fromIndex): It returns boolean value and it will return true if the element is found from the specified index of the array otherwise it will return false.

const shirts = ["Red Shirt", "Blue Oxford Shirt", "Green Polo Shirt", 
                "Black linen Shirt", "White Linen Shirt", 
                 "Gray Checkered Shirt"]
const haveShirt = shirts.includes("Black linen Shirt", 1)
console.log(haveShirt);
// output: true

const haveShirt = shirts.includes("Black linen Shirt", 3)
console.log(haveShirt);
// output: true

const haveShirt = shirts.includes("Black linen Shirt", 4)
console.log(haveShirt);
// output: false

In brief: It checks from the specified searchIndex if mentioned otherwise from 0, and if finds out then returns true or else false.

8. Array.push():

Now lets suppose you don’t have Black linen Shirt in your wardrobe and you saw me wearing it, and wants to add it because its fucking cool. You can do by using push() function of array(wardrobe).

Syntax: array.push(element1, element2, /* …, */ elementN) It returns the length of the new array, and the array will be updated with the values of element1, element2 … (in the case of multiple push elements at the same time) at the end of the array.

const shirts = ["Red Shirt", "Blue Oxford Shirt", "Green Polo Shirt", 
                "White Linen Shirt", "Gray Checkered Shirt"]

shirts.push("Black linen Shirt")
console.log(shirts.push("Black linen Shirt"));
// output: 7

// now guess the output of below line: its little bit of trickey💡
console.log(shirts);


/* output:
[
  'Red Shirt',
  'Blue Oxford Shirt',
  'Green Polo Shirt',
  'White Linen Shirt',
  'Gray Checkered Shirt',
  'Black linen Shirt',
  'Black linen Shirt'
]
two times black shirt is added because two times we called push() fn
*/

In brief: If you want to add any elements in the last of the array use push() fn.

9. Array.pop():

Now, your mom doesn’t like black color (Note: in your case not mine😎), you’ve to remove it from your wardrobe and return back to zara. You can do this by pop() fn.

Syntax: array.pop() It returns the last element from the array and in the case of no element in array, returns undefined

const shirts = ["Red Shirt", "Blue Oxford Shirt", "Green Polo Shirt", 
                "White Linen Shirt", "Gray Checkered Shirt", 
                "Black linen Shirt"]

const returnShirt = shirts.pop()
console.log(shirts);
/* output: 
[
  'Red Shirt',
  'Blue Oxford Shirt',
  'Green Polo Shirt',
  'White Linen Shirt',
  'Gray Checkered Shirt'
] */
console.log(returnShirt);
// output: Black linen Shirt

10. Array.shift():

Ok you removed your shirt from the last but what if you want to remove your shirt from the first or left side. Oh! here we are JS developer provided you a method knows as shift() .

Syntax: array.shift() It removes the element of the array from the left side or beginning side (index 0) and returns removed element, and in the case of no element in array, it returns undefined.

const shirts = ["Red Shirt", "Blue Oxford Shirt", "Green Polo Shirt", 
                "White Linen Shirt", "Gray Checkered Shirt", 
                "Black linen Shirt"]

const returnShirt = shirts.shift()
console.log(shirts);
/* output: 
[
  'Blue Oxford Shirt',
  'Green Polo Shirt',
  'White Linen Shirt',
  'Gray Checkered Shirt',
  'Black linen Shirt'
] */
console.log(returnShirt);
// output: Red Shirt

In brief: Okay want to remove element from the beginning of the array use shift() fn.

Thank you for reading.

if(you read all) return “you’re gonna be a good developer”
else return "au revoir"

The goal is to share: what is Preprocessor Directive in C & C++ and what are the different ways we use it.

I’m writing this ‘blog’ today 2 February 2025 because I found ‘preprocessor directive’ fascinating way in C++ to do before compilation of code. I’m listening to the song The Journey by Tom Misch

You’ve written this below code snippet, whenever you had chance to write C or C++ program in your school, high-school or uni.

#include<iostream>
using namespace std;
int main(){
    cout<< "Welcome to Ashish's blog" <<endl;
    return 0;
}

On 29 Jan 2025 I started my C++ journey till then I was learning Java and loved Java so much but had to leave, and when I wrote my very first line code “#include<iostream>”, then I was like what the hell is this and why there is #, can’t it be other symbol than #? at that time my curiosity was at its peak.

I Googled, did ChatGPT, then got to know that there is no single thing # only, it comes with #include and this “#include” is called ‘preprocessor directive’ in C and C++ and there are many types of it. Like to define micro, you write: #define MAX(a,b) ( a > b ? a : b); here #define is also a pre-processor directive.

So why is it written in the very first line of code, and what does it do to my code? and what will happen if I don’t write this? So many questions, right?

These were the questions in my mind back then. So first look at the diagram below:

Do you get anything? a little bit IMO. This is how our code go from a High-level to low level.

So when you write “#include …”, you just told to pre-processor to perform certain action, in this case you’re saying to pre-processor bhai kuchh to lele apne sath me, may be kam aa jaye future me (bro as pre-processor include something that may be we require in the future). Basically we’re giving some instructions to pre-processor to do some action before compile our source file, it can of many types:

1. To include some files or headers. (user-defined headers as well)

2. To run a particular part of code of our program. (Conditional compilation of code)

3. To guard our file from multiple inclusion of same headers.

4. To add micro in our program.

So, got the answer why is it written? To perform certain task before actual compilation of code because may be some part of our code is dependent on other files or standard C or C++ library, and to include them we give instructions to pre-processor.

#include<iostream>

In this case we’re using standard C++ way of taking input and displaying output, but we can also define how are we going to take input eg: from CSV file, spreadsheet, web application etc. and can display output on Refrigerator’s screen, washing machine screen etc. and then we’ll use our header like this:

#include "ioashish"

and you’ll get output on your washing machine’s screen.😎

and if we don’t write this, from where are we going to take input and where to display output? to do so, we include C++ standard I/O header file.

Why there is “#” to start with? because whoever is created the C and C++ language, they set the way to write pre-processor directive, if you don’t like it that’s fine, you can also add any sysmbol as your liking but you’ve to write C++ lang again, and you can do it I’m sure. but why want to do this, ask this question before doing it? (or before anything doing).

Suppose you want to write a program in C++ that clears screen on different OS, here you can achive by single program using “Pre-processor directive”:

#include<iostream>

#ifdef __WIN32
    #include<window.h>
    void clearScreen(){
        system("cls");
    }
#elif __linux__ 
    #include<cstdlib>
    void clearScreen(){
        system("clear");
    }
#else
    void clearScreen(){
        std::cout<< "Screen can't be clear on this OS. Thank you!"<<std::ndl;
    }
#endif

int main(){
    clearScreen();
    return 0;
}

That’s from myside guys. au revoir 👋

Hero image credit: Discord blog

Gonna sooooon write on pre-processor.