Javascript - How are things broken?

Question

var myName = 4;

function myName() {
    console.log("xxxx");
}
console.log(typeof myName); //Number

var myNamex;

function myNamex() {
    console.log("xxxx");
}
console.log(typeof myNamex); //function

Please refer the fiddle - http://jsfiddle.net/s8a7m1hk/

console.log(typeof myName);

The above log statement logs different value, the only difference is that the variable is assigned a value in one place, and not in another.

Can you tell me how are both code snippet broken down, considering hoisting, closure or any that can be applied.

`var` statement only binds a name to the EnvironmentRecord, it doesn't assign `undefined` or any other value to it. — raina77ow, Jan 31 '15 at 19:09
possible duplicate of [Javascript function scoping and hoisting](http://stackoverflow.com/questions/7506844/javascript-function-scoping-and-hoisting) — Bhojendra Rauniyar, Jan 31 '15 at 19:16

lonesomeday · Answer 1 · 2015-01-31T20:41:57.120

2

Your problem is very simple, once you have the hoisting in the right order. Effectively your code looks like this:

function myName() {
    console.log("xxxx");
}

function myNamex() {
    console.log("xxxx");
}

var myName;
var myNamex;

myName= 4;

console.log(typeof myName); //Number

console.log(typeof myNamex); //function

All the declarations (var statements and function declarations) are hoisted to the top. The assignment of the value 4 is not hoisted, so takes place after the declarations, so myName is 4 when it's logged. You never assign any other value to myNamex, so it is not changed and is still the function.

edited Jan 31 '15 at 20:41

answered Jan 31 '15 at 19:11

lonesomeday

233,373
50
316
318

1

function statements are hoisted higher than variable definitions no? How does the fact that variable definitions in the global context create properties on the global object influence things? – Ben Aston Jan 31 '15 at 19:14
JavaScript... The only language out there that even after so many years still makes me want to beat myself to death whenever one of those things like hoisting comes up. – Jan 31 '15 at 19:34
@onesomeday - Please check the fiddle http://jsfiddle.net/s8a7m1hk/1/ , can we say this is the final breakdown? if not final, further breakdown? If yes, we can infer that all function declarations are broken down in to function expressions. Please correct me if i am wrong – nikhil rao Jan 31 '15 at 20:15
@Ben You're quite right; it makes no difference because `var` does not affect already-existing variables. As to the global context, I don't believe it makes any difference whatsoever. (Notwithstanding the fact that doing this kind of thing in the global context is foolish.) – lonesomeday Jan 31 '15 at 20:43
@nikhilrao As Ben mentioned, I had the order slightly wrong. But no, there's no reason to say that function declarations become function expressions. – lonesomeday Jan 31 '15 at 20:44

Ben Aston · Answer 2 · 2015-01-31T21:09:57.177

The spec will tell you the precise algorithm. Below, context is the [[Scope]] of the enclosing LexicalEnvironment, or the global object.

This is roughly what happens:

context.myName = function myName() { ... }; // From evaluating 1st function statement.
context.myNamex = function myNamex() { ... }; // From evaluating 2nd function statement.

context.myName; // From evaluating var declaration statement myName. Does nothing because property already exists.
context.myNamex; // From evaluating var declaration statement myNamex. Does nothing because property already exists.

context.myName = 4; // Changes the existing property to point to the number instead of the function myName.

console.log(typeof myName); // Number - for reasons that should now be clear.
console.log(typeof myNamex); // function - for reasons that should now be clear.

Javascript - How are things broken?

2 Answers2