why variables declare before functions in Javascript

Question

I was looking for calculator codes on net and I discovered code like the following.

But i have a question in my mind. Why did the programmer declare the variable before creating the function?

var getValues= "";

function updateField(val) {
    getValues += val;
    document.calc.putValues.value = getValues;
}

Please kindly help me answer my question.

Thank you all.

score 3 · Answer 1 · answered Apr 10 '11 at 12:47

3

That way it's a global variable that persists its value through the function calls. If you put it inside the function it will be always 0 when the function is called

answered Apr 10 '11 at 12:47

AlfonsoML

12,634
2
46
53

1

getValues will not "always be zero when the function is called". It is a global variable and is assigned a value of '' (empty string) before the function is called. If the function is called, it will have whatever value the function assigns it. So it will only have a value of zero if that is what it was assigned the last time function was called. – RobG Apr 10 '11 at 12:58
I tried to explain that if *it's inside the function* then it will always be empty, it won't keep its value through different calls and it can't be used in other functions. – AlfonsoML Apr 10 '11 at 15:30
@RobG `code`var getValues= ""; function updateField(val) { getValues += val; document.calc.putValues.value = getValues; } well i can also assign the variable like `code`var getValues; isn't that okay for that why i need to assign it empty – Muzammil Apr 10 '11 at 15:31

score 2 · Answer 2 · edited May 23 '17 at 10:33

2

What he's doing is he's moving the variable out of the scope of the function.

This will make the same variable accessible by other methods in the same scope.

See this question to learn more about variable scope : What is the scope of variables in JavaScript?

edited May 23 '17 at 10:33

Community

1
1

answered Apr 10 '11 at 12:47

JohnP

49,507
13
108
140

Thank your very much. now i am reading the link you gave me and it is very helpfull to me. – Muzammil Apr 10 '11 at 15:30

score 1 · Accepted Answer · answered Apr 10 '11 at 13:05

You know, the variable can actually be declared under the function. But it must be declared before it is used, meaning before the function is called.

I created a test scenario to show what I mean.

I created a textfile called test.html with the following simple content:

<script type="text/javascript">
var a = "hello"; // <- the declaration of the variable before the function
function b(){ // <- the actual function
  a += " world";
  alert(a);
}
b(); // <- and here it is called
</script>

If I load this text file in my Firefox4 (with file://$path_to_file/test.html) I get an alert box with the message Hello world.

Then I changed the order:

<script type="text/javascript">
function b(){ // <- the actual function
  a += " world";
  alert(a);
}
var a = "hello"; // <- the declaration of the variable under the function
b(); // <- and here it is called
</script>

The result was the same: Hello World But when I was putting the declaration under the call like this:

<script type="text/javascript">
function b(){ // <- the actual function
  a += " world";
  alert(a);
}
b(); // <- and here it is called
var a = "hello"; // <- the declaration of the variable under the call
</script>

I got a different result: undefined world. JavaScript recognizes that it doesn't know what a could be and so handles it as undefined.

Of course a sum of numbers could have been interpreted differently from a sum of strings, so I also tested this:

<script type="text/javascript">
function b(){ // <- the actual function
  a += 3;
  alert(a);
}
b(); // <- and here it is called
var a = "hello"; // <- the declaration of the variable under the call
</script>

The result was: NaN meaning Not a Number.

That is all about laziness and tolerance of JS. Your question can of course also be interpreted concerning the scope of variables and functions. But for that there are already 2 answers. Of course, if they are not enough I can also edit a detailed explanation here.

why variables declare before functions in Javascript

3 Answers3