I've tried the babel transpiler, and it converts All let, const and var to just var, so in all, what's the difference in our code usage?
I have read documents and I know what's the difference between let, const and var, but if all of them are eventually converted to var, what's the difference? it means that there shouldn't be any meaningful differences in performance or even scope!

Update(02.14.2019) : Based on the answers I understood that scope does matter and even though they are converted to var, babel keeps the meaning of scope. My question remains about the performance, is there any meaningful difference in performance?

I've attached the input and output of the transpiler, with a more plex scenario
input:

let a = 1;

for (let a = 0; a !== 0;) {
  for (let a = 0; a !== 0;) {}
}

output

"use strict";

var a = 1;

for (var _a = 0; _a !== 0;) {
  for (var _a2 = 0; _a2 !== 0;) {}
}

I've tried the babel transpiler, and it converts All let, const and var to just var, so in all, what's the difference in our code usage?
I have read documents and I know what's the difference between let, const and var, but if all of them are eventually converted to var, what's the difference? it means that there shouldn't be any meaningful differences in performance or even scope!

Update(02.14.2019) : Based on the answers I understood that scope does matter and even though they are converted to var, babel keeps the meaning of scope. My question remains about the performance, is there any meaningful difference in performance?

I've attached the input and output of the transpiler, with a more plex scenario
input:

let a = 1;

for (let a = 0; a !== 0;) {
  for (let a = 0; a !== 0;) {}
}

output

"use strict";

var a = 1;

for (var _a = 0; _a !== 0;) {
  for (var _a2 = 0; _a2 !== 0;) {}
}

• javascript
• ecmascript-6
• babeljs
• javascript-objects
• ecmascript-5

• There is a difference, declare let in a block {} and try to access it outside the block. Do the same with var, repeat. It may transpile everything into var, but for let and const I am pretty sure special rules apply. This question does not ask anything meaningfull and if you say you know the difference between them, then this question is not necessary at all. – squeekyDave Commented Feb 14, 2019 at 15:53
• 3 This might help bambielli./til/2017-04-04-let-transpilation/# – Saraband Commented Feb 14, 2019 at 15:54
• 1 Not all configurations of Babel turn “const” and “let” into “var” though. But the question is valid nevertheless. – rishat Commented Feb 14, 2019 at 15:54
• @squeekyDave I updated my question so that it reflects what has been stated in ments, but my question about the performance still remains. The babel still converts all of them to var, just with some rules to keep the meaning of scope. if all of them are var, so is there any difference in performance? – Mata Commented Feb 14, 2019 at 16:29
• @rml Sorry, I didn't know, in which configurations it does not convert them? – Mata Commented Feb 14, 2019 at 16:30

2 Answers 2

Babel converts the ES6 syntax to ES5 syntax (or whatever source and target versions of JS you are dealing with).

This will often lose some of the nuances in the code, but you are looking at a very trivial example.

Consider this instead:

let x = 1;

{
  // Inside a block, this is a different x
  let x = 2; 
  console.log(x);
}

console.log(x);

Babel will convert that to:

"use strict";

var x = 1;
{
  // Inside a block, this is a different x
  var _x = 2;
  console.log(_x);
}
console.log(x);

See how it renames the inner x so that it doesn't overwrite the outer one?

It expresses the effect of the ES6 as much as it can in ES5, even if the result is ugly (because the elegant feature from ES6 is not available).

Babel runs checks against each variable, and throws errors if certain procedural rules are violated. For example, if a const is defined, and the value is changed later, this would violate the type's rules. Another would be if a variable is redefined in a scope where it already exists (this could be a function of the same name). In some cases Babel simply renames things to prevent conflicts.