Why are JavaScript function objects allowed to differ from the string to value map format?

Question

In JavaScript, objects have properties and values:

var o = {
    prop1: "value",
    prop2: 3
}

My understanding is all JavaScript objects must look like this (i.e. have properties and values only). But, functions (I'm not talking about methods) are objects too:

function f() {
    console.log("Hello");
}

Why is it possible for my function object to differ from the {property:value} style of object that is o?

Update: To try to explain my question further:

Objects are described in almost every book I've ever read as string to value maps. For example, they map a property name to a property value:

{
    property1: value,
    property2: value
}

Functions are objects, however they do not look at all like string to value maps:

function my_f() {
    // code here.
}

Why are function objects allowed to differ from the string to value map format?

Answer 1

Well, In javascript, functions can be treated as Classes in other Object Oriented Languages.

This means that you can instantiate a new object from the function using the new keyword

Example:

function myFunc(){
   //Some code goes here
}

var myObj = new myFunc();

You can attach properties to this Class using this keyword

Example:

function myFunc(){
    //this is a public property for any myFunc object
    this.name="My_Name";

    //this is a private property
    var age = 22;
}

var myObj = new myFunc();
console.log(myObj.name); //Will output "My_Name"
console.log(myObj.age); //undefined

Answer 2

Everything is object in JS.

var o = {
    prop1: "value",
    prop2: 3
}

is just a shortcut for object creation instead of using the Object constructor(and is fast too). Same goes with functions. Consider

var adder = new Function('a', 'b', 'return a + b'); console.log(adder.prototype)

Its an object with the constructor and other properties with corresponding values.

Answer 3

After 5 minutes of looking into your question with a wierd look i think i finally understood what you want to know.

You, in-fact, ask why is the consistency of the Object in javascript is different when using function or key:value kind of option.

Well, javascript is a

dynamic, weakly typed, prototype-based language with first-class functions

If I can quote wikipedia here.

This means that everything in this so-called language is Object base, if you know c# from example, its like everything is object type and there aren't any other primitive-type objects.

With that being said, object is mostly like a memory entry and not a real value of things, unlike int, string, char etc.

Therefore, functions are actually stored in memory as same as objects do. if you look on other elite-type languages you can see that object there can store perhaps everything, even an entire solution, it doesn't have any bounds.

In unrelated matter, I would like to recommend you to read about "boxing" and "unboxing" of elements to understand the idea behind objectifying stuff.

Why are function objects allowed to differ from the string to value map format?

Exactly because its just a memory reference and the "syntax" isn't really important, if you try to execute some operation that belongs to a method and not for a normal type object like {key: "value"} the execute will first approach the object in the memory and try to operate () on it, it will throw an error unless the () operation is defined for this object.

hope I made myself clear enough

EDIT

ok, ill explain more, as you wish. basically there are 2 ways in which data storing is occurring.

1. Heap memory (not the data structure), if to quote Wikipedia again is

very simple explanation is that the heap is the portion of memory where dynamically allocated memory resides

In easy words, it means you save something by its value and you use it in different ways as value.

so you ask yourself, what does it mean "not by value"

2. Memory reference (stack), that means that every non-primitive object you create is assigned with its own memory address, in fact every time you create an object you're allocating space in your memory, just to be clear, all javascript's data storing is done by this way, unlike any elite-type language such as java,c,c++,c# and so on.. now, why am i saying this? because when i create an object, a reference, i can create a reference to whatever i want to, it can be an object that describes Human, function, document or even a file. I will be very careful with what im about to say, javascript doesnt let you distinct between objects, an object is an object, of course each has its own properties, but that is only important when you try to execute things with that object.

if you are familiar with c# (always bringing this up because its commonly wide-spread language) you'll notice that you have both objects that you create, methods, threads,task,solutions and possibly every type of data, and they are all objects before they are themselves.

as to conclude: object in javascript is a matter of principle and not data type.

encourage you strongly to read an article, heap vs stack

Answer 4

I think what you're asking about is, at its heart, the difference between a function declaration and a function expression. These are just different ways that Javascript allows variables/properties of type Function to be created.

You can, of course, define a function as the inline value for a property, as you would any object literal:

var Foo = {
  bar: function(){
    console.log("bar");
  }
};

You can also define as a property this way:

var Foo = {};
Foo.bar = function(){
  console.log("bar");
};

Or you can assign the result of the function expression directly to a variable:

var bar = function(){
  console.log("bar");
};

These examples should demonstrate that functions are like any other variable/property in Javascript. They have a type, just like a String or a Number. A string is also an object, but you don't need curly braces to create a string:

var foo = "foo";

A function declaration, as you're describing in your question is a slightly different way of defining a function:

function bar(){
  console.log("bar");
}

I believe that they included this additional function syntax in the language for one main reason: hoisting.

Including this alternate syntax that hoists function declarations "up above" other expressions allows coders to be a little bit more loose with the order in which they define their variables and functions.

There are arguments to be made both in favor of function declarations and function expressions, but I tend to use the function expression syntax, as I like that it is more consistent and less surprising for new team members.

UPDATE:

Perhaps you are overthinking this idea that "Objects are described in almost every book I've ever read as string to value maps. For example, they map a property name to a property value:"

A string is an Object, a function is also still an Object. Try this:

var foo = "foo";
foo.bar = "bar";
console.log(foo, foo.bar);

Or this:

var foo = function(){
  console.log("foo");
};
foo.bar = function(){
  console.log("bar");
};
console.log(foo(), foo.bar());

The syntax for creating object literals in Javascript can involve defining the key/value pairs, yes. But there are lots of ways to create variables and properties of various types, many of which ultimately inherit from the Object prototype, including the Function type.

The different syntaxes all result in the same types of Objects being created. The only thing that matters is the order of declaration/execution, as defined by the hoisting rules.

Answer 5

After doing a little more research of my own, I found out function objects are a special type of object. Aside from being a regular object which has any number of properties and values, function objects are also callable blocks of code. This extra "capability" (I couldn't think of a better term) is something that is added by JavaScript itself.