CODEWITHSUNDEEP
javascriptjquerynode.jsecmascript-6ecmascript-5
Rana
Rana

Reputation: 1218

Is there a polyfill for es6 arrow function?

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

Upvotes: 27

Views: 28034

Answers (4)

Pablo Lozano
Pablo Lozano

Reputation: 10342

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

Upvotes: 17

Cecell
Cecell

Reputation: 144

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

Upvotes: 1

PeterMader
PeterMader

Reputation: 7285

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

Upvotes: 0

Chris Cousins
Chris Cousins

Reputation: 1912

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

Upvotes: 14

Related Questions