Is there a polyfill for es6 arrow function?
the following code throws syntax error exception in IE, is there a polyfill to make IE support arrow functions?
var myFunc = ()=>{
alert('es6');
}
myFunc();
Note: I don't want to use any transpiler.
Thanks in advance
A polyfill can add or fix missing built-in classes, functions, objects... but it cannot modify a compiler's accepted syntax.
There is no polyfill for arrow functions. It is a syntax error to write the code you have unless you use a transpiler.
Features that add new syntax can not be polyfilled.
I can only think of babel-standalone, which you can think of as a JIT compiler/transpiler (if that is OK with you).
I'm pretty green with JS so I have a feeling that this may not qualify as a polyfill... but it does seem to be a 'duct tape' stopgap though. I found a fiddle made by Luis Perez that gives this functionality. I'm still working to better understand arrow functions but it at least does work with one of the MDN arrow function examples. Here's the snippet that after playing with I managed to understand (better at least) lol. I hope it is useful to someone.
var str = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
var g_arrowCache = Object.create(null);
function arrow(expression) {
function cache(cache, key, getValueFunc) {
var value = cache[key];
if(value === undefined) {
value = getValueFunc(key);
cache[key] = value;
}
return value;
}
function arrowImpl(expression) {
// This function is a polyfill for proposed "arrow functions" in JavaScript.
// Example: str.map(_$("str => str.length"))
if (expression.search(/\bthis\b/) != -1) throw "'this' not supported";
var indexOfArrow = expression.indexOf("=>");
if(indexOfArrow == -1) throw "Expressio is missing the arrow operator =>";
var parametersString = expression.substring(0, indexOfArrow);
parametersString = parametersString.replace("(", "").replace(")", "");
var parameters = parametersString.split(",");
parameters.map(function(o) { return o.trim(); });
var functionBody = expression.substring(indexOfArrow + 2);
if(expression.indexOf("{") != -1) throw "Use of curly brackets for multiple statements not supported or recommended.";
if(expression.indexOf("}") != -1) throw "Use of curly brackets for multiple statements not supported or recommended.";
functionBody = "return " + functionBody.trim() + ";";
var args = parameters.slice(0);
args.push(functionBody);
var func = Function.constructor.apply(null, args);
return func;
}
return cache(g_arrowCache, expression, arrowImpl);
}
var _$ = arrow;
console.log(str.map(_$("str => str.length")));
Related
Is it possible to see the callee/caller of a function when use strict is enabled?
'use strict';
function jamie (){
console.info(arguments.callee.caller.name);
//this will output the below error
//uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
};
function jiminyCricket (){
jamie();
}
jiminyCricket ();
For what it's worth, I agree with the comments above. For whatever problem you're trying to solve, there are usually better solutions.
However, just for illustrative purposes, here's one (very ugly) solution:
'use strict'
function jamie (){
var callerName;
try { throw new Error(); }
catch (e) {
var re = /(\w+)#|at (\w+) \(/g, st = e.stack, m;
re.exec(st), m = re.exec(st);
callerName = m[1] || m[2];
}
console.log(callerName);
};
function jiminyCricket (){
jamie();
}
jiminyCricket(); // jiminyCricket
I've only tested this in Chrome, Firefox, and IE11, so your mileage may vary.
Please note that this should not be used in production. This is an ugly solution, which can be helpful for debugging, but if you need something from the caller, pass it as argument or save it into a accessible variable.
The short version of #p.s.w.g answer(without throwing an error, just instantiating one):
let re = /([^(]+)#|at ([^(]+) \(/g;
let aRegexResult = re.exec(new Error().stack);
sCallerName = aRegexResult[1] || aRegexResult[2];
Full Snippet:
'use strict'
function jamie (){
var sCallerName;
{
let re = /([^(]+)#|at ([^(]+) \(/g;
let aRegexResult = re.exec(new Error().stack);
sCallerName = aRegexResult[1] || aRegexResult[2];
}
console.log(sCallerName);
};
function jiminyCricket(){
jamie();
};
jiminyCricket(); // jiminyCricket
It does not worked for me
Here is what I finally do, just in case it helps someone
function callerName() {
try {
throw new Error();
}
catch (e) {
try {
return e.stack.split('at ')[3].split(' ')[0];
} catch (e) {
return '';
}
}
}
function currentFunction(){
let whoCallMe = callerName();
console.log(whoCallMe);
}
You can get a stack trace using:
console.trace()
but this is likely not useful if you need to do something with the caller.
See https://developer.mozilla.org/en-US/docs/Web/API/Console/trace
functionName() {
return new Error().stack.match(/ at (\S+)/g)[1].get(/ at (.+)/);
}
// Get - extract regex
String.prototype.get = function(pattern, defaultValue = "") {
if(pattern.test(this)) {
var match = this.match(pattern);
return match[1] || match[0];
}
return defaultValue; // if nothing is found, the answer is known, so it's not null
}
I'm just getting into functional programming and i'm having a hard time figuring out how to do this (if it's even worth the trouble). I've looked into currying and am not sure if this is the direction I need to go?? Or pipelines?
I would like to start with a value and then pipe it through different functions. Underscore has the 'chain' method which is similar. However I don't want to use prototypes to do this. I realize the solution might not match my target syntax.
Elm has the |> syntax (below) which is really nice to look at
// what i'd like to do (or similar) in JS *without using prototype*
num = ("(123) 456-7890")
.removeDashes()
.removeParens()
.removeSpaces()
// what elm does
"(123) 456-7890"
|> removeDashes
|> removeParens
|> rem
// functions I wrote so far
removeDashes = function(str) {
return str.replace(/-/g, '');
};
removeParens = function(str) {
return str.replace(/\(|\)/g, '');
};
removeSpaces = function(str) {
return str.replace(/\s/g, '');
};
// what i'm currently doing
num =
removeDashes(
removeParens(
removeSpaces(
"(123) 456-7890"")));
If you want to get you're feet wet with functional programming in JavaScript I'd advice you to use a library like Underscore, Lodash or Ramda. Which all have a compose/pipe functionality. Most of the times you'd want to combine it with some form of partial application which those libraries also provide.
Anyway it's a nice exercise to try to implement it yourself.
I would solve it like this...
/* Asumes es5 or higher */
function pipe (firstFn /* ...restFns */) {
var _ = null;
var _slice = Array.prototype.slice;
var restFns = _slice.call(arguments, 1) || [];
return function exec_fns() {
var args = _slice.call(arguments, 0, 1);
return restFns.reduce(function(acc, fn) {
return fn.call(_, acc);
}, firstFn.apply(_, args));
}
}
removeDashes = function(str) {
return str.replace(/-/g, '');
};
removeParens = function(str) {
return str.replace(/\(|\)/g, '');
};
removeSpaces = function(str) {
return str.replace(/\s/g, '');
};
console.log(pipe(
removeDashes,
removeParens,
removeSpaces
)("(123) 456-7890") == "1234567890")
Also Functional JavaScript by Fogus is a nice resource to dig deeper into this style of programming
There are different ways to tackle this problem, and you've offered references in underscore and Elm.
In Elm, curried functions are an important part of the equation. As every function receives a single argument, you can build chains with some of them partially applied, waiting for the argument you're weaving in with the pipeline. The same applies to Haskell, PureScript and languages of their ilk.
Reproducing that ipsis literis in JavaScript requires a little bit of sugar — you can use a sweet.js macro to get a source transformation that does it.
Without sugar, it can go many ways. Maybe one way to explore is using generators, passing the bits of the resolved chain down until you get a non-function value.
Like hindmost said, look into using prototypes. The string prototype allows you to add class-level functionality to all strings:
String.prototype.removeParens = function() {
this = this.replace(/\(|\)/g, '');
}
This lets you do things like this:
var myString = "(test)";
myString.removeParens();
And once you add the other functions to the String prototype you can simply chain the function calls like this:
myString.removeDashes().removeParens().removeSpaces();
etc.
You can create the pipe function in one line, with good readability:
const pipe = (...fns) => fns.reduce((v, f) => v.constructor === Function ? v() : f(v));
and it would be used in this way:
var numResult = pipe('(123) 456-7890', removeDashes, removeParens, removeSpaces);
var pipe = (...fns) => fns.reduce((v, f) => v.constructor === Function ? v() : f(v));
function removeDashes(str) {
return str.replace(/-/g, '');
}
function removeParens(str) {
return str.replace(/\(|\)/g, '');
}
function removeSpaces(str) {
return str.replace(/\s/g, '');
}
console.log(
'result:', pipe('(123) 456-7890', removeDashes, removeParens, removeSpaces)
);
Attention: this function needs a platform with support for the spread operator ....
Just in case, i've created a module for this with support for async functions (Promises) and it also works on older/legacy platforms that can't use the spread ...
https://github.com/DiegoZoracKy/pipe-functions
The easiest way is to really just add those to the prototype chain, but you can do that with an object. Here's an easy example:
function MyString( str ){
var value = str.toString();
return {
removeDashes: function() {
value = value.replace(/-/g, '');
return this;
},
removeParens: function() {
value = value.replace(/\(|\)/g, '');
return this;
},
removeSpaces: function() {
value = value.replace(/\s/g, '');
return this;
},
toString: function (){
return value;
},
valueOf: function (){
return value;
}
};
}
You can later on do this:
var clean = (new MyString('This \\(Is)\/ Dirty'))
.removeDashes()
.removeParens()
.removeSpaces();
This way, you will keep your prototype clean. To retrieve a non-object value, just run the toStrong() method, toValue() or do anything with the value (contatenating 1, divide it, anything!).
Here's a solution I found with lodash, it allows you to mixin your own functions and then use them against chain:
...
removeSpaces = function(str) {
return str.replace(/\s/g, '');
};
_.mixin({
removeSpaces: removeSpaces,
removeParens: removeParens,
removeDashes: removeDashes
});
num = _.chain("(123) 456-7890")
.removeSpaces()
.removeParens()
.removeDashes()
.value()
Not a very serious suggestions, but one that will work:
var update = pipe()(removeDashes >> removeParens >> removeSpaces);
update("(123) 456-7890"); //=> "1234567890"
This is based upon this implementation of pipe:
var pipe = function() {
var queue = [];
var valueOf = Function.prototype.valueOf;
Function.prototype.valueOf = function() {
queue.push(this);
return 1;
};
return function() {
Function.prototype.valueOf = valueOf;
return function(x) {
for (var i = 0, val = x, len = queue.length; i < len; i++) {
val = queue[i](val);
}
return val;
}
};
};
You can see more in slide 33 of my talk on functional composition in js.
As the others have said, adding the functions to the String prototype is a valid and short solution. However, if you don´t want to add them to String prototype or if you want to perform in the future more complex functions, another option is to make a wrapper to handle this:
function SpecialString(str){
this.str = str;
this.removeDashes = function() {
this.str=this.str.replace(/-/g, '');
return this;
};
this.removeParens = function() {
this.str=this.str.replace(/\(|\)/g, '');
return this;
};
this.removeSpaces = function() {
this.str=this.str.replace(/\s/g, '');
return this;
};
return this;
}
num = new SpecialString("(123) 456-7890").removeDashes().removeParens().removeSpaces();
console.log(num) // 1234567890
Is it possible to see the callee/caller of a function when use strict is enabled?
'use strict';
function jamie (){
console.info(arguments.callee.caller.name);
//this will output the below error
//uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
};
function jiminyCricket (){
jamie();
}
jiminyCricket ();
For what it's worth, I agree with the comments above. For whatever problem you're trying to solve, there are usually better solutions.
However, just for illustrative purposes, here's one (very ugly) solution:
'use strict'
function jamie (){
var callerName;
try { throw new Error(); }
catch (e) {
var re = /(\w+)#|at (\w+) \(/g, st = e.stack, m;
re.exec(st), m = re.exec(st);
callerName = m[1] || m[2];
}
console.log(callerName);
};
function jiminyCricket (){
jamie();
}
jiminyCricket(); // jiminyCricket
I've only tested this in Chrome, Firefox, and IE11, so your mileage may vary.
Please note that this should not be used in production. This is an ugly solution, which can be helpful for debugging, but if you need something from the caller, pass it as argument or save it into a accessible variable.
The short version of #p.s.w.g answer(without throwing an error, just instantiating one):
let re = /([^(]+)#|at ([^(]+) \(/g;
let aRegexResult = re.exec(new Error().stack);
sCallerName = aRegexResult[1] || aRegexResult[2];
Full Snippet:
'use strict'
function jamie (){
var sCallerName;
{
let re = /([^(]+)#|at ([^(]+) \(/g;
let aRegexResult = re.exec(new Error().stack);
sCallerName = aRegexResult[1] || aRegexResult[2];
}
console.log(sCallerName);
};
function jiminyCricket(){
jamie();
};
jiminyCricket(); // jiminyCricket
It does not worked for me
Here is what I finally do, just in case it helps someone
function callerName() {
try {
throw new Error();
}
catch (e) {
try {
return e.stack.split('at ')[3].split(' ')[0];
} catch (e) {
return '';
}
}
}
function currentFunction(){
let whoCallMe = callerName();
console.log(whoCallMe);
}
You can get a stack trace using:
console.trace()
but this is likely not useful if you need to do something with the caller.
See https://developer.mozilla.org/en-US/docs/Web/API/Console/trace
functionName() {
return new Error().stack.match(/ at (\S+)/g)[1].get(/ at (.+)/);
}
// Get - extract regex
String.prototype.get = function(pattern, defaultValue = "") {
if(pattern.test(this)) {
var match = this.match(pattern);
return match[1] || match[0];
}
return defaultValue; // if nothing is found, the answer is known, so it's not null
}
Maybe some of you know about AOP, in some languages using AOP can lead you to be able to inject code after, before, or while a method is executing,etc.
What I want is to apply the same in Javascript, I am currently working on a massive app which has more than 300 ajax calls, and every time I need to do some change on the catch statement on them, I have to modify them one by one which is very tedious.
What I want to do is something like :
functionName.before("try {")
functionName.after("} catch(ex){
//dostuff
}")
Is it possible? I know there are things like .call, or the arguments object inside every function..which seem pretty meta-function (AOP) functionalities.
Not with before and after, but a wrap will work:
Function.prototype.wrapTry = function(handle) {
var fn = this;
return function() {
try {
return fn.apply(this, arguments);
} catch(e) {
return handle(e);
}
};
};
Then use it like
var safeFunction = functionName.wrapTry(doStuff);
In JavaScript, functions are first-class objects. That means you can manipulate or redeclare them.
Assuming that there is a "foo" function:
var originalFoo = foo;
foo = function()
{
// "before" code.
// Call the original function.
originalFoo.apply(this, arguments);
// "after" code.
};
After that, any call to foo() will call the new function: even with parameters.
Old question but you may take a look over this https://github.com/k1r0s/kaop-ts/blob/master/docs/api.md#available-join-points
import { onException } from "kaop-ts"
import handlingException from "./somewhere"
class Something {
#onException(handlingException)
method() {
// stuff that may throw an error
}
}
I also will give a late answer in order to shed some light onto this special case that every then and now pops up as JavaScript and AOP.
Firstly, cases like the very one presented by the OP always ask for modifying already existing functionality, thus targeting closed code that sometimes is not even owned by the party that sees itself challenged from modifying the control flow of such code.
Why then, not just name it like that ... JavaScript method modification or JavaScript method modifiers.
Secondly, because of already riding the horse of terminology, altering closed functionality in JavaScript has nothing to do with Aspect-oriented Programming unless an implementation that claims to be AO provides abstraction and code-reuse levels for at least Aspect, Advice and Pointcut.
Last, for what the OP is going to achieve and what also has been the accepted answer, there does exist a a whole bunch of before, after around / wrap solutions, almost always unfortunately mentioning AO(P), and in far too many cases not taking care of the context or target which is essential to method modification.
The example I do provide uses a prototypal implementation of afterThrowing. Because JavaScript already features a standardized bind, I'm firmly convinced that Function.prototype is the right place as well for some other method-modifiers
like before, after, around, afterThrowing
and afterFinally.
// OP's example pseudo code
//
// functionName.before("try {")
//
// functionName.after("} catch(ex){
// dostuff
// }")
function doStuffAfterThrowing(exception, originalArguments) {
"use strict";
var context = this;
console.log('context : ', context);
console.log('String(exception) : ', String(exception));
console.log('originalArguments : ', originalArguments);
return "safely handled exception";
}
function doFail() {
throw (new ReferenceError);
}
function oneOutOfManyAjaxCallbacks(payload) {
doFail();
}
var jsonData = {
"foo": "foo",
"bar": "bar"
};
var someModifiedAjaxCallback = oneOutOfManyAjaxCallbacks.afterThrowing(doStuffAfterThrowing, { x: 'y' });
// does fail controlled/handled.
console.log('someModifiedAjaxCallback(jsonData) : ', someModifiedAjaxCallback(jsonData));
// does fail "Uncaught".
console.log('oneOutOfManyAjaxCallbacks(jsonData) : ', oneOutOfManyAjaxCallbacks(jsonData));
.as-console-wrapper { min-height: 100%!important; top: 0; }
<script>
(function (Function) {
var
isFunction = function (type) {
return (
(typeof type == "function")
&& (typeof type.call == "function")
&& (typeof type.apply == "function")
);
},
getSanitizedTarget = function (target) {
return ((target != null) && target) || null;
}
;
Function.prototype.afterThrowing = function (handler, target) { // afterThrowing
target = getSanitizedTarget(target);
var proceed = this ;
return (isFunction(handler) && isFunction(proceed) && function () {
var ret, args = arguments;
try {
ret = proceed.apply(target, args);
} catch (exc) {
ret = handler.call(target, exc, args);
//throw exc;
}
return ret;
}) || proceed;
};
}(Function));
</script>
Having come that far one might also consider reading ...
sandwich pattern in javascript code
Can you alter a Javascript function after declaring it?
I'm having an issue with prototype inheritance and I can't find out why it's not working properly.
The snippet is this:
function Field(newKey, val) {
this.key = newKey || "";
this.value = val || "";
}
Field.prototype.isEmpty = function() {
return this.value === undefined || this.value === null || this.value === "";
};
function DoubleField(newKey, val) {
this.base = Field;
this.base(newKey, val);
}
DoubleField.prototype = new Field();
DoubleField.prototype.constructor = DoubleField;
function IntegerField(newKey, val) {
this.base = DoubleField;
this.base(newKey, val);
}
IntegerField.prototype = new DoubleField();
IntegerField.prototype.constructor = IntegerField;
var f = new Field('keyfield', 'valField');
var d = new DoubleField('keydouble', 'valDouble');
var i = new IntegerField('keyinteger');
var res = f.isEmtpy();
The call to f.isEmpty is failing? Why? Calls to d.isEmpty or i.isEmpty work just fine as expected.
I cannot realize what I'm doing wrong. Any help would be much appreciated!
The error is in the last line of code:
var res = f.isEmtpy();//That's what you wrote
The correct is:
var res = f.isEmpty();
You haven't said how it's failing. As I noted in a comment, at the very least there's a typo: var res = f.isEmtpy(); should be var res = f.isEmpty();
But beyond that (which I assume is just a typo in the question, not the code), note that this line in your derived constructors:
this.base = DoubleField;
...will not work as you intend. Consider the case of IntegerField. You call new IntegerField and it sets this.base to DoubleField and calls it. But the DoubleField constructor then sets this.base to Field. So you have an IntegerField instance with a base property pointing to Field, not DoubleField.
You can't use instance properties to trace lineage. It works for a parent/child situation, but you run into the "grandchild" problem described above.
I recommend using one of the inheritance helper scripts out there. There are several, including my own Lineage. These scripts help you build inheritance hierarchies, handling the plumbing for you so you can focus on building whatever it is you're trying to build. We only need them temporarily; JavaScript is getting syntactic sugar to help with this in the next version (but of course, it'll be years before we see widespread support of it, once it's actually finalized).