DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Naked JavaScript - Function Access And Invocation

Naked JavaScript - Function Access And Invocation

Ryan Sukale user avatar by
Ryan Sukale
·
May. 11, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
2.22K Views

Join the DZone community and get the full member experience.

Join For Free

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!).




In Javascript, functions are first class objects. A function is an object with a special ability - the ablility to be invoked. There are basically 4 ways in which you can invoke a function.

1) The usual way

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']);

Note the special syntax that we used to access the desc property. We simply used the property name as a string in inside the brackets and were able to access the value of the property. This means that objects can be accessed as if they are key-value maps. This is a really cool feature when it comes to functions because functions are objects too. And that means that even they can be accessed via the same technique. This makes it possible to write something like this

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');

Did you see that!! You can dyanmically pass the function name as a parameter. So you can invoke a function at runtime and not even need to know its name. The doAsISay function acts as a function invoker and invokes any function that is available on the bingo object.

An advantage of using the map syntax for accesing object properties is that it lets you use reserved keywords as keys without the runtime complaining about it. Althouth, I dont think it makes good sense to use keywords as object properties since no matter what programming background you come from, watching a keyword being used anywhere always tends to trigger a train of thought that may not be on the same track of the program that you are working on. However, in a few corner cases, if you do find the need to use reserved keywords as object keys, you are more than free to do so.

We are still not done with functions. Functions are the heart of Javascript, and like all matters of the heart, this one will take its time too. In the next article, I am going to contine with functions and give them another shot to exhibit their awesomeness
 
 

 

 

 

JavaScript Object (computer science) Syntax (programming languages) Property (programming)

Published at DZone with permission of Ryan Sukale. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Synchronization Methods for Many-To-Many Associations
  • How to Determine if Microservices Architecture Is Right for Your Business
  • Refactoring Java Application: Object-Oriented And Functional Approaches
  • How to Leverage Method Chaining To Add Smart Message Routing in Java

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo