Naked JavaScript - Function Access And Invocation

In part 3 of the series Naked Javascript , we are going to talk a little more about functions in Javascript. In the previous article, we just got a basic introduction to JavaScript functions. In this part and the parts that follow, we are going to rip them apart.

Ok, the first thing that you need to know is that - Functions are Awesome. And thats with a capital A(and a capital F!).

function boring(msg){
 console.log('oh, this is so so conventional '+ msg);
};
 
boring('You are killing me!');

2) The unusual way - anonymously

(function cool(msg){
 cool('Do you think that I am cool? ' + );
})('Totally!');

3) Using the Call method

function callMe(msg){
 console.log('Thanks for calling us ' + msg);
}
 
callMe.call(this, 'Yea, right..');

The syntax for the call is pretty straightforward. The first argument is the context in which the function is to be invoked. The remanining arguments, that you provide as comma separated values is are sent as arguments to the function.

4) Using the Apply method 

function applyMe(msg){
 console.log('Do you want me to apply something? ' + msg);
}
 
applyMe.apply(this,['yes']);

This syntax is similar to the call syntax. The only difference being the fact that you need to pass an array as the parameter to the function instead of a comma separated list as you did in the syntax for call.

We saw the first two techniques in the previous post. But what makes the last 2 techniques so awesome? The answer lies in understanding the concept of a function context and a better understanding of the syntax of accessing properties in Javascript.

Lets talk about the object syntax first. As we saw earlier, functions can be declared on objects as if they are normal properties. In fact, they are normal properties(albeit on steroids, but thats a secret...). Now, the world and its mother knows that one can access properties of objects using the dot operator. But thats convetional and not to mention, dead booring(because we do it all the time). Javascript to the rescue! Javascripts makes things a bit more interesting for us by allowing you to access objects using a different syntax, like a map. For example, check out the code below

var bingo = {name:'xyx', desc:'I am Mr Bingo'};
 
//The uncool way of accessing a property of an object
console.log(bingo.name);
//The cool way of accessing a property of an object
console.log(bingo['desc']);

var bingo={};
bingo.sayHello=function(){
 console.log('hello');
};
 
bingo.shout=function(){
 console.log('Scream at the top of my lungs');
};
 
function doAsISay(funcName){
 bingo[funcName]();
}
 
doAsISay('sayHello');
doAsISay('shout');