welcome to the blog:

why this even exist in language ?

Problem:

lets say you have funcrion

function User(name) {
this.name = name;
}
const u1 = User(`dushyant`);

what do you expect

expected - name: `dushyant`
output - u1 = undefined

now here come the game chager the new keyword

function User(name) {
this.name = name;
}
const u1 =new User(`dushyant`);

output

{ name: 'dushyant' }

so whats happen under the hood

firstly it creare a empty object

{}

set this to that object

this.name = name;

means

{ name: "Dushyant" }

now return that object

final lookup

u1 = { name: "Dushyant" }

without new	with new
no object	object is crated
this become useless	this will work
result is garbage	result is correct

now you would probably think that why does not js just created object automatically

because:

function are generic tools.

not all function create object.

---

Constructon Function

a constructor function is just a normal function used to create object using new keyword.

why do we actually need this. it save our time by avoiding a repetition of code

note: constructor function name always start with capital laetter , not camel case.

with constructor

const u1 = new User("Dushyant", 20);
const u2 = new User("Rahul", 22);

output

u1 = { name: "Dushyant", age: 20 }
u2 = { name: "Rahul", age: 22 }

without constructor

you are writting something like

const u1 = { name: "A", age: 20 };
const u2 = { name: "B", age: 22 };

• lot of repetition

• lots of token burn or say hard to scale

• no structure

simple flow

constructor funcction (user) -> new keyword -> object creation -> properties added using this -> object returned.

object creation

understand with example

function User(name) {
  this.name = name;
}

const u1 = new User("Dushyant");

what do u think happen here

step-1 Create an Object

let obj = {}

step-2 link it to prototype

obj.__proto__ = User.prototype;

step-3 Call constructor function

User.call(obj, "Dushyant");

Now inside function:

this.name = name;

means:

obj.name = "Dushyant";

so now

obj = { name: "Dushyant" }

step-4 Return the object

return obj;

final result

u1 = { name: "Dushayant"

how new link prototypes

it simply means when you create an object using new that object gets access to extra properties or method from somewhere else

the object gets connected to a shared storage of methods , called the prototype

let understan with eg

function User(name) {
this.name = ;
}
user.prototype.sayHi = function () {
console.log("Hi " + this.name);
};
const u1 = new User("Dushyant");

we only added name inside object

so logically u1 look like

{ name: "Dushyant" }

than how it is saying

u1.sayHi(); // Hi Dushyant

Because when we used new , JS connected u1 to User.prototype

like:

u1 be your object

User.prototype be a shared box of methods

new bascilly create a link between them

---

instance creation from construction

instance : it is just a real object created from a constructor or say object made using constructor

eg

function User(name) {
  this.name = name;
}

const u1 = new User("Dushyant");
const u2 = new User("Shujal");

so here in this eg u1 and u2 are the instances of user

so why use constructor

instead of ths repetition

const u1 = { name: "A" };
const u2 = { name: "B" };
const u3 = { name: "C" };

we just do this

const u1 = new User("A");
const u2 = new User("B");
const u3 = new User("C");

now another what do all instances share ?

If you add a method:

User.prototype.sayHi = function () {
  console.log("Hi " + this.name);
};

Now:

u1.sayHi(); // Hi Dushyant
u2.sayHi(); // Hi Rahul

Both instances use the same function

each instance has its own data

all instances share common mathids

---

relation between constructor and object

the constructor create a object

every object created using new has a hidden reference back to its constructor , in short this object was created by User

so full connection look like

• User → function (blueprint)

• u1 → object (final product)

• User.prototype → shared methods

• constructor → points back to user

eg

User.prototype.sayHi = function () {
  console.log("Hi " + this.name);
};

u1.sayHi();

flow:

1. u1 does not have sayHi

2. goes to User.Prototype

3. Finds it and run it

   ---