CODEWITHSUNDEEP
javascriptfunctionobject
Brummy
Brummy

Reputation: 193

JavaScript - Functions as objects

The concept of functions being objects in JavaScript would be ok with me if I could understand the following question. I have searched around and looked into the javascript engine to try and find the answer, but no explanation I've found so far sits well in my mind...

An object like the one below is understandably layed out in a hash map type of construct.

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

However, to say this is also an object is where I get stuck:

var name = function () {
    alert ('name');
}

  1. In terms of memory, how is this function stored?

  2. Are the statements inside the "hash map" of a function layed out in an execute order? So each property is called upon after the other?

I'm probably missing something or visualising something wrong.

Thanks.

P.S

To clear up question 2,

Say I have an if statement inside my function... will that be stored in a property accessible through one of its properties?

Upvotes: 2

Views: 207

Answers (4)

Bergi
Bergi

Reputation: 664247

Every object in javascript has properties (key-value pairs identified by strings or symbols) and it has internal slots.

The function object name is stored in the same format as the person object, but their internal slots differ.

  • person's properties are firstName, lastName, age and eyeColor, each holding the respective primitive value

  • person's internal slots are (amongst others):

    • [[prototype]], pointing to Object.prototype

  • name's properties are name, prototype and length (as typical for Function instances)

  • name's internal slots are (amongst others):
    • [[prototype]], pointing to Function.prototype
    • [[ECMAScriptCode]], pointing to the code of the function
    • [[Environment]], pointing to the scope the closure was created in

Disclaimer: That's only how it behaves, engines may implement this however they want. Still, it serves well as a mental model, and it's important to understand that objects have a layer below the publicly visible properties.

Upvotes: 3

Mark Bolusmjak
Mark Bolusmjak

Reputation: 24399

The answer to 1. is: It depends on the implementation.

The 2nd question doesn't make any sense.

I think you are looking at the syntax, and assuming that because the way data is declared, and the way functions are declared, that a function can be treated as data in the language.
This is not the case.

There are languages where this IS the case. Lisps and Prolog being the most common examples. see: https://en.wikipedia.org/wiki/Homoiconicity

Upvotes: 1

Hamish
Hamish

Reputation: 23316

Functions are objects, in that they can have properties and methods. Unlike objects, they can also be called and will always return a result.

Note that the ECMAScript (i.e. JavaScript) language specification describes how Function objects should behave rather than underlying implementation, so the in-memory representation of the object will depend on implementation.

Regarding 2: Note that the full text of a Function might be stored in the functionBody property, however the body of a Function does not have to be JavaScript. It could be native code, for example, that is not meaningful to return in a string.

Upvotes: 3

Andrew Willems
Andrew Willems

Reputation: 12448

If you just want to do regular JavaScript coding, I don't think you really need to worry about how the function is stored by the browser or server or whatever. I do think you are misunderstanding the object-nature of a function. The lines of code inside the function are not individual parts of a hash map. Rather (and this only begins to touch on the concept), a function can have properties with names and values just like a regular object can have such properties. The following code demonstrates this.

var myFunc = function() {
  var x = "hello".toUpperCase();
  document.write('<p>' + x + '</p>');
};

myFunc.favoriteColor = "red";

myFunc(); // runs the function and shows the text "hello"
document.write("<p>" + myFunc.favoriteColor + "</p>"); // shows the text "red"

Upvotes: 1

Related Questions