What is the best way to check if my browser supports the let mand 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.

What is the best way to check if my browser supports the let mand 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.

• javascript
• html

• Do you mean how to check in your code, or check on a reference website? – Patrick Hund Commented Sep 23, 2019 at 13:50
• 3 stackoverflow./questions/29046635/… – Taki Commented Sep 23, 2019 at 13:50
• 2 Possible duplicate of What browsers currently support JavaScript's 'let' keyword? – Blue Commented Sep 23, 2019 at 13:51
• 1 @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 Commented Sep 23, 2019 at 13:52
• 1 Yes I need a code snippet to detect if let is upported. – zomega Commented Sep 23, 2019 at 13:52

4 Answers 4

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.

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

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)

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