Skip to content
Cuelogic
  • Services
        • Product Engineering
          • Product Development
          • UX Consulting
          • Application Development
          • Application Modernization
          • Quality Assurance Services
        • Cloud Engineering
          • Cloud Services
          • DevOps Services
          • Cloud Migration
          • Cloud Optimization
          • Cloud Computing Services
        • Data & Machine Learning
          • Big Data Services
          • AI Consulting
        • Internet of Things
          • IoT Consulting
          • IoT Application Development
        • Innovation Lab as a Service
        • Cybersecurity Services
        • Healthcare IT Services
  • Company
    • About
    • Culture
    • Current Openings
  • Insights
Tell Us Your Project  ❯
Product Development

The hidden life of JavaScript function properties

4 Mins Read

I received this useful peace of information regarding the JavaScript function properties from @gregsidelnikov 's newsletter. @gregsidelnikov is been posting very useful javascript/jquery tips, following tip really useful & is one of my favourite:

Everyone knows what functions are. We can define and call them. In JavaScript almost everything is an object. Even strings can be constructed by creating a new object (vs. just defined with the literal string value:)

var str = new String("Hello");

Functions are objects too. Objects of type Function . Therefore we can create them in this rather peculiar way:

var add_two_numbers = new Function(" arg1 ", " arg2 ", "return arg1 + arg2;");

This would be the exact equivalent to doing the following:

function add_two_numbers( arg1, arg2) { return arg1+arg2 }

What's next -- now that we created a function?

Accessing function properties

It's amazing what kind of tools JavaScript offers us when it comes to working with functions. For the most part you will probably be comfortable with simply defining them and calling later on. But we are also given properties I personally didn't know about until just recently.

We can actually retrieve the function's name as a string from within the code. This way we know which function is being called. And also which function called the function that is being currently executed. These properties are located within the function's prototype object. And some within the function's arguments property. Which, we can modify ourselves. Or simply retrieve existing values from it:

arguments (Deprecated as prototype property ; but we can use arguments object instead)
An array corresponding to the arguments passed to the function.

arity (it is deprecated, but we can use length property instead)
The number of arguments expected by the function.

caller (non-standard JavaScript)
Refers to the function that invoked the function that is being currently executed.

constructor
The constructor of the function. Function constructors create the prototype object.

length
The number of arguments expected by the function.

name (non-standard JavaScript; the name of the function that was called.)
The name of the function being executed.

Notes: arguments.callee is forbidden in strict mode. And I am not sure how cross-browser it is.

arguments.callee.length is the number of arguments received by the function. It could be less than the number of arguments specified:

arguments.length is the number of arguments specified in function definition.

caller , callee , and arguments properties may not be accessed on strict mode functions or the arguments objects for calls to them. They appear to be deprecated in ES5 and removed in strict mode. For us it means that this may not work in all browsers. Be careful.

There are two different ways to access the same properties. Through the function's constructor object ( Function ) and through the arguments object which exists in all functions.

However, Function.caller is implemented in all currently existing browsers. When getting caller from the currently executed function, use the callee (its own) literal name to access it:

function fn () {
var caller = fn . caller.name;
}

While arguments.caller is deprecated in favor of Function.caller . Sticking to Function.caller is better in this case.

Because these properties are not available in all browsers in all modes (strict or not) the thing about these extras is that we can use them in projects that run locally in our favorite browser (and are not designed for the Internet.) For example, I am using an article publishing program I wrote myself. I always run it in my favorite browser: Google Chrome, where many JavaScript features work that may not in other browsers. Remember that not all JavaScript programs are meant for the public Internet.

And finally, here is source code for obtaining various properties of the function:
function show_props (a,b,c,d,e)
{
var msg = "function name = " + arguments.callee.name + "n";
msg += "called from = " + show_props.caller.name + "n";
msg += "arguments.length = " + arguments.length + " argument(s) were passed.n"
msg += "show_props.length (arity) = " + show_props.length + " argument(s) are defined total.n";
msg += "arguments = " + arguments + "n";
for (var i = 0; i < arguments.length; i++)
msg += "arguments[" + i + "] = " + arguments[i] + "n";

msg += "And arguments.callee.toString() is the function's literal body in string format = n" + arguments.callee.toString() + "n";

alert( msg );
}

function parent ()
{
show_props (1,2,3);
}

parent ();

The result is shown below:

function name = show_props
called from = parent
arguments.length = 3 argument(s) were passed.
show_props.length (arity) = 5 argument(s) are defined total.
arguments = [object Arguments]
arguments[0] = 1
arguments[1] = 2
arguments[2] = 3
And arguments.callee.toString() is the function's literal body in string format =
function show_props(a,b,c,d,e)
{
var msg = "function name = " + arguments.callee.name + "n";
msg += "called from = " + show_props.caller.name + "n";
msg += "arguments.length = " + arguments.length + " argument(s) were passed.n"
msg += "show_props.length (arity) = " + show_props.length + " argument(s) are defined total.n";
msg += "arguments = " + arguments + "n";
for (var i = 0; i < arguments.length; i++)
msg += "arguments[" + i + "] = " + arguments[i] + "n";

msg += "And arguments.callee.toString() is the function's literal body in string format = n" + arguments.callee.toString() + "n";

alert("msg");

As you can see we can even output the body of the function that is being executed from within itself, as a string.

Use the Function object (in this case the literal name of the function show_props itself) and the arguments property to gather insight into which function called which, parameter names, number of parameters and function names.

Tags
Share This Blog
Share on facebook
Share on twitter
Share on linkedin

People Also Read

DevOps
What is Infrastructure as Code and How Can You Leverage It?
8 Mins Read
Quality Engineering
Cypress vs. Selenium: Which is the Superior Testing Tool?
7 Mins Read
Product Development
Micro Frontend Deep Dive – Top 10 Frameworks To Know About
10 Mins Read

Other Categories

case study
Case Studies
e book
E-Book
video
Webinars
Subscribe to our Blog
Subscribe to our newsletter to receive the latest thought leadership by Cuelogic experts, delivered straight to your inbox!
Services
Product Engineering
  • Product Development
  • UX Consulting
  • Application Development
  • Application Modernization
  • Quality Assurance
Menu
  • Product Development
  • UX Consulting
  • Application Development
  • Application Modernization
  • Quality Assurance
Data & Machine Learning
  • Big Data Services
  • AI Consulting
Menu
  • Big Data Services
  • AI Consulting
Innovation Lab as a Service
Cybersecurity Services
Healthcare IT Solutions
Cloud Engineering
  • Cloud Services
  • DevOps Services
  • Cloud Migration
  • Cloud Optimization
  • Cloud Computing Services
Menu
  • Cloud Services
  • DevOps Services
  • Cloud Migration
  • Cloud Optimization
  • Cloud Computing Services
Internet of Things
  • IoT Consulting
  • IoT App Development
Menu
  • IoT Consulting
  • IoT App Development
Company
  • About
  • Culture
  • Current Openings
Menu
  • About
  • Culture
  • Current Openings
We are Global
India  |  USA  | Australia
We are Social
Facebook
Twitter
Linkedin
Youtube
Subscribe to our Newsletter
cuelogic

We are Hiring!

Blogs
  • What is Infrastructure as Code and How Can You Leverage It?
  • Cypress vs. Selenium: Which is the Superior Testing Tool?
  • Micro Frontend Deep Dive – Top 10 Frameworks To Know About
  • Micro Frontends – Revolutionizing Front-end Development with Microservices
  • Decoding Pipeline as Code (With Jenkins)
  • DevOps Metrics : 15 KPIs that Boost Results & RoI
Menu
  • What is Infrastructure as Code and How Can You Leverage It?
  • Cypress vs. Selenium: Which is the Superior Testing Tool?
  • Micro Frontend Deep Dive – Top 10 Frameworks To Know About
  • Micro Frontends – Revolutionizing Front-end Development with Microservices
  • Decoding Pipeline as Code (With Jenkins)
  • DevOps Metrics : 15 KPIs that Boost Results & RoI
cuelogic

We are Hiring!

Blogs
  • What is Infrastructure as Code and How Can You Leverage It?
  • Cypress vs. Selenium: Which is the Superior Testing Tool?
  • Micro Frontend Deep Dive – Top 10 Frameworks To Know About
  • Micro Frontends – Revolutionizing Front-end Development with Microservices
  • Decoding Pipeline as Code (With Jenkins)
  • DevOps Metrics : 15 KPIs that Boost Results & RoI
Menu
  • What is Infrastructure as Code and How Can You Leverage It?
  • Cypress vs. Selenium: Which is the Superior Testing Tool?
  • Micro Frontend Deep Dive – Top 10 Frameworks To Know About
  • Micro Frontends – Revolutionizing Front-end Development with Microservices
  • Decoding Pipeline as Code (With Jenkins)
  • DevOps Metrics : 15 KPIs that Boost Results & RoI
We are Global
India  |  USA  | Australia
We are Social
Facebook
Twitter
Linkedin
Youtube
Subscribe Newsletter
Services
Product Engineering

Product Development

UX Consulting

Application Development

Application Modernization

Quality Assurance Services

Cloud Engineering

Cloud Services

DevOps Services

Cloud Migration

Cloud Optimization

Cloud Computing Services

Data & Machine Learning

Big Data Services

AI Consulting

Internet of Things

IoT Consulting

IoT Application Services

Innovation Lab As A Service
Cybersecurity Services
Healthcare IT Services
Company

About

Culture

Current Openings

Insights
Privacy Policy  
All Rights Reserved @ Cuelogic 2021

Close