Can a function be declared as a variable in JavaScript?

Question

Consider the following JavaScript object definition :

var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

I know that if we want to use the object property(i.e. a function) we have to write the following code :

person.fullName();

As per my knowledge, JavaScript objects are containers for named values called properties or methods.

Also, I know that I can define the object properties like firstName, lastName, id as individual variables. Now, my question is can I also define the function "fullName" as a variable? If it is possible then how? and if not then why?

Thank You.

Answer 1

Yes

Here is simple answer with example to your question

jQuery(document).ready(function() {
    window.$ = jQuery;
    initializeGlobelCalls.init();   
});

var initializeGlobelCalls = function () {
    var validatefunction = function() {
        $(document).on('click','#divid',function(){//event trigger when you want to call function
        //your function code
        });
    };
return {
        init: function () {
          validatefuction();//can add multiple functions here
        }
       };
 }();

with this structure you can write multiple functions ,first need to define function like validatefunction and then add into init

Answer 2

In JavaScript a variable can point to function as well.

Example:

var fullName = function(param) {
  return param;
}

console. log(fullName('some text')); 

Answer 3

It is not possible unless you generate fullName when creating the object such as the following:

var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : ''
};
person.fullName = person.firstName + person.lastName;

Otherwise there's no way to create a static variable only one that will be created by the function when called (such as in your original example). That is not possible because by the way JavaScript was designed, you can't have dynamic properties assigned statically (apart from ES6 getters as cited below, which will still generate the value on every call) in a way that they'll only be generated once automatically without some kind of algorithm from your part or a library to do that for you.

As I cited above, you can try ES6 getters but that will only make it look like a property, it will still get called every time it is accessed:

Example:

var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    get fullName() { return this.firstName + ' ' + this.lastName; }
};

Then you'd access it like this: person.fullName

Answer 4

It is possible. Note that your code is equivalent to this code:

var person = {};
person.firstName = "John";
person.lastName = "Doe";
person.id = 5566;
person.fullName = function() {
  return this.firstName + " " + this.lastName;
}

The important bit to see is that function() { return this.firstName + " " + this.lastName; } (or rather, the result of evaluation of that string of code) is a value, just like 5566 is, and can be contained in a property, or a variable, or an array... just like 5566 can. The only difference is, one is a number, the other - a function.

Besides the original example of a function stored in a property ("method"), here is an example of a functional value being stored in a variable:

var sayHello = function(name) { console.log("Hello, " + name); }

Here it is in an array:

var adders = [
  function(x) { return a; },
  function(x) { return (a + 1) % 3; }
  function(x) { return (a + 2) % 3; }
];

Here it is being passed as a parameter:

function twice(f, x) {
  return f(f(x));
}
twice(function(x) { return x * 2; }, 7);
// 28