Is `Object` a function in JavaScript?
JavascriptPrototypeJavascript Problem Overview
Consider this function:
function Foo(){
var a = "3";
};
According to https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript,
Foo.__proto__ = Function.prototype
Function.prototype.__proto__ = Object.prototype
I understood that part, but if I do this in the Google 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 JavaScript, then why is Object
a function? Also, how is a function actually implemented inside JavaScript? What happens to the variables declared inside a function? Is a function converted into an object by the JavaScript compiler?
Sorry if I am missing something obvious. I am really confused by the way function and object are implemented in JavaScript.
Javascript Solutions
Solution 1 - Javascript
You seem to be confused between "object" (the data structure) and Object
(the function).
An object is a concept in JavaScript that is a generic container for some data. An object contains properties with keys and associated values.
In JavaScript, everything that is not a primitive 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" (data structure).
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
A function that is meant to be called with the new
keyword is referred to as a "constructor function". Object
and Function
are both examples of constructor functions, which is why their names start with an uppercase letter (a convention in JavaScript).
When you create an object with a constructor function, the property prototype
of this function is used as the prototype (accessible through __proto__
) of the created object.
console.log(bar.constructor == Bar) // prints true
console.log(bar.__proto__ == Bar.prototype) // prints true
this
is also used for other things, but that is a broad subject and way out of scope for this question.
Solution 2 - Javascript
Function and Object are both constructor functions which can be used to create a function and an object, respectively, which is the reason typeof Function
returns function
.
About how functions and objects are related in javascript, consider the following points:
-
All non-primitive types are objects in JavaScript.
-
All objects directly or indirectly inherit from Object.prototype (unless prototype is changed explicitly using setPrototypeOf).
-
All native functions inherit from Function.prototype which inherits from Object.prototype, so it means function indirectly inherits from Object.prototype because functions are treated as objects in JavaScript.
-
The reason functions are treated as objects is because they can be passed as parameters to other functions and can be returned from functions i.e. higher order functions(a powerful feature of javascript).
-
A function can be called using the
()
operator because the JavaScript engine knows it is declared using a function keyword and has executable code. So whenever it is called, the JavaScript engine creates a new execution context and set thethis
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 they may have not been declared using the function keyword and not have executable code.
-
As the function is treated as an object in JavaScript, we can add properties to it, create new objects from it.
-
A non-function type object cannot be called using
()
because it does not have executable code and is not declared using the function keyword. Instead, it is declared usingnew Object()
or object notation and contains methods and properties.
I hope it clears both questions.
Solution 3 - Javascript
Q1: Why are they pointing to Function?
A1: Because they are functions. Function
and Object
are just constructor functions.
function is a Function object
. object is an Object object
.
Q2: If everything is an object in JavaScript, then why is Object
a function?
A2: Because Object
is just a constructor function.
typeof Object
// 'function'
typeof new Object()
// 'object'
And a function is an instance of Function
, so that makes a function an object.
(function(){}) instanceof Function
// true
Solution 4 - Javascript
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
. That's why all classes like Object
and Functions
are functions
more precisely constructor functions
.
Answer 2
> If everything is an object in JavaScript, then why is Object
a function?
Same as Answer 1.
> Also, how is a function actually implemented inside JavaScript?
Different JavaScript engines 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 the JavaScript compiler?
Not sure what are you asking.
Solution 5 - Javascript
The ECMAScript reference is very nice for answering such questions.
- https://www.ecma-international.org/ecma-262/9.0/index.html#sec-ecmascript-language-types is the entry point about what types the language supports, and it introduces the concept that everything there is is either a rather standard value (boolean, string etc.), or an object. But no further types.
- https://www.ecma-international.org/ecma-262/9.0/index.html#sec-object-type explains the Object Type. At heart, it's a collection of attributes and/or accessors (think getter/setter). This also introduces the term "function object".
- https://www.ecma-international.org/ecma-262/9.0/index.html#sec-object-internal-methods-and-internal-slots shows the internal semantics, internal methods etc. of objects. At the end of that section, specifically, the "function object" specific internals ("Call" and "Construct") are described, including little details like the constructor being optional.
Hence, to answer your question: Foo
can be nothing but an object (because everything else on the menu is a basic value type). Hence, Foo()
is a special syntax which simply invokes the internal Call
method of that object. But Foo
itself is an object through and through, you can do with it everything else you can do with any other object, including setting arbitrary attributes on it.
Having a method defined on an object simply means that there is an attribute with that name, and the attribute references an object, which happens to be a "function object".
Something which can be used as a constructor is, again, simply an object which happens to have a Construct
internal method, and the syntactic sugar to call it.
As you know, there are no classes in JavaScript, it's a prototype-based object-oriented language (it's as object-oriented as you can get, it literally has nothing else). So any kind of "prototype" is just a link between objects. A constructor method (as explained in the link given above) simply calls the constructor method with the object on which it was called (i.e., something like String
) as an argument, just like the language would call Call
with this
being the object the method has been invoked on.
Solution 6 - Javascript
Object
is the constructor function of all objects. So, typeof Object==="function"
Here is a snippet for visualisation:
console.log(typeof Object) //function (which is an object)
var object=new Object() //An instance of Object 'class'
console.log(typeof object) //object
console.log(object instanceof Object) //true, because object is created by Object()
Function
is the constructor function of all functions (including itself...)
So, although not everything is a function, but most of the Uppercase native identifiers refer to a constructor function.
Solution 7 - Javascript
Yes, Object is of type function. It is a class/Function implementation which when invoked with new (new Object()
) will result in an object with allocated memory.