0

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();
thefourtheye
  • 233,700
  • 52
  • 457
  • 497
imondal007
  • 104
  • 5

2 Answers2

4

Please help me find out what is the problem.

In JavaScript, when all the variables declared with var, will have the default value of undefined unless explicitly something is assigned.

In your case,

var color = "Royal " + color;

you are using color to define the variable color itself. So,

"Royal " + color

will become

"Royal " + undefined

That is why the result is `Royal undefined.

Basically, the variable color declared within the reality shadows the variable, declared outside the scope of that function. So, you need to choose a different name.

var color = "Blue";

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

will print

Royal Blue

Note: If you actually meant to modify the color variable declared outside, then you should not define a variable called color in reality and instead, you should access it directly, like this

var color = "Blue";

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

But, this function doesn't return anything. To make it better, you can return the value and assign it the variable, like this

var color = "Blue";

function reality() {
  return "Royal " + color;
}

color = reality();
console.log(color);
thefourtheye
  • 233,700
  • 52
  • 457
  • 497
  • Thanks, for this very detailed answer, I am learning about global vs local variable and this is where the question come from. If I don't write "var" in front color inside the function reality then it will be a global variable, I want the color variable value as "Blue" globally and "Royal Blue" inside the function reality. is it possible? For example: console.log(color); going to print Blue and reality() going to pring Royal Blur – imondal007 Oct 20 '16 at 07:11
  • @imondal007 It will not become a global variable immediately. What happens is, when you try to access a variable, JavaScript will look for its declaration in the current scope, if it is not there, it will go to the scope above, if not there, above that. It goes on, till it reaches the global scope. – thefourtheye Oct 20 '16 at 07:13
  • @imondal007 If all you care about is printing, then just do `console.log("Royal " + color)` without any declaration statement – thefourtheye Oct 20 '16 at 07:14
  • Printing is not the issue, I really asked this question from learning more about the use of local & global variable. I think I need to know more about JavaScript to understand what you guys are talking about. Thank you again :) – imondal007 Oct 20 '16 at 07:17
  • Now I understand, Local variable gonna ignore the existence of any other variable of same name :) – imondal007 Oct 20 '16 at 07:51
1
var color = "Blue";
function reality() {
  color = "Royal " + color;
  console.log(color);
}
reality();

Color is defined globally, so can be changed inside a function, however if you are defining again it takes null which is undefined.

Matt Cowley
  • 2,164
  • 2
  • 18
  • 29
Raki
  • 535
  • 4
  • 13
  • It that case, Royal Blue become the value of global variable. I want this only inside reality function not globally – imondal007 Oct 20 '16 at 07:13
  • in that case you define one more local variable called _color and assign the global values, so that blue will be global, and royal blue will be local. – Raki Oct 20 '16 at 07:14