Local Vs Global Variable

#1

When I call reality() I want to print Royal Blue but I am getting Royal undefined I am just a beginner in JavaScript Please help me find out what is the problem.

var color = “Blue”;
function reality() {
var color = "Royal " + color;
console.log(color);
}
reality();

#2

If you look at your function, you will see that you are redeclaring the variable “color”.

If you want to access a named variable outside of your current function (in this case, the one you named reality), you do not use “var” in front of it again. Just use the name of the variable - color.

If you do use var again, the Javascript engine thinks you want to make another variable named “color” and it will ignore the original one. That’s what’s happening here - the function reality has created a new color variable, but does not yet have anything assigned to it, so you get “Royal undefined” as a result.

If you want to know more about it, read up on the topic of “hoisting” - it will explain the process via which Javascript creates variables so that it becomes a bit more predictable!

#3

If I don’t write “var” in front color then it will be a global variable, I want the color variable value as “Blue” globally and “Royal Blue” inside the function reality.

#4

Then you have to change the name of one of color variables.I don’t think the same variable name can reference 2 values simultaneously in the same scope.

var color = "Blue";

function reality() {
	// what is somehow happening, behind the scenes :
	var color = undefined;
	color = "Royal " + color; // javascript engine looks for the value of color(after the + sign) in the immediate environment and find it's "undefined"
	console.log(color);
}

reality();

what you can do is(but I would not recommend it, using the same names can be confusing) :

var color = "Blue";

function reality(globalColor) {
	var color = "Royal " + globalColor;
	console.log(color);
}

reality(color);
#5

Not quite. If you hadn’t already declared the color variable then, yes, accessing it inside of your reality() function without using a var statement would create a “global variable”.

But that’s not the case. You’ve already defined it in a scope visible to reality(), so it will modify that instead of declaring a new one.


/* THIS IS WHAT IS HAPPENING NOW ... */

var color = "Blue"; /* <-- color defined and is set to "Blue" */

function reality(){

   var color = 'Royal ' + color; /* <-- creates a *new* variable called color visible only inside the function. This is initialized with no value, which is represented as "undefined". When you try to add "Royal " to it, you get "Royal undefined" */
   console.log( color ); /*<-- Royal undefined*/

}

reality( color );


/* THIS IS WHAT HAPPENS IF YOU REMOVE THE SECOND var STATEMENT */

var color = "Blue"; /* <-- color defined and is set to "Blue" */

function reality(){

   color = 'Royal ' + color; /* <-- there is no color variable available to the reality function, so it looks outside of itself and finds *that* color value. color is modified and is now "Royal Blue" both inside and outside the function */
   console.log( color );

}

reality( color );

I believe I see what you want to do - you want to maintain the color variable you have and keep it “Blue”. But you want a color variable in the function and you want to prepend it with "Royal " so you have “Royal Blue”.

A very simple solution is this:


/* THIS IS HAPPENS IF YOU CREATE A DIFFERENT VARIABLE INSIDE THE FUNCTION ... */

var color = "Blue"; /* <-- color defined and is set to "Blue" */

function reality(){

   var new_color = 'Royal ' + color; /* <-- creates a new_color variable and sets its value to "Royal " + color */
   console.log( new_color ); /*<-- Royal Blue*/

}

reality( color );

If you cannot use a different variable name inside reality() (why not?) and you don’t want to re-assign the existing variable, then you need to change the reality function to accept a parameter and pass in color when you call it.

By defining reality to take a parameter, you can “pass in” the color to the function. This will make a copy of that value and you can access it inside the function without changing the value outside.

/* THIS IS WHAT HAPPENS IF YOU CHANGE REALITY() TO ACCEPT AN ARGUMENT CALLED COLOR */
var color = "Blue"; /* <-- color defined and is set to "Blue"*/

function reality( color ){

   color = 'Royal ' + color; /* <-- color is now local to the function because you passed it in as a parameter/argument. "Royal " is added to the value of color and you get "Royal Blue". But this is only inside the function. Outside the function is a completely different color variable and it still === "Blue"*/
   console.log( color );

}

reality( color );

It’s kind of a lot to take in and I know you said you are new at this.

But keep in mind that, whenever you use the var keyword, you are saying you want to declare a new variable. Not access an existing one.

var color = 'Blue'; /* Make a new variable called color and assign the value "Blue".*/
color = 'Red'; /* Change the value of color from "Blue" to "Red"*/

I know you are new at this. Play with it some more. Read up on a subject called “variable scope”, which explains the rules that Javascript uses when creating a variable and when a function can see it to access it or change it.

#6

Now I understand, Local variable gonna ignore the existence of any other variable of same name :slight_smile: Thank you very much for your detailed answer

#7

You’re welcome! Glad I could help.

1 Like