26

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

3
  • 2
    This kind of features cannot be polifilled.
    – dfsq
    Sep 22, 2017 at 11:51
  • The reason transpilers exist is to solve the problems that polyfills cannot. What is the motivation for avoiding them? Sep 22, 2017 at 21:47
  • I have a existing code (spread all over enterprise application) that is getting created/changed my so many developers. So I want seamlessly to allow the developers to use es6 functionalities.
    – Rana
    Sep 25, 2017 at 10:25

4 Answers 4

16

A polyfill can add or fix missing built-in classes, functions, objects... but it cannot modify a compiler's accepted syntax.

4
  • 2
    Classes are also new syntax ;) Sep 22, 2017 at 13:53
  • I don't agree, creating new variables is not adding new syntax Sep 22, 2017 at 14:04
  • 1
    class Foo {} cannot be parsed by browsers that don’t support classes. But now that I reread the post I guess you meant adding the functionality of built-in classes (though I’m not sure if there are any)? In general I think simply saying that polyfills can add/fix APIs is less confusing. Sep 22, 2017 at 14:06
  • With classes I did not mean the class sugar syntax, but adding new classes like Promise, for example Sep 22, 2017 at 14:18
14

There is no polyfill for arrow functions. It is a syntax error to write the code you have unless you use a transpiler.

0
0

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).

0

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")));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.