Develop Reference

Is a variable declaration the same as a variable's binding?

MDN documentation states:
let bindings are created at the top of the (block) scope containing
the declaration, commonly referred to as "hoisting". Unlike variables
declared with var, which will start with the value undefined, let
variables are not initialized until their definition is evaluated.
Accessing the variable before the initialization results in a
ReferenceError. The variable is in a "temporal dead zone" from the
start of the block until the initialization is processed.
Is the "let binding" referrred to (the hoisting of let and const) just the keyword let, or is it just the creation of storage space (which doesn't have to do with the keyword)?
Previously I thought the variable keyword and variable name together comprised a declaration, but in a question I asked recently, the answerer said they are actually an initialization.

I'm sorry for using two different terms when writing that MDN paragraph. For all purposes in that article, "variable" and "binding" should be understood as the same thing. But let's go into details.
A variable declaration creates the variable (as an abstract entity). It tells the compiler that it should introduce a new variable, and also can tell it about a name, a type to be held, an initial value, a scope etc. (depending on the language). In JS, there are different kinds of declarations that do different things, for example
var has a name, an optional initialiser and scoping rules specific to var
function has a (sometimes optional) name, the value is always given and known to be a function
const has a name, a required initialiser, should be immutable, and has lexical scoping
…
A binding is the association of a variable name with the variable entity, for example "x refers to the variable declared with class x". Such bindings depend on the scope, i.e. in every different scope there are different bindings and so the identifier x might refer to different things in different scopes.
Given the scoping rules of JavaScript, a variable declaration also causes bindings for itself to be created in the respective scopes.
So the binding is what makes the name available to be used. That's what I referred to as "the let binding is created at the top of the scope". It has nothing to do with the variable existing, having memory allocated for it, or being initialised.

A declaration just says that something exists. In JavaScript you can declare variables, functions and (more recently) classes.
In some languages (e.g. C, C++) it's possible to declare something without defining it. For example:
// this declares a function exists with a given signature, but doesn't define its implementation
void someFunction();
someFunction(); // here we call the function, since we know it exists
// here we define the function, which we have to do at some point
void someFunction() { /* ... */ }
This pattern is less common in modern languages, where the declaration and the definition tends to be combined, but it's useful to understand the distinction seeing as your question seems largely about terminology.
Variables can be declared, however they don't have definitions.
let b; // we declare that there's a variable 'b'
Instead you can assign a variable:
b = 5; // assignment
let c = 6; // declaration and assignment in one statement
The concept of binding in computer science has many forms. For example, when you type foo in your code, binding is the act of working out which variable/function/type/... should be used. In JavaScript this is pretty straightforward, but in some languages it can get pretty hairy (due to things like overload resolution and so forth).
However I don't believe that's what MDN means when they talk about let bindings. I believe it's a shorthand for "let declaration and assignment", as we saw above.
Regardless, I wouldn't worry too much about that term. The most important bit to understand from the paragraph you've quoted is that let and const are tighter versions of var, introduced in recent versions of the language to address pitfalls and surprises that came from the way var works.
Previously I thought the variable keyword and variable name together comprised a declaration
You're right.
var a;
var b = 1;
let c;
let c = 2;
const d = 3;
These are all declarations of variables (even though const technical variables can't vary, or more precisely, they cannot be reassigned).
It's just that var is a bit sloppy and surprising.
You could declare a var more than once within the same scope:
var a = 1;
var a = 2;
This won't work with let:
let a = 1;
let a = 2; // SyntaxError: Identifier 'a' has already been declared
Scoping on var can be surprising too:
for (var i = 0; i < 10; i++)
{
var inner = 1;
}
console.log(inner); // prints 1 even though you might think this would be an error
Or worse:
for (var i = 0; i < 10; i++)
{
for (var i = 0; i < 10; i++)
{
console.log('hello');
}
}
At a glance you might think this would print hello 100 times (10*10), but actually it is only printed 10 times because both loops use the same variable. This is a type of programmer error that the language should really prevent. If that code used let i instead, it would produce a syntax error.
As for hoisting you can think of it as though all the var declarations were moved to the top of the containing function.
function foo()
{
doThing();
var i = 0;
doSomethingElse();
for (var j = 0; j < 10; j++)
{
var k = 10;
}
}
Even though that's how you might write the code, it behaves as though you had written:
function foo()
{
var i; // all declarations hoisted to top of containing function scope
var j;
var k;
doThing();
i = 0;
doSomethingElse();
for (j = 0; j < 10; j++)
{
k = 10;
}
}
This is why you can write:
i = 10;
var i;
The var is moved up in the code, so it behaves as:
var i;
i = 10;
You can think of let as not being moved. Therefore it is an error to reference it before it is declared.

The main thing to understand here is that the js engine actually visits a let statement inntwo different situations (as well as every other statement, but it particularily matters here). It is visited once during parsing, when it generates an AST and also analyzes the scopes and the variables. It also creates a list of variables for each scope. Now when the code gets executed, the engine visits the statement a second time (or more often if its inside a loop / function / whatever) and now finally initializes the variable and assigns a value to it. So "hoisting" is basically just caused because of the parsing / executing stages, the engine knows that a variable exists before it reaches the declaration statement during execution as it has already parsed it before.
Is the "let binding" referrred to (the hoisting of let and const) just the keyword let, or is it just the creation of storage space (which doesn't have to do with the keyword)?
The keyword actually causes an entry in the scope record, which will then get turned into a storage space during execution. On the other hand the statement itself causes an initialization during execution. So its actually hard to say when a declaration happens, thats a question of words. Its common to say
That variable was declared at line 10
Its declared in that block
so wether "declaration" refers to the statement or the scope assignment is up to you :)
the answerer said they are actually an initialization.
Actually the answerer prefered to call it "initialization" and not "declaration" to not confuse readers, but well in reality its confusing as human languages are not as clearly defined as machine ones.

const in Node, in different blocks

On occasion I see Node barf when it sees code like this:
if (true) {
const z = 'foo';
} else {
const z = 'bar';
}
Node says that z has already been declared as constant. But since this is an if-else, at what point does Node actually see both declarations? Does the eval operation in Node catch this somehow?

Node 4 and 5 have incomplete support for const. One of the missing features is support for block scope outside of strict mode.
More info at this support table.

Prior to Node v6, they implemented an earlier draft of the specification, in which const variables were block scoped. Declaring two const variables in the same scope with the same name resulted in an error, however declaring a const variable in a loop behaved strangely: the constant got the value from the first assignment. Any further assignment had no effect.
for (var i = 0; i < 3; i++) {
const j = i;
console.log(j)l // prints 0 all three times in node 5.x
}

Can I prevent accidental overwrite of local variables in TypeScript / JavaScript?

Today I wasted an hour debugging a trivial issue, where a local variable named server was being initialized and configured - then, on one of the last lines in the same file, accidentally it was being redeclared, e.g. by another var server = ... statement, effectively creating a new variable named server, thus causing the previous variable to fall out of scope; yet, because these were the same type of variable, with the same name, everything else continued to work, making this fairly hard to debug.
Is there a TypeScript or JavaScript language feature, that prevents this sort of thing?
My thinking is that, declaring two variables with the same name, in the same scope, ought not to be allowed at all.
Perhaps there's a linter or some quality assurance tool that has the ability to check for and prevent this sort of thing? (and perhaps other "bad" patterns?)

Use let everywhere possible.
A let variable cannot be used before its declaration:
var x = 3;
function f() {
console.log(x); // ReferenceError, x is not defined
let x = 5;
}

Two options:
Use ECMA Script 6 and let.
Use jslint with var.
There is a closed issue about this on the GitHub/Microsoft/Typescript page. The recommendation is to target ECMA Script 6 and use let.
ECMA Script 6 with let
In ECMA Script 6 this would create an error:
let x = "foo";
let x = "bar"; // TypeScript with ECMA 6 will complain here
console.log(x);
Duplicate declaration, x
JSLint with var
Also, though the following won't throw a TypeScript error, the jslint tool will complain about it, even if you aren't using strict.
(function () {
var x, y;
x = "foo";
y = "foo";
function sayMsg() {
// jslint will complain here
var y = "bar";
}
sayMsg();
// jslint will also complain here
var x = "bar" + y;
}());
This is what jslint will tell you:
Redefinition of 'y' from line 3.
Combine this with the previous 'var' statement.

What is the difference between 'let' and 'const' ECMAScript 2015 (ES6)?

I'm wondering what is the difference between let and const in ES6. Both of them are block scoped, as the example in the following code:
const PI = 3.14;
console.log(PI);
PI = 3;
console.log(PI);
const PI = 4;
console.log(PI);
var PI = 5;
console.log(PI);
In ES5 the output will be:
3.14
3.14
3.14
3.14
But in ES6 it will be:
3.14
3
4
5
I'm wondering why ES6 allows the change of const value, the question is why should we use 'const' now? we can use 'let' instead?
Note: jsbin can be used for testing, choose JavaScript to run ES5 code and Traceur to run it with ES6 capabilities.

The difference between let and const is that once you bind a value/object to a variable using const, you can't reassign to that variable. In other words Example:
const something = {};
something = 10; // Error.
let somethingElse = {};
somethingElse = 1000; // This is fine.
The question details claim that this is a change from ES5 — this is actually a misunderstanding. Using const in a browser that only supports ECMAScript 5 will always throw an error. The const statement did not exist in ECMAScript 5. The behaviour in is either JS Bin being misleading as to what type of JavaScript is being run, or it’s a browser bug.
In practice, browsers didn't just go from 0% support for ECMAScript 2015 (ECMAScript 6) to 100% in one go — features are added bit-by-bit until the browser is fully compliant. What JS Bin calls ‘JavaScript’ just means whatever ECMAScript features your browser currently supports — it doesn’t mean ‘ES5’ or ‘ES6’ or anything else. Many browsers supported const and let before they fully supported ES6, but some (like Firefox) treated const like let for some time. It is likely that the question asker’s browser supported let and const but did not implement them correctly.
Secondly, tools like Babel and Traceur do not make ES6 ‘run’ in an older browser — they instead turn ES6 code into ES5 that does approximately the same thing. Traceur is likely turning const statements into var statements, but I doubt it is always enforcing that the semantics of a const statement are exactly replicated in ES5. Using JS Bin to run ES6 using Traceur is not going to give exactly the same results as running ES6 in a fully ES6 specification-compliant browser.
It is important to note that const does not make a value or object immutable.
const myArray = [];
myArray.push(1); // Works fine.
myArray[1] = 2; // Also works fine.
console.log(myArray); // [1, 2]
myArray = [1, 2, 3] // This will throw.
Probably the best way to make an object (shallowly) immutable at the moment is to use Object.freeze() on it. However, this only makes the object itself read-only; the values of the object’s properties can still be mutated.

What you're seeing is just an implementation mistake. According to the ES6 spec wiki on const, const is:
A initialize-once, read-only thereafter binding form is useful and has
precedent in existing implementations, in the form of const
declarations.
It's meant to be read-only, just like it currently is. The ES6 implementation of const in Traceur and Continuum are buggy (they probably just overlooked it)
Here's a Github issue regarding Traceur not implementing const

let
Use block scope in programming.
for every block let create its own new scope which you cannot access in outside of that block.
value can be changed as many times as you want.
let is extremely useful to have for the vast majority of code. It can greatly enhance your code readability and decrease the chance of a programming error.
let abc = 0;
if(true)
abc = 5 //fine
if(true){
let def = 5
}
console.log(def)
const
It allows you to be immutable with variables.
const is a good practice for both readability and maintainability and avoids using magic literals e.g.
// Low readability
if (x > 10) {
}
//Better!
const maxRows = 10;
if (x > maxRows) {
}
const declarations must be initialized
const foo; // ERROR: const declarations must be initialized
A const is block scoped like we saw with let:+
const foo = 123;
if (true) {
const foo = 456; // Allowed as its a new variable limited to this `if` block
}

The let and const
ES6 let allows you to declare a variable that is limited in scope to the block (Local variable). The main difference is that the scope of a var variable is the entire enclosing function:
if (true) {
var foo = 42; // scope globally
}
console.log(foo); // 42
The let Scope
if (true) {
let foo = 42; // scoped in block
}
console.log(foo); // ReferenceError: foo is not defined
Using var in function scope is the same as using let:
function bar() {
var foo = 42; // scoped in function
}
console.log(foo); // ReferenceError: foo is not defined
The let keyword attaches the variable declaration to the scope of whatever block it is contained in.
Declaration Order
Another difference between let and var is the declaration/initialization order. Accessing a variable declared by let earlier than its declaration causes a ReferenceError.
console.log(a); // undefined
console.log(b); // ReferenceError: b is not defined
var a = 1;
let b = 2;
Using const
On the other hand, using ES6 const is much like using the let, but once a value is assigned, it cannot be changed. Use const as an immutable value to prevent the variable from accidentally re-assigned:
const num = 42;
try {
num = 99;
} catch(err) {
console.log(err);
// TypeError: invalid assignment to const `number'
}
num; // 42
Use const to assign variables that are constant in real life (e.g. freezing temperature). JavaScript const is not about making unchangeable values, it has nothing to do with the value, const is to prevent re-assigning another value to the variable and make the variable as read-only. However, values can be always changed:
const arr = [0, 1, 2];
arr[3] = 3; // [0, 1, 2, 3]
To prevent value change, use Object.freeze():
let arr = Object.freeze([0, 1, 2]);
arr[0] = 5;
arr; // [0, 1, 2]
Using let With For Loop
A particular case where let is really shines, is in the header of for loop:
for (let i = 0; i <= 5; i++) {
console.log(i);
}
// 0 1 2 3 4 5
console.log(i); // ReferenceError, great! i is not global

Summary:
Both the let and the const keyword are ways to declare block scoped variables. There is one big difference though:
Variables declared with let can be reassigned.
Variables declared with const have to be initialized when declared and can't be reassigned.
If you try to reassign variables with declared with the const keyword you will get the following error (chrome devtools):
Why should we use this?
If we know that we want to assign a variable once and that we don't want to reassign the variable, using the const keywords offers the following advantages:
We communicate in our code that we don't want to reassign the variable. This way if other programmmers look to your code (or even you to your own code you wrote a while ago) you know that the variables which are declared with const should not be reassigned. This way our code becomes more declarative and easier to work with.
We force the principle of not being able to reassign a variable (JS engine throws error). This way if you accidentally try to reassign a variable which is not meant to be reassigned you can detect this at an earlier stage (because it's logged to the console).
Caveat:
Although a variable declared with const can't be reassigned this doesn't mean that an assigned object isn't mutable. For example:
const obj = {prop1: 1}
// we can still mutate the object assigned to the
// variable declared with the const keyword
obj.prop1 = 10;
obj.prop2 = 2;
console.log(obj);
If you also want your object to be non mutable you can use Object.freeze() in order to achieve this.

let and const
Variables declared with let and const eliminate specific issue of hoisting because they’re scoped to the block, not to the function.
If a variable is declared using let or const inside a block of code (denoted by curly braces { }), then the variable is stuck in what is known as the temporal dead zone until the variable’s declaration is processed. This behavior prevents variables from being accessed only until after they’ve been declared.
Rules for using let and const
let and const also have some other interesting properties.
Variables declared with let can be reassigned, but can’t be
redeclared in the same scope.
Variables declared with const must be assigned an initial value, but
can’t be redeclared in the same scope, and can’t be reassigned.
Use cases
The big question is when should you use let and const? The general rule of thumb is as follows:
use let when you plan to reassign new values to a variable, and
use const when you don’t plan on reassigning new values to a
variable.
Since const is the strictest way to declare a variable, it is suggest that you always declare variables with const because it'll make your code easier to reason about since you know the identifiers won't change throughout the lifetime of your program. If you find that you need to update a variable or change it, then go back and switch it from const to let.

var declarations are globally scoped or function scoped while let and
const are block scoped.
var variables can be updated and re-declared within its scope; let
variables can be updated but not re-declared;const variables can neither be updated nor re-declared.
They are all hoisted to the top of their scope. But while var
variables are initialized with undefined, let and const variables are
not initialized.
While var and let can be declared without being initialized, const
must be initialized during declaration.

Here are some notes that I took that helped me on this subject. Also comparing const and let to var.
Here's about var:
// Var
// 1. var is hoisted to the top of the function, regardless of block
// 2. var can be defined as last line and will be hoisted to top of code block
// 3. for undefined var //output error is 'undefined' and code continues executing
// 4. trying to execute function with undefined variable
// Example: // log(myName); // output: ReferenceError: myName is not defined and code stops executing
Here's about let and const:
// Let and Const
// 1. use `const` to declare variables which won't change
// 2. `const` is used to initialize-once, read-only thereafter
// 3. use `let` to declare variables which will change
// 4. `let` or `const` are scoped to the "block", not the function
// 5. trying to change value of const and then console.logging result will give error
// const ANSWER = 42;
// ANSWER = 3.14159;
// console.log(ANSWER);
// Error statement will be "TypeError: Assignment to constant variable." and code will stop executing
// 6. `let` won't allow reference before definition
// function letTest2 () {
// log(b);
// let b = 3;}
// Error statement will be "ReferenceError: b is not defined." and code will stop executing

Var
The var keyword was introduced with JavaScript.
It has global scope.
It can be declared globally and can be accessed globally.
Variable declared with var keyword can be re-declared and updated in the same scope.
Example:
function varGreeter(){
var a = 10;
var a = 20; //a is replaced
console.log(a);
}
varGreeter();
It is hoisted.
Example:
{
console.log(c); // undefined.
//Due to hoisting
var c = 2;
}
Let
The let keyword was added in ES6 (ES 2015) version of JavaScript.
It is limited to block scope.
It can be declared globally but cannot be accessed globally.
Variable declared with let keyword can be updated but not re-declared.
Example:
function varGreeter(){
let a = 10;
let a = 20; //SyntaxError:
//Identifier 'a' has already been declared
console.log(a);
}
varGreeter();
It is not hoisted.
Example:
{
console.log(b); // ReferenceError:
//b is not defined
let b = 3;
}
Global object property
var no1 = "123"; // globally scoped
let no2 = "789"; // globally scoped
console.log(window.no1); // 123
console.log(window.no2); // undefined
Redeclaration:
'use strict';
var name= "Keshav";
var name= "Keshav Gera"; // No problem, 'name' is replaced.
let surname= "Rahul Kumar";
let surname= "Rahul Khan "; // SyntaxError: Identifier 'surname' has already been declared
Hoisting
function run() {
console.log(name); // undefined
var name= "Keshav";
console.log(name); // Keshav
}
run();
function checkHoisting() {
console.log(name); // ReferenceError
let name= "Keshav";
console.log(name); // Keshav
}
checkHoisting();
Note: in case of var, you will get undefined, in case of let you will get reference error
Const
It allows you to be immutable with variables.
Const declarations must be initialized
const name; // ERROR: const declarations must be initialized
A const is block scoped like we saw with let:+
const num = 10;
if (true) {
const num = 20; // Allowed as its a new variable limited to this `if` block
}

/*
// declaration of const in same block scope is not allowed
const a = 10;
const a = 15; //Redeclaration of const a Error
console.log(`const outer value `+a);
*/
/*
//declaration of const in different block scope is allowed
const a = 10;
console.log(`outer value of a `+a)
{
const a = 15; //Redeclaration of const allowed in different block scope
console.log(`ineer value of a `+a);
}
*/
/*
// re assigning const variable in any block scope is not allowed
const a = 10;
a = 15; //invalid assignment to const 'a'
{
a = 15; //invalid assignment to const 'a'
}
*/
/*
// let also can not be re declared in the same block scope
let a = 10;
let a = 15; //SyntaxError: redeclaration of let a
*/
/*
// let can be redeclared in different block scope
let a = 10;
{
let a = 15; //allowed.
}
*/
/*
// let can be re assigned in same block or different block
let a = 10;
a = 15; //allowed for let but for const its not allowed.
*/
/*
let a = 10;
{
a = 15; //allowed
}
*/

Should JavaScript minifiers automatically combine var declarations?

I just discovered that YUICompressor (2.4.7) does not combine var declarations. For example,
var x = 1;
var y = 2;
compresses to
var a=1;var b=2;
I assume it would be reasonable to expect a minifier to be able to combine consecutive var declarations, like so:
var a=1,b=2;
But my real question is is it reasonable to expect/possible (for a minifier) to automatically and safely combine non-consecutive var declarations in a single function?

It depends. If you're talking about declarations with initialization then: No.
Consider this:
(function () {
var x = 1;
console.log(y); // undefined
var y = 2;
})();
(function () {
var x = 1, y = 2;
console.log(y); // 2
})();
However, the following is safe and should be done by minifiers:
(function () {
var x = 1, y;
console.log(y); // undefined
y = 2;
})();
It is certainly possible; the compressor scans the whole function for contained var statements prior to generating output. This is necessary to compress variable names.
Note that there is one possible tricky variant, which consists in extending the parameter list, and thus saving extra bytes by completely eliminating any var statements:
(function (x,y) {
x = 1;
console.log(y); // undefined
y = 2;
})();
However, this changes the function's (rarely used) length property and thus is not to be expected from minifiers.

I know of one example where this would not be desirable. See this question Have I reached the limits of the size of objects JavaScript in my browser can handle?
That question was about a bug when the initialization of a variable happened in a single var statement. The question was about assigning a really gigantic literal to a variable which failed. The solution in the end was to split the object into separate var declarations.
Therefore, if compressors always did that, that would cause your code to be more likely to run into that kind of problem