Do JavaScript interpreters set all variables to undefined

Question

When creating a variable such as var three = 3; do JavaScript interpreters first assign var three; then three = 3; or is it done all in one shot?

The part that is of interest to me here is the potential intermediate undefined value and a way, if possible to observe that process.

Edit

New Title: Does variable declaration happen before variable initialization

Given this one line JavaScript File

var three  = 3;

Does the interpreter still hoist the variable three and effectively change this to

var three;
three = 3;

w3schools has a good article explaining this in some detail.

Answer 1

All JavaScript variables are hoisted, as @fardjad mentioned. They are also initially set to be undefined.

To show this, consider the following:

var a= eval('thr'+'ee');
var three= 3;

console.log(a);      //undefined
console.log(three);  //3

This is the equivalent to this:

var a;
var three;

a= eval('thr'+'ee');
three= 3;

console.log(a);      //undefined
console.log(three);  //3

No JavaScript interpreter to my knowledge would be smart enough to realize that the three variable isn't needed before it's declared and initialized. If it weren't hoisted, the eval code would throw an error.

Answer 2

Javascript interpreters hoist the variables before code execution, so writing:

console.log(three);
var three = 3;

is effectively the same as:

var three;
console.log(three);
three = 3;

Answer 3

I believe it is done in several stages as the JavaScript is optimized before execution, and to do that the engine must have some understanding of the code. Here's a picture of how the engine handles JavaScript specifically for chromium taken from http://blog.chromium.org/2015/03/new-javascript-techniques-for-rapid.html:

You can see by this that the code is both parsed (to check for validity) and probably to create lexical tokens that is then compiled and optimized before runtime execution. It's during this compile stage that the variables will be declared (giving the affect of hoisting) yet during the execution where they'll be initialized.

I've been watching an Advanced JavaScript course taught by Kyle Simpson that talks a lot about this and discusses a 2 phase way of compiling JavaScript and dealing with variable hoisting. Here is a modified example from the course that doesn't use eval to make it simpler:

console.log(a);

var a = 2;
console.log(a);

console.log(c);

What you can see here is that a is successfully logged as undefined at the start - before they have been declared. This is due to variable hoisting as mentioned in other answers were the output of the parsing engine is to treat it more like:

var a;
console.log(a);

a = 2;
console.log(a);

Due to the fact that the compiler has defined a before execution time, we're able to log their undefined values, something that you couldn't do if they were simply defined and initialized at the same time.

This doesn't work with c however as it wasn't defined and you'll get a ReferenceError. The reason for highlighting that, is that this is the same sort of error you'd expect if a wasn't hoisted to the top and defined before the initial console.log(a);.