How to check if 'let' is supported by the browser?

Question

What is the best way to check if my browser supports the let command to declare a variable valid only for the current code block?

This is not a duplicate of question What browsers currently support JavaScript's 'let' keyword? because the question refers to a non-standard syntax extension in FF, and the eval/Function solution was not posted.

I need to perform this check to redirect users with old browsers to a site advising them to update their browser.

Do you mean how to check in your code, or check on a reference website? — Patrick Hund, Sep 23 '19 at 13:50
https://stackoverflow.com/questions/29046635/javascript-es6-cross-browser-detection — Taki, Sep 23 '19 at 13:50
Possible duplicate of [What browsers currently support JavaScript's 'let' keyword?](https://stackoverflow.com/questions/2356830/what-browsers-currently-support-javascripts-let-keyword) — Blue, Sep 23 '19 at 13:51
[mdn "browser compatibility" section for let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Browser_compatibility) — James, Sep 23 '19 at 13:52
@FrankerZ I don't believe that answers the question. OP seems like he's trying to find a way (in code / on-the-fly) to determine if he can use `let` or not. — Tyler Roper, Sep 23 '19 at 13:52
What are you trying to do? imo this question is pointless. If the browser doesn't support `let` the it will throw when it parses your code, **before** it has executed the feature detection. It will not even execute your feature detection. — Thomas, Sep 23 '19 at 14:09

FZs · Accepted Answer · 2022-05-18T19:52:22.953

The only way to feature-detect a new syntax or keyword, is to eval it (or, pass it to the not-much-better Function constructor):

function detectLet(){
  try{
    return !!new Function('let x=true;return x')()
  }catch(e){
    return false
  }
}

console.log(detectLet())

But also note that you can't conditionally use a new syntax, or try to catch a syntax error, since syntax errors happen before your code starts to run!

So, to conditionally use such a feature, you also need eval, which is even worse...

if(detectLet()){
  let foo = 'bar';
}
//SyntaxError if `let` isn't supported

if(detectLet()){
  eval("let foo = 'bar';") //Wait... really?!
}
//No errors

Conclusion:

If you need to support (those really old) platforms, that don't support let, then don't use let.

Alternatively, you can transpile your code with tools like Babel

But as of 2022, all major browsers support let (even IE!!!), so you can use it safely, and drop support for really legacy browsers.

Using eval is not bad when you have an absolute control of what you are doing, this is the case. — Máxima Alekz, Apr 27 '21 at 19:01
@MáximaAlekz That's true, but `eval` is really slow, and you have to put code to a string, which is hard to maintain (no syntax highlighting, syntax errors aren't reported immediately when running code, linters don't usually check code in strings, you have to escape certain characters and there aren't proper multiline strings in ES5). So it isn't ***EVIL*** here, just simply bad. — FZs, Apr 27 '21 at 19:08

score 5 · Answer 2 · answered Sep 23 '19 at 13:59

Despite its evilness, you could use eval() in this case, as long as you're not evaluating any user input. Wrap it in a try/catch statement and you can check whether it throws a syntax error or not.

Syntax errors themselves are not catchable, therefore you cannot simply add a try/catch statement around a let statement.

I added an example using an imaginary "foobar" keyword for demonstration purposes:

var canLet = false;
try {
  eval('let foobar = "baz";');
  canLet = true;
} catch (e) {}

console.log("this browser does" + (canLet ? '' : ' not') + " support the let keyword");

var canFoobar = false;
try {
  eval('foobar baz = "bar";');
  canLet = true;
} catch (e) {}

console.log("this browser does" + (canFoobar ? '' : ' not') + " support the foobar keyword");

eval is not always evil, if you control everything you are putting in eval, then eval is not evil — Máxima Alekz, Apr 29 '21 at 18:48

score 4 · Answer 3 · answered Sep 23 '19 at 13:55

4

let statement was introduced in EcmaScript standard ES2015 ("ES6") and all major browsers support it. Unless you are targeting older browsers, you don't need to worry about it.

Note: In IE 11, the let statement inside a for loop behaves like a var variable (i.e. it is not scoped for each iteration, but scoped for the entire for loop)

answered Sep 23 '19 at 13:55

Shameel

632
5
12

1

That's true, but the OP asked for a programmatical detection... See [this comment](https://stackoverflow.com/questions/58063969/how-to-check-if-let-is-supported-by-the-browser/58064167#comment102524336_58063969) – FZs Sep 23 '19 at 14:01

score 3 · Answer 4 · answered Sep 23 '19 at 13:59

If you really need to detect if a browser supports let, you could write a simple feature detection like the snippet below. To not cause a syntax error you can use eval (which is not evil here ;)

function testLet() {
  try {
    eval("let test;");
    return true;
  } catch (e) {
    return false;
  }
}

console.info(testLet())

How to check if 'let' is supported by the browser?

4 Answers4