I need better explanation on SCOPE

Question

I am slightly lost and don't feel that I fully comprehended it ... Here is a line of codes below

   function greetings(){ // function scope 
        var person = "Lilah";
        alert (person);
    }

    var person ="George"; // this is a scope outside of the function and is called a global scope
    greetings();
    alert(person);
    greetings();
    alert(person); 
// in these case "Lilah", "George", "Lilah", "George"  WHY? - Because all functions can access the
//GLOBAL SCOPE and FUNCTION can change the value of a variable from the GLOBAL SCOPE.
//This is how I understood a script above based on a given lecture

Here is another one. Why this code shows 'Trish' first ?

     var name = "Trish";
     function setName() {
     var name = "Sarah";
     }
    setName();
    alert(name);

Thank you beforehand

Answer 1 · 2015-04-13T22:49:50Z

April 13, 2015 10:49pm

Hey, Durdona aka Dash Dash! :P

Nice to see you again. I'm seeing a lot of confusion here, so I thought I'd try my hand at clearing the air here. You already know how to initialize variables in the global and local scope, so I won't go over that. But, I will over hoisting so that you can get a better feel for how JavaScript treats variables.

Hoisting

Variable Declaration

This is a variable declaration (notice that there is no var keyword):

y = 10;

In a variable declaration, there is no need to use the "var" keyword to initialize the variable, and the variable is always created in the global scope, regardless of where it is declared from. This means that you can use the variable even if you haven't properly initialized it and it is declared within a function. This is what it means to hoist a variable, because even though it's a part of the local scope, it is still hoisted into the global scope:

function myfunc() {
y = 10;
}
myfunc();
alert(y);

Variable Initialization

This is variable initialization (notice now that the var keyword is used both times):

var y = 10;
alert(y);
function myfunc() {
var y = 20;
alert(y);
}
myfunc();
alert(y);

The first alert will show 10, because y is initialized to 10 in the global scope. The second alert, within myfunc(), will show 20 because JavaScript always uses local variables before global ones within functions. Then, the 3rd alert displays 10 again, because after the function executes, the y that was initialized within the function is destroyed, and the only y remaining is the one initialized to begin with var y = 10;

JavaScript always prefers local variables over global ones, even if the initial variable was declared and not initialized.

But let's go back to the declaration and try the above code again, changing what's inside the myfunc() function around a little bit:

var y = 10;
alert(y);
function myfunc() {
y = 20;
alert(y);
}
myfunc();
alert(y);

Notice now that there is no var keyword within myfunc() for the y value. What this means is that we aren't initializing a local variable named y, we are setting the global variable named y to be 20. This means that instead of 10, 20, and 10 showing for alerts, it will now be 10, 20, 20.

Read over this a few times if necessary, and let me know if that helped you some! :)

Answer 2 · 2015-04-13T14:36:39Z

April 13, 2015 2:36pm

Hi there Durdona,

Function scope is a term used to describe the availability of a variable for use in another part of the program. If for instance you declared a variable inside of the function this variable would be local to that function. It has local scope and can only be used inside that function.

If however you had a variable declared outside of any function that variable would be global. Any function can then access and use it!

Answer 3 · 2015-04-13T14:41:26Z

April 13, 2015 2:41pm

the reason that the var name = "trish" shows first because it ia set as a global scope variable witch is avail to all methods in the program .. the var name = "sarah" is a local scope variable witch is only avail to the function setName . the only way to return that variable is to call the function setName() . I hope I helped with that without confusing you more think of scope as global or avail to the entire program and local as avail to a peice of the program

Answer 4 · 2015-04-13T15:29:29Z

April 13, 2015 3:29pm

I apologize it is still not clear to me ... My confusion probably starts with knowing Java programming language... Here is what I found http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript

I started running given codes. The first example runs empty alert box ... What is it ? Why can't I recognize scope ?

Answer 5 · 2015-04-13T15:51:30Z

April 13, 2015 3:51pm

if you know java the concepts behind variable scope are very similar ...when you create a variable or an object inside a method in one of your classes, it is useable only inside that method . if you go outside of that part of the program you can no longer use the variable. The { and } brackets in a program define the boundaries for a variables scope . any variable created inside thease brackets can not be used outside of them . This same concept applies to JavaScript if you create a variable outside of the { and } brackets it can be used and where in the program if you create a variable inside { and } brackets it can only be used with in that method.

Answer 6 · 2015-04-13T16:02:13Z

April 13, 2015 4:02pm

var scope ="global";
// this var can be used in any part of the program

function local (){
     var scope = "local"; 
// this var can only be used inside this function 

};

Answer 7 · 2015-04-13T16:11:12Z

April 13, 2015 4:11pm

I was told Visual Studio has JavaScript Debugger tool maybe after trying it I will comprehend it better. I am trying to install it now. Thank you again

Answer 8 · 2015-04-13T16:48:51Z

April 13, 2015 4:48pm

Basically when you declare a variable within a function, between the two curly braces, it only exists within that function. This is called a local variable. You can only use this variable by calling the function. However, if you declare a variable outside of a function it's considered a global variable so it can be used inside of a function as well as outside of it. If you're using a local variable and a global variable with the same name, you'll have to declare the variable within the function so that it knows that it's local. Otherwise the global function could be pulled into the function and changed.

Answer 9 · 2015-04-13T17:48:21Z

April 13, 2015 5:48pm

you have to call the function like this

one();

Answer 10 · 2015-04-13T19:10:24Z

April 13, 2015 7:10pm

i see what you did to get the second alert now .. was it your intention to have two alerts with two different values

Answer 11 · 2015-04-13T19:20:06Z

April 13, 2015 7:20pm

this is how i called this code

var a = 1;

function one(){
 alert (a);
};

one();


// by not wrapping this function call in an alert() method it calls function one that is already programmed to alert the val of the global variable a  i would not wrap this function call in an alert method by doing so is what gave you the second alert that said undefined. 


// now if i had wanted to change a global var value to a local var value  i would do some thing like this 

  function two(){
        var a = 2;
       alert(a);

    }
 two();
// preview this in the browser and it will display two alert boxes both showing different val for the same variable.

Answer 12 · 2015-04-13T19:23:01Z

April 13, 2015 7:23pm

this is how i called this code

var a = 1;

function one(){
   alert (a);
 };

one();

// by not wrapping this function call in an alert() method it calls function one that is already programmed to alert the val of the global variable a i would not wrap this function call in an alert method by doing so is what gave you the second alert that said undefined.

// now if i had wanted to change a global var value to a local var value i would do some thing like this

function two(){
 var a = 2;
 alert(a);
}

two();
// preview this in the browser and it will display two alert boxes both showing different val for the same variable.

Answer 13 · 2015-04-13T19:29:20Z

April 13, 2015 7:29pm

 var a = 1;

function one(){ 
     alert (a);
 };

one();

// by not wrapping this function call in an alert() method it calls function one that is already programmed to alert the val of the global variable a i would not wrap this function call in an alert method by doing so is what gave you the second alert that said undefined.

// now if i had wanted to change a global var value to a local var value i would do some thing like this

function two(){ 
     var a = 2;
      alert(a); 
}

two();
 // preview this in the browser and it will display two alert boxes both showing different val for the same variable.

Answer 14 · 2015-04-13T19:38:21Z

April 13, 2015 7:38pm

now with this same code example i can go a step further and show you a 3rd alert with the original val of var a

 var a = 1;

function one(){ 
     alert (a);
 };

one();

function two(){ 
     var a = 2;
      alert(a); 
}

two();
// by using the alert method and passing it the var a as its argument it will display 1 in 3rd alert pop up
alert(a);

Welcome to the Treehouse Community

Looking to learn something new?

Durdona Abdusamikovna

Durdona Abdusamikovna

I need better explanation on SCOPE

14 Answers

Marcus Parsons

Marcus Parsons

Hoisting

Variable Declaration

Variable Initialization

Durdona Abdusamikovna

Durdona Abdusamikovna

Marcus Parsons

Marcus Parsons

Durdona Abdusamikovna

Durdona Abdusamikovna

Marcus Parsons

Marcus Parsons

Durdona Abdusamikovna

Durdona Abdusamikovna

Danielle Bartholomew

Danielle Bartholomew

Jonathan Grieve

Jonathan Grieve

Raymond Osier

Raymond Osier

Brian Martin

Brian Martin

Marcus Parsons

Marcus Parsons

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier

Raymond Osier

Raymond Osier

Raymond Osier

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier

Raymond Osier

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier

Raymond Osier

Leyna Cameron

Leyna Cameron

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier

Raymond Osier

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier

Raymond Osier

Durdona Abdusamikovna

Durdona Abdusamikovna

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier

Raymond Osier

Raymond Osier

Raymond Osier

Raymond Osier

Raymond Osier

Raymond Osier

Raymond Osier

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier

Raymond Osier

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier

Raymond Osier

Raymond Osier

Raymond Osier

Durdona Abdusamikovna

Durdona Abdusamikovna

Raymond Osier