Unsure how to convert method definition to ES6 - javascript

I'm currently in the process of converting our Backbone application to ES6 syntax like e.g. this:
action: function(e){},
Becomes
action(e) {}
However, now I'm having this code:
throttleEvent: _.throttle(function(e) {
//do stuff
}, 500);
}
And I can't seem to find how to convert this to valid syntax.
I tried
throttleEvent _.throttle((e) => {
//do stuff
}, 500);
}
And
throttleEvent() {
return _.throttle((e) => {
//do stuff
}, 500);
}
But these all failed to work.
Help converting this to the valid syntax would be appreciated.

Well I'm not quite sure if the short syntax is applicable for your example.
Lets have a look at your start
action: function(e){},
you have an object, that object has a property called "action" and that property holds a function that later then can be called by obj.action().
Now to your example
throttleEvent: _.throttle(function(e) {}
Again you have an object, that has a property called throttleEvent. But the main difference is the value. The value is the return Value of the function _.throttle().
Taking from the documentation (https://lodash.com/docs/4.17.4#throttle)
Creates a throttled function that only invokes func at most once per every wait milliseconds
So your property actually holds the function that you got returned from the library. That explains why your second approach does not work. Because in this version every time you call the object property, you create a new throttle function.
(And to your first solution I think this is invalid syntax)
I think the best approach if you really want to use the short syntax is, assigning the throttle function to a variable before and then use it
For example something like this
const throttleFunction = _.throttle((event) => {
//do stuff
}, 500);
const obj = {
throttleEvent(event): any {
return throttleFunction(event);
},
};
But then it is to decide whether the ES6 syntax makes sense in this case or if you just stick with your original version
throttleEvent: _.throttle(function(e) {
//do stuff
}, 500)
Just because there is a different syntax available, does not mean you always have to use the new one. In some cases the "old one" makes actually more sense

try this syntax:
_.throttle(() => //Do stuff, 5000)

Related

module pattern setters that has methods

EDIT:
Everything is working as I expected. It was just an error calling the template method. I mistyped a () so I was trying template.method instead of template().method;
Anyway, if somebody would like to explain me if this is a valid design pattern or if I should go in a different way I will be definitively very grateful.
I read about the module pattern and I'm trying to implement it in some of my projects. The problem is that, in my opinion, I'm twisting it too much.
I'm inspired by the google apps script style where many objects returns other objects with methods and so on and they pass arguments.
something like
object.method(var).otherMethod();
What I want to achieve is a method that receives a parameter, sets an internal variable to that parameter and then returns an object with methods that uses that variable. Here is a minified version of the code that does not work:
var H_UI =(function (window) {
var selectedTemplate,
compileTemplate = function(){},
parseTemplateFields = function(){};
//template subModule. Collect: collects the template fields and returns a JSON representation.
var template = function(templateString){
if(templateString) selectedTemplate = templateString;
return {
getHtml:function(){ return compileTemplate( parseTemplateFields( selectedTemplate ) ) } ,
collect:function(){
.. operating over selectedTemplate ...
return JSON.stringify(result)}
} };
return {
template:template
};
})(window);
If I remove the line :
if(templateString) selectedTemplate = templateString;
and replace selectedTemplate with the parameter templateString in the methods of the returned object it works as expected. I know that I cant create a set() method in the returned object and use it like this
H_UI.template().set(var)
But I find it ugly. Anyway I think that I'm messing things up.
What is the best way to construct this?
If you want H_UI.template() creates a new object every time you call template() on it, your solution does not work. Because the variable selectedTemplate is created only once when the immediate function is called.
However if your intent is this your solution works fine. (variable selectedTemplate is shared for all calls to template()).
But if you want to every call to template creates a new object. Please tell me to write my idea
Is this a valid design pattern or if I should go in a different way
Yes, enabling chaining is definitely a valid design pattern.
However, if your template() method returns a new object, that object and its methods should only depend on itself (including the local variables and parameters of the template call), but not on anything else like the parent object that template was called on.
So either remove that "global" selectedTemplate thing:
var H_UI = (function () {
function compileTemplate(){}
function parseTemplateFields(){}
// make a template
function template(templateString) {
return {
getHtml: function(){
return compileTemplate(parseTemplateFields(templateString));
},
collect: function(){
// .. operating over templateString ...
return JSON.stringify(result)
}
}
}
return {template:template};
})();
or make only one module with with a global selectedTemplate, a setter for it, and global methods:
var H_UI = (function () {
var selectedTemplate;
function compileTemplate(){}
function parseTemplateFields(){}
return {
template: function(templateString){
if (templateString)
selectedTemplate = templateString;
return this; // for chaining
},
getHtml: function(){
return compileTemplate(parseTemplateFields(selectedTemplate));
},
collect: function(){
// .. operating over selectedTemplate ...
return JSON.stringify(result)}
}
};
})();
The difference is striking when we make two templates with that method:
var templ1 = H_UI.template("a"),
templ2 = H_UI.template("b");
What would you expect them to do? In a functional design, templ1 must not use "b". With the first snippet we have this, and templ1 != templ2. However, if .template() is a mere setter, and every call affects the whole instance (like in the second snippet), we have templ1 == H_UI and templ2 == H_UI.

Dynamically add properties to the prototype object

I was wondering the best way to dynamically add properties to the prototype object of a function (or if it's even a good idea).
This is what I came up with:
['foo', 'bar'].forEach(function(method) {
String.prototype[method] = resolve;
});
function resolve() {
// Who the hell called me?
}
'str'.foo();
I'm calling the same function resolve() for all the new properties I've added and I need to check who called the function (which property name) in order to figure an implementation based on that information.
It's all a matter of curiosity, I'm doing some tests on crazy JavaScript API implementations.
Do you guys have any suggestions for this?
['foo', 'bar'].forEach(function (method) {
String.prototype[method] = function () {
resolve(method);
};
});
function resolve(method) {
alert(method);
}
("hello world").foo();
("hello world").bar();

undefined of something that is clearly defined

this must be some JavaScript concept that I am not grasping yet..
For some odd reason the id of thisSound returns undefined! why??
console.log("o: "+o.id+" - "+decodeURI(soundURL));
// create sound
thisSound = soundManager.createSound({
id:o.id,
url:decodeURI(soundURL)
});
console.log("thisSound: "+thisSound.id+" - "+thisSound.url);
the console :
o: Sound0 - http://api.soundcloud.com/tracks/76673175/stream?client_id=e992d357c0914e9b65ba17f459720fc0
thisSound: undefined - http://api.soundcloud.com/tracks/76673175/stream?client_id=e992d357c0914e9c65ba17f459720fc0
The code you provided doesn't “obviously” define the id of the returned object.
// create sound
thisSound = soundManager.createSound({
id:o.id,
url:decodeURI(soundURL)
});
Let's say I write the function createSound for you:
var soundManager = {
createSound: function (options) {
// do internal magic here
createSound(options);
// return public API here
return {
getId: function () {}
}
}
};
So, my point here is that if there is a third-party function, you should follow the docs of whoever created that function, and SoundManager apparently doesn't return an object with id property defined on it. It “returns a SMSound object instance” – and what is that object, please find out in the docs.
I know nothing about the soundcloud library, although the function createSoundseems asyncronous... (It's like I/O Stuff, the most of the I/O operations in javascript -and the other languages- are async ).. Is it possible when you have called the console.log thisSound hasn't been fully created yet? Maybe you could emulate a setInterval() behaviour with a lot of time and this code works... (although I believe you should use a callback function for this).

Node.js modules: correct way to refer to sibling functions

This is my current code:
var PermissionsChecker = {};
PermissionsChecker.check = function(id) {
PermissionsChecker.getPermissions(id);
}
PermissionsChecker.getPermissions = function(id) {
// do stuff
}
Two questions:
Is this the right way to construct node.js functions?
Is that line in .check the correct way to refer to a sibling function?
Thanks!
It's perfectly fine. Some notes:
Sibling function isn't really any standard term for methods of the same object. Minor note, but could cause confusion.
When a function is called as a method on some object, then the value of this inside that function refers to the object on which it was called. That is, calling check like this:
PermissionsChecker.check()
...allows you to write the function like this:
PermissionsChecker.check = function(id) {
this.getPermissions(id);
}
...which is more succinct and probably more common.
Nothing about your question is specific to node.js. This applies to JavaScript in the browser (or anywhere else), too.
You could save some typing by rewriting your example like this:
var PermissionsChecker = {
check: function(id) {
this.getPermissions(id);
},
getPermissions: function(id) {
// do stuff
}
};
So long as the function is called with PermissionsChecker.check(), you can refer to the object with this.
CodePad.
What you've done above is called an object literal, but you could choose the prototypal way also (when you need to instantiate objects - OOP stuff).
You can call this inside to refer to another object property:
PermissionsChecker.check = function(id) {
this.getPermissions(id);
}

Is there a way to catch an attempt to access a non existant property or method?

For instance this code:
function stuff() {
this.onlyMethod = function () {
return something;
}
}
// some error is thrown
stuff().nonExistant();
Is there a way to do something like PHP's __call as a fallback from inside the object?
function stuff() {
this.onlyMethod = function () {
return something;
}
// "catcher" function
this.__call__ = function (name, params) {
alert(name + " can't be called.");
}
}
// would then raise the alert "nonExistant can't be called".
stuff().nonExistant();
Maybe I'll explain a bit more what I'm doing.
The object contains another object, which has methods that should be accessible directly through this object. But those methods are different for each object, so I can't just route them, i need to be able to call them dynamically.
I know I could just make the object inside it a property of the main object stuff.obj.existant(), but I'm just wondering if I could avoid it, since the main object is sort of a wrapper that just adds some functionality temporarily (and makes it easier to access the object at the same time).
Well, it seems that with harmony (ES6), there will be a way, and it's more complicated compared to the way other programing languages do it. Basically, it involves using the Proxy built-in object to create a wrapper on the object, and modify the way default behavior its implemented on it:
obj = new Proxy({},
{ get : function(target, prop)
{
if(target[prop] === undefined)
return function() {
console.log('an otherwise undefined function!!');
};
else
return target[prop];
}
});
obj.f() ///'an otherwise undefined function!!'
obj.l = function() {console.log(45);};
obj.l(); ///45
The Proxy will forward all methods not handled by handlers into the normal object. So it will be like if it wasn't there, and from proxy you can modify the target. There are also more handlers, even some to modify the prototype getting, and setters for any property access yes!.
As you would imagine, this isn't supported in all browsers right now, but in Firefox you can play with the Proxy interface quite easy, just go to the MDN docs
It would make me happier if the managed to add some syntactic sugar on this, but anyway, its nice to have this kind of power in an already powerful language. Have a nice day! :)
PD: I didn't copy rosettacode js entry, I updated it.
There is a way to define a generic handler for calls on non-existant methods, but it is non-standard. Checkout the noSuchMethod for Firefox. Will let you route calls to undefined methods dynamically. Seems like v8 is also getting support for it.
To use it, define this method on any object:
var a = {};
a.__noSuchMethod__ = function(name, args) {
console.log("method %s does not exist", name);
};
a.doSomething(); // logs "method doSomething does not exist"
However, if you want a cross-browser method, then simple try-catch blocks if the way to go:
try {
a.doSomething();
}
catch(e) {
// do something
}
If you don't want to write try-catch throughout the code, then you could add a wrapper to the main object through which all function calls are routed.
function main() {
this.call = function(name, args) {
if(this[name] && typeof this[name] == 'function') {
this[name].call(args);
}
else {
// handle non-existant method
}
},
this.a = function() {
alert("a");
}
}
var object = new main();
object.call('a') // alerts "a"
object.call('garbage') // goes into error-handling code
It seems that you know your way around JS.
Unfortunately, I don't know of such feature in the language, and am pretty sure that it does not exist. Your best option, in my opinion is either using a uniform interface and extend it, or extend the prototypes from which your objects inherit (then you can use instanceof before going forward with the method call) or use the somewhat cumbersome '&&' operator in order to avoid the access of nonexistent properties/methods:
obj.methodName && obj.methodName(art1,arg2,...);
You can also extend the Object prototype with Anurag's suggestion ('call').
You can also check if the method exists.
if(a['your_method_that_doesnt_exist']===undefined){
//method doesn't exist
}

Categories

Resources