CODEWITHSUNDEEP
scopejavascript
Iladarsda
Iladarsda

Reputation: 10696

Access variable from outside of the function in jQuery

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?

Upvotes: 1

Views: 227

Answers (4)

Zirak
Zirak

Reputation: 39808

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.)

Upvotes: 5

Alec Wenzowski
Alec Wenzowski

Reputation: 3908

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

console result

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.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816422

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).

Upvotes: 1

Muhammed şahsuvaroğlu
Muhammed şahsuvaroğlu

Reputation: 479

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

Upvotes: 0

Related Questions