Understanding JavaScript Functions

JavaScript is a functional programming language and it is essential to truly understand functions to achieve mastery of the language. In JavaScript, functions are pretty much at the same level as objects: you can assign functions to variables, access function properties, pass them in as parameters to other functions or invoke them using the function operator.

JavaScript Function Names

Like many other languages, JavaScript supports named and anonymous functions. Well, named functions have names and anonymous functions are anonymous :) . So how would you know an anonymous function?

function namedFunc () {};

console.log(namedFunc.name);

//logs "namedFunc"

Unless you assign a reference to an anonymous function on creation, it will be impossible to reach afterwards. The common var func = function () {} pattern is the workaround for this; note that the variable is not the function – it is only a reference to the location of the anonymous function.

var anonymousFunc = function () {};
console.log(anonymousFunc.name);
// Empty String

Aaaah… assigning an anonymous function to a variable does not a named Function make. :)

Referencing JavaScript Functions

You can assign named and anonymous functions to variables, you are simply getting a reference to the function.

var known = function knownFunc() {};
console.log(known.name);
// knownFunc

And then it gets even more interesting… The handles are just pointers to memory locations and it is possible to reassign them as you wish.

var initialRef = function () {
    console.log("Initial handle");
};

var laterRef = initialRef;
initialRef = function () {
    console.log("New handle");
};

initialRef();
laterRef();

So what do you think the initialRef and laterRef calls print out? “New Handle”? Well I thought so too but the output is surprising:

initialRef();
//logs New handle

laterRef();
// logs Initial handle

References are just pointers to function memory locations; if one reference is re-assigned,  the other references continue to point to the initial memory location. It makes no difference if you use named functions too: you cannot edit a function once it has been created, you can only change its reference.

JavaScript Function names are readonly

Just so you know, the name property of functions is read only and does not throw an error if you write to it. Aside, this feature is not available on IE.

function readOnlyName () {};
readOnlyName.name = "Changed";
console.log(readOnlyName.name);
//logs readOnlyName

The JavaScript function invocation expression

The JS function operator is the () and it allows you to invoke any function expressions. Anonymous functions are invoked by appending () to their references (as shown in examples above).

This means that any function expression can be invoked using the () call, it just necessarily have to be an explicit function declaration or function reference. While this might sound trivial, this is the feature that makes Immediately Invoked function expressions (IIFEs) possible.

I do hope you’ve learnt something new about the JS function; upcoming posts will insha Allaah cover more about JS functions (things like IIFEs, function scope and forward referencing aka hoisting).

Did you enjoy this post? Check out some of my other articles

1. Static and Instance Methods in JavaScript
2. A peek into JavaScript’s Array.prototype.map and jQuery.map
3. Programming Language Type Systems II
4. Design Patterns: PubSub Explained