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.