I am trying to understand how the following java script code works. I have global variable called color that stores 'blue'; I am calling printColor() that simple prints the color. What i don't understand is why the color is undefined when i am defining a new local variable called color in the function. If you uncomment the local color variable declaration below, the color is undefined.
var color = 'blue';
printColor();
function printColor(){
document.write(color);
//var color = "green";
}
you are re-declaring variable color inside your printColor() function, since the declaration is actually hoisted to the top it overwrites it at the start of the function, hence you see undefined
var color = 'blue';
function printColor(){
document.write(color);
//var color = "green";
}
printColor();
but if you do:
function printColor(){
document.write(color); //undefined
var color = "green";
console.log(color); //shows green
}
When you var color = 'green' in your printColor function, any reference to color variable in the function will refer to the local color variable, no matter where it sit in the function.
You were trying to write a local variable in your case. That's why it undefined. It's the way js work. I have no idea why it was made like that.
var color; document.write(color); color = "green";. You're redefining a localcolorvariable, and it's being hoistedvar color = "green";line is commented out. That's fine, whendocument.write(color)executes, it looks in the current scope and doesn't find acolorvariable. So it looks up the scope chain and finds it in the parent scope, so it can print "blue". When you redeclare a local variable by the same name, it shadows the parent scope's variable, and hoisting is causing problems. I edited my last comment with more stuff too