0

I don't understand why a var variable can be reassigned within a function, but the change also applies outside of the function. Why/How?

var c = 1;

function Fn() {
c = 2;
}
Fn();
c; // 2

Why isn't the value 2 limited to the scope of the function? When I write c = 2 within a function, does the javascript engine automatically hoist a new var c outside of the function and assigns it the value undefined, which is then changed to 2 once Fn() is called?

  • 2
    You've declared `c` in the outer scope, hence its value is read from the outer scope. If you'd declared it in the function (`var c = 2;`), that variable would be local to the function, independent of the outer scope variable with the same name. – Teemu Jun 26 '22 at 15:04
  • I think you're talking about redeclaration, not reassignment. –  Jun 26 '22 at 15:07
  • 1
    No, it's not a re-declaration, it's a brand new declaration inside the function (it's impossible to re-declare variables in JS). See https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript – Teemu Jun 26 '22 at 15:08
  • 1
    @Wizver there is no "re" declaration. This program only has a single declaration, `var c` on the same line with the definition `= 1`. There are two definitions `c = 1` and `c = 2 `. c is declared only once In this script. To make the inner c only be 2 in the inner scope, you need to change `c = 2;` to `var c = 2;` To `shadow` the outer c. – Dmytro Jun 26 '22 at 15:08
  • But my function doesn't declare a new variable c inside the function. –  Jun 26 '22 at 15:08
  • Exactly, that's why it uses the value from the outer scope. To bind a variable into a scope, you've to declare it in that scope. Just read the post I've linked above, it explains all thoroughly. – Teemu Jun 26 '22 at 15:09
  • But it doesn't use the outer scope c when it's called outside the function. It results to 2, not 1. –  Jun 26 '22 at 15:11
  • ??? It does use the outer scope, when you set the value to `2` in the function, you set it to a variable in the outer scope. – Teemu Jun 26 '22 at 15:12
  • Have you never heard of the concept of global variables from other languages like C/C++ or BASIC or Lua or Perl or any other language? – slebetman Jun 26 '22 at 15:26

3 Answers3

1

It applies outside the function because, inside the function, you are changing the variable.

You are not creating a new variable that exists only inside the function.

Why isn't the value 2 limited to the scope of the function?

You didn't use var, let, const or any other method to create a variable in the scope of the function.

You are accessing the variable you already created in the wider scope.

When I write c = 2 within a function, does the javascript engine automatically hoist a new var c outside of the function and assigns it the value undefined, which is then changed to 2 once Fn() is called?

No. There isn't a new variable. There is only the c you already created outside the function.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
0

This is a common complaint about javascript. Since you used "Var" it has a global scope, so even though you're within a new function when you use c=2 since it's already defined globally it's changed globally. Using "Let" helps define things local to the function and "const" defines globals as constants so they cannot be changed. This issue is particularly fun when you have two global variables with the same name in different JavaScript files and then reference both files to be used on a page. Globals should be used with caution.

Natalka
  • 258
  • 1
  • 14
0

When you start run this program, engine will store your variable which declared with "var" keyword in global object(window) then move on to get in the function, Engine will create Special Scope for function is called "Function Execution Context" (FEC) every declaration within the function will be available in this scope(FEC), so when Engine execute body of your function will find re-assignment for variable is called "c", it will looking for it in current scope, if didn't find it, will move on parent scope, in this case, Global Scope is its destination, will find the searched variable and then re-assign it with new value.

Read this wonderful article -> execution-context-how-javascript-works-behind-the-scenes

Anonumouz
  • 62
  • 6