Access variable from outside of the function in jQuery - scope

Question

Please see my exaple:
var AbcVar = "abc";
function Abc(AbcVar){
console.log(AbcVar);
}
It this wrong way to allowing function to access external var?
Why is the output of console.log undefined?

Answer 1

It's time to meet Mr. Scoping.
Plainly speaking, scoping is an encapsulation of variables (note that in javascript, functions are also variables.) Now, in the imaginary language I just made up, the { character starts a scope and } ends it, variables are defined with simple equality (x = 42 for example):
{ |
x = 42; |
{ | |
y = "I'm in an inner scope!"; | |
x == 42; //true | |
{ | | |
x == 42; | | |
y == "I'm in an inner scope!"; | | |
| x, y, z are defined |
z = "pyramid time!"; | | |
y = y + "...not"; | | x, y are defined | x is defined
} | | |
y == "I'm in an inner scope!...not"; | |
//z is not defined | |
x = 4; | |
} | |
x == 4; |
//y is undefined |
//z is undefined |
} |
javascript has lexical scoping. Put simply, functions create a new scope:
var x = 42;
(funciton () {
x === 42;
var y = 5;
})();
//y is undefined
Now, there's an additional place where variables can be created, and that is in the function arguments. The two following functions behave the same (arguments is a pseudo-array containing the parameters passed into the function):
function parameterfull(a, b, c) {
//do stuff with a, b, c
}
function parameterless() {
var a = arguments[0], b = arguments[1], c = arguments[2];
//do stuff with a, b, c
}
If you happen to not pass an argument, its value will be undefined.
Now, using your function and the above translation:
var AbcVar = "abc";
function Abc() {
var AbcVar = arguments[0];
console.log(AbcVar);
}
So now you see why AbcVar is (sometimes) undefined inside the function.
tl;dr The function parameter AbcVar is overriding the global variable AbcVar, and since you didn't pass a value to the function, it's undefined (but only inside of the function, the global AbcVar remains the same.)

Answer 2

Inside the function, AbcVar will refer to the parameter AbcVar of the function. If you don't pass any parameter, the value will be undefined.
The parameter shadows the variable in higher scope with the same name. If you want to access it, you have to remove or rename the parameter. That said, you should always prefer passing arguments to functions (where possible).

Answer 3

hi you can change this to
var AbcVar = "abc";
function Abc(bbb){
console.log(AbcVar);
}
you can access external global var,if you write inside function,it assume that like;
var AbcVar = "abc";
function Abc(var AbcVar){
console.log(AbcVar);
}
so inside funciton AbcVar is new vaiable and null ,it shadow global AbcVar

Answer 4

if you run the function you've just created and pass it your AbcVar,
console.log(AbcVar);
it loggs "abc" as expected
Consider the following code
var AbcVar = "abc";
function logVariable(passedIn){
console.log(passedIn);
}
logVariable(AbcVar);
which creates a variable, a function to log the value of the variable, and then passes the variable to the logger which loggs it in the console
If you notice two lines on your interactive console after you run your logger function: abc followed by undefined
the first is the line printed when you call console.log() and the second is the value that logVariable returns after executing, which is undefined on success.