Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Passing Argument to JavaScript Object Getter

var URIController = {
    get href() {
        return url.location.href;
    }
}

I have above object structure. But URIController.href property depends on another object, url.

If the url is defined globally, URIController.href works. But I want to pass url object to href getter manually.

var URIController = {
    get href(url) {
        return url.location.href;
    }
}

Changed the getter to accept url parameter but

URIController.href(url)

throws error because href is not a function.

Is it possible to pass arguments to getter in javascript?

like image 279
John Bernard Avatar asked May 21 '16 17:05

John Bernard


3 Answers

Getters do not require explicit invocation with parentheses and cannot therefore accept arguments. Their invocation is implicit via standard property access syntax, e.g. URIController.href.

From getter documentation on MDN:

The get syntax binds an object property to a function...

  • It must have exactly zero parameters

______

If you need to accept arguments, use a function instead:

var URIController = {
    href: function (url) {
        return url.location.href;
    }
}

Or using ES6 object function shorthand syntax:

const URIController = {
    href (url) {
        return url.location.href;
    }
}
like image 164
sdgluck Avatar answered Nov 19 '22 15:11

sdgluck


As per the spec

The production PropertyAssignment : get PropertyName ( ) { FunctionBody } is evaluated as follows:

...

  1. Let closure be the result of creating a new Function object as specified in 13.2 with an empty parameter list and body specified by FunctionBody.

So you cannot specify a parameter list, attempting to do so will give you a syntax error

var obj = {
    get href(param){}     
}

If you do not want to setup a normal function you could do a couple workarounds like set a property on the class instance/object that the getter would then read. Or you could use a closure upon creating your object then your getter could access it from the outer scope.

As an instance/object property

var obj = {
    url:null,
    get href(){
       return this.url ? this.url.location.href : "";
    }
}

obj.url = {location:{href:"http://stackoverflow.com"}};
console.log( obj.href );

With an enclosure

function URIController(url){
    //You could also use `Object.defineProperty` to 
    //create the getter on a existing object
    return {
       get href(){
          return url.location.href;
       }
    }
}
var obj = URIController({location:{href:"http://stackoverflow.com"}});
console.log( obj.href );
like image 8
Patrick Evans Avatar answered Nov 19 '22 14:11

Patrick Evans


No, you can't pass an argument to a " getter " use a " setter " rather.

like image 6
rudi Ladeon Avatar answered Nov 19 '22 13:11

rudi Ladeon