Tjyylli

Consider this function:

function Foo(){

var a = "3";

};

According to __proto__ VS. prototype in JavaScript,

Foo.__proto__ = Function.prototye

Function.prototype.__proto__ = Object.prototype

I understood that part, but if i do this in chrome console:

Object.__proto__

output: ƒ () { [native code] }



Function.__proto__

output: ƒ () { [native code] }

Q1: why are they pointing to Function? what actually are Function and Object and how are they different from each other, because Object is actually a function:

typeof Object

"function"

Q2: If everything is an object in JS, then why is Object a function? also how is a function actually implemented inside JS? what happens to the variables declared inside a function? is a function converted into an object by JS compiler?

sorry if i am missing something obvious, i am really confused by the way function and object are implemented in JS

You seem to be confused between the two concepts object and Object.

An object is a concept in JavaScript that is a generic container for some data. An object contains properties with various data in them.

In JavaScript, everything (other than primitives) is an object. This includes functions, which are basically a special type of object that can be "called" with the () syntax.

JavaScript provides a number of built-in functions that have various purposes. Two such functions happen to be called Object and Function. So in other words Object is a function and thus also an "object" (the concept).

Let's take your function Foo as an example:

function Foo() {

    var a = "3";

}

Foo is a function. This means that Foo can be called, eg. var f = Foo(). In this case f will be undefined since Foo doesn't return anything.

Because Foo is a function, it is also an object. This means we can also add and read properties from it:

Foo.bar = 5;

Foo.bar++;

console.log(Foo.bar); // prints 6

Please note that this "object" part of Foo is not related to the contents of the function. That means that the code you declared (var a = "3") is irrelevant. You cannot access var a in any way here because it does not exist until you call the function. If you were to do Foo.a, you are not manipulating var a inside the function; you are working with the property a on the object Foo.

You can however do it the other way around and access properties on Foo inside of the function:

function Foo() {

    var a = "3"; // a is local to this scope, you cannot get to it from outside

    console.log(a); // prints 3 - local variable a is accessible inside the scope of this function

    console.log(Foo.a); // prints 5 - a is a property on object Foo, and is accessible here

}

// var a inside Foo cannot be accessed here

Foo.a = 5;

Foo();

Edit: Re. your question regarding "this" in the comments. this is a special keyword in JavaScript that refers to an object. However, this object is not the function itself, it is a new object that is created when you call a function using the new keyword:

function Bar() {

    this.a = 10;

    console.log(this == Bar); // prints false

}

var bar = new Bar();

console.log(bar.a); // prints 10

This is referred to as a "constructor function". In that case, the prototype of the created object (bar.__proto__) is also set to the property "prototype" of this function:

console.log(bar.constructor == Bar) // prints true

console.log(bar.__proto__ == Bar.prototype) // prints true

Fundamentally

Functions has some code that can be executed.
Object are those which contains data.

For class Point having x and y.

class Point {

    constructor(x, y) {

        this.x = x;

        this.y = y;

    }

    isOrigin() { return x == 0 && y == 0; }

}

let p = new Point();

Answer 1

in this p is object which contains data or other functions.

p.isOrigin is function.

Similarly class Point is itself a function which when runs produces p. Thats why all classes like Object and Functions are functions more precisely constructor functions.

Answer2

If everything is an object in JS, then why is Object a function?

Same as Answer1.

Also how is a function actually implemented inside JS?

Different js engine will have different implementations. They have specifications which they need to follow.

What happens to the variables declared inside a function?

Off topic. Every function runs with a scope which holds all data for that functions.

Is a function converted into an object by JS compiler?

Not sure what are you asking.

Function and Object are both constructor function which can be used to create a function and an object respectively which is the reason typeof Function returns function

About the similarities and differences between and object and a function, consider the following points:

1. All non primitive types are objects in javascript.


2. All objects indirectly inherit from Object.prototype which inherits from null.


3. All native functions inherit from Function.prototype which inherits from Object.prototype so it means function indirectly inherits from Object.prototype.


4. A function can be called using () operator because javascript engine knows it is declared using a function keyword and it inherits from Function.prototype and have executable code, so whenever it is called, javascript engine creates a new execution context and set the this binding and then executes the function. None of that happens when you try to call an object instead an error is thrown i.e. "is not a function". So we can say that not every object is a function because not all objects inherit from Function.prototype but all objects do inherit from Object.prototype.


5. As function indirectly inherits from Object.prototype, you can treat it as an object e.g. add properties to it, create new objects from it.


6. Because a function indirectly inherits from Object.prototype, we call it an object but it is different from other objects because it inherits directly from Function.prototype and has code that can be executed.

I hope it clears both questions.

Unlike other languages, JavaScript considers "function" as an object:

typeof Object // "function"

class Test {}

typeof Test // "function"

But null returns a "object":

typeof null // "object" => bad

If you need to consider intrinsic "object", you'll need to get it from prototype:

typeof Object.prototype // "object"

typof Object.__proto__ // "function"

__proto__ is an internal function. But prototype is a mechanism to get its parent definitions. So, using __proto__ will return the type as a function while prototype will return object checking its definition.

So, calling Object.prototype is nothing but it's just getting the name from it's constructor Object.prototype.constructor.name.

So, if you do deeper drive, then you'll get "object" after following __proto__:

typeof Object.__proto__.__proto__.__proto__ // "object"

At this point, you're at getting an object by checking it's definition. That's it. - Though, I am not able to clear up things to you.

Let me re-visit your question:

When you call typeof Object, the JS will run its __proto__.

So,

typeof Object

// evaluates:

typeof Object.__proto__ // "function"



typeof Object.__proto__.__proto__

// evaluates:

typeof Object.__proto__.__proto__.__proto__ // "object"

So when you call its prototype:

typeof Object.prototype

// evaluates:

typeof Object.prototype.__proto__ // "object"

// which is equivalents to:

typeof Object.__proto__.__proto__ // "object"

This should satisfy your question 2 as well. Hope, you understand now.

And the following should throw you an error:

typeof Object.prototype.__proto__.__proto__ // TypeError

Because, at the end of its prototype chain, there's null which is considered as object in JS but it cannot read the property __proto__ of null.