Detecting property of caller function

JavaScript
1

How do I detect the properties of the caller function? I want the called function to return different values to the caller depending on the property called with the function.

For example, if the caller function has the property x with the value test , I want the original function to return "y; value:" + valueOfX ( "y; value:test" ). Likewise if the caller function has property a with value of test2 , I want the original function to return "b; ValueOfA:" + valueOfA ( "b; ValueOfA:test2" ). If the caller function has no property, I want it to return n .

I’ve tried searching it up but only got answers on detecting the caller function, not the properties.

Thanks.

3

By caller function I mean something like this:

info("joe").age("27")

or

info("joe").age = "27"

(both should work) where the original function is something like

function info(name){[code here]},

the property is

.age,

and the property value is

"27".
5

I want it to return different things depending on the property or whatever the .age part is called.

7

I don’t have a fully developed function yet but it would go something like this:

function info(name){
age: function(age){
name = age //set age as name
}
}
8

Or for example

function myFunction(element){
html: function(html){
return document.querySelector(element).innerHTML
}
}

so myFunction(“body”).html(“hi”) or myFunction(“body”).html = “hi” will change the bodies inner HTML to hi.

10

I’m looking for a valid way to do this.

12

Although is not completely clear what you want to accomplish, or more importantly why, this question intrigues me. The functionality you are trying to obtain reminds me of jQuery library, I think you should check that out.

What you describe is a function that returns an object in wich you can call methods and set properties. As far as I know there is no way to have an object with a property and a method with the same name, so you wont be able to do both: function().html = 'something' and function().html('something').

Nevertheless similar behavior can be obtained with minimal changes by calling the method differently. For example prefixing the method with ‘set’, like: function().setHtml('something'). Another thing that works is capitalization, as having a method named Html is different from a property html.

I’ve made an example query function that receives a selector parameter and allows to get and set the innerHtml and style of the element that corresponds to the given selector. The function returns an object where you can call setHtml() and setStyle(), also has html and style properties.

An example use of the function would be:

query('body')
.setHtml('Hi')
.setStyle({ "text-align": "center" });

As you can see the methods are chainable, because each method returns the same object so you can keep invoking methods. If you dont need to chain more methods or just want to get the value of the properties you can use for example:

query('body').html = 'Hello';  //  to set
const someVar = query('body').html;  //  to get

This is just an example, to be useful the query function would have to be extended with methods to get and set other needed properties of html elements. If this is what you need then the answer is to look at jQuery or other libraries for DOM manipulation like React.

Finally, i’ll leave here the code of the query function in case the example’s link breaks some day.

query function 
function query(selector) {
  return {
    element: document.querySelector(selector),
    get html() {
      return this.element.innerHTML;
    },
    set html(value) {
      this.element.innerHTML = value;
    },
    setHtml(value) {
      this.html = value;
      return this;
    },
    get style() {
      return this.element.style;
    },
    set style(properties) {
      for (const [key, value] of Object.entries(properties)) {
        this.element.style[key] = value;
      }
    },
    setStyle(value) {
      this.style = value;
      return this;
    }
  };
}
13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.