I'm (re)learning Javascript and it's been remended to me to avoid mixing ES5 and ES6 type code. But my IDE, Webstorm, keeps warning me that I should be using let and const in my code -- there are tons of yellow flags. Of course I can just turn off those warnings, but should I always use let and const when appropriate, even if the rest of my code is, for the moment, "old school" javascript? (As an aside, I'd wele any links/advice on/to best practices transitioning to ES6, i.e. the best way to start introducing ES6 into your code). Thanks!

I'm (re)learning Javascript and it's been remended to me to avoid mixing ES5 and ES6 type code. But my IDE, Webstorm, keeps warning me that I should be using let and const in my code -- there are tons of yellow flags. Of course I can just turn off those warnings, but should I always use let and const when appropriate, even if the rest of my code is, for the moment, "old school" javascript? (As an aside, I'd wele any links/advice on/to best practices transitioning to ES6, i.e. the best way to start introducing ES6 into your code). Thanks!

• javascript
• ecmascript-6
• ecmascript-5

• What do you mean by "is it OK"? Are you transpiling? – SLaks Commented May 30, 2018 at 14:50
• 1 I suppose -- and here I enter into the touchy-feely area that risks being down voted -- I'm looking for best practices. I have a more senior programmer telling me "don't mix ES5/ES6 code" as meanwhile I'm getting warnings for not using let and const -- I suppose what I mean is should one always use let and const these days, even if you're not using any other ES6 features? – Cerulean Commented May 30, 2018 at 14:52
• 1 Check this out it can help : stackoverflow./questions/37329081/… – Tarik FAMIL Commented May 30, 2018 at 14:53
• 4 "don't mix ES5/ES6 code" makes no sense. They're just language features; there is no reason to avoid one feature if you aren't using other ones. – SLaks Commented May 30, 2018 at 14:54
• 2 Considering that 90% of the syntax/features of ES6 also exist in ES5, I don't see how this should even be possible. Maybe they mean "don't use ES6 features in an ES5 environment" or "don't use ES5 features that have been superseded by some ES6 features" (e.g. method definitions in object literals). – Felix Kling Commented May 30, 2018 at 16:03

1 Answer 1

The basic answer to your question: no, it is not ok to use let and const in true ES5. You need to use var. To add to that: if Webstorm is throwing those warnings but you are writing ES5 then your settings are wrong. Go to Settings > Languages & Frameworks > Javascript, and change your Javascript Language Version to ECMAScript 5.1. If you know you're writing ES5 then you should not have it set to be validating your code against the ES6 specification.

Here's some additional info:

Recently I've been working to hook up a transpiler (Babel) to convert all Javascript to ES5 patible syntax in a production environment. If you want to use ES6 syntax, but still need to support non ES6 pliant browsers (IE9 - IE11 for example) then a transpliler like Babel is necessary. With that in mind I'd like to bring up some specific notes related to let and const.

In true ES6 using let to define a variable creates it within the scope of its block. That means that as soon as the block exits that named variable is discarded. Because of this, something like the following is possible:

const x = 'I am a constant';
if (1 == 1) {
  let x = 'Not here for long';
  console.log(x); // => 'Not here for long'
}
console.log(x); // => 'I am a constant';

When using let to create a block scoped instance of x that takes precedence over const x inside of this block (our if statement in this case). What Babel turns this into in order to make it patible with ES5 browsers is actually quite smart:

var x = 'I am a constant';
if (1 == 1) {
  var _x = 'Not here for long';
  console.log(_x); // => 'Not here for long'
}
console.log(x); // => 'I am a constant';

As you can see here it actually creates a new var with a different name, _x, so it does not conflict with the original x.

A final note: If you are using new features like Promise and Symbol then a transpiler is not enough. You also need to be using a polyfill for those.