2.4 JavaScript Scope¶

Global Scope¶

Task 1: Declare a new variable called myVar, and assign 100 to it. Display myVar value in the console.

var myVar = 100;
console.log(myVar);

The result is: 100

Task 2: Create a new function that displays the value of myVar. Do not forget to call this function.

var myVar = 100;

function displayVar(){
  console.log(myVar);
}

displayVar();

The result is: 100

How does the code above work?

1. The JavaScript engine reads the code from top to bottom.
2. It declares and initializes the function displayVar.
3. It sets myVar to undefined.
4. Now, the JavaScript engine executes the code line by line.
5. It assigns 100 to myVar.
6. It runs the code inside the function, and display 100 in the console.

As you can see, myVar is declared in the main area of our code. We could access the value of myVar from the code inside displayVar function.

Task 3: Check the following code, and try to understand the result.

displayVar();

function displayVar(){
   console.log(myVar);  
}

var myVar = 100;

The result is: undefined

How does the code above work?

1. The JavaScript engine reads the code from top to bottom.
2. It declares and initializes the function displayVar.
3. It sets myVar to undefined.
4. Now, the JavaScript engine executes the code line by line.
5. It calls the function displayVar, and it displays undefined in the console
6. It assigns 100 to myVar.

Task 4: Refer to task 3; is myVar declared in the global scope?

Yes, myVar is declared in the global scope, and it can be accessible from anywhere in our code.

Task 5: Declare a variable called username in the global scope. Access and display this variable in a function.

var username = "Nawras";

function displayUsername(){
  console.log(username);
}

displayUsername();

The result will be: Nawras

Task 6: Check the following code, and understand the result.

function displayVar(){
   console.log(myVar);
}

var myVar = 100;
displayVar();

The result will be: 100

How does the code above work?

1. The JavaScript engine reads the code from top to bottom.
2. It declares and initializes the function displayVar.
3. It sets myVar to undefined.
4. Now, the JavaScript engine executes the code line by line
5. It assigns 100 to myVar.
6. It calls the function displayVar. It displays 100 in the console

Task 7: Refer to task 6; is myVar declared in the global scope?

Yes, myVar is declared in the global scope, and it can be accessible from anywhere in our code.

Local Scope¶

Task 8: Check the following code, and understand the result.

function setUsername(){
  var username = "Ali";
}

setUsername();
console.log(username);

The result is: Uncaught ReferenceError: username is not defined

How does the code above work?

1. The JavaScript engine reads the code from top to bottom.
2. It declares and initializes the function setUsername.
3. Now, the JavaScript engine executes the code line by line
4. It calls the function setUsername.
5. It assigns "Ali" to username. The variable username is only accessible inside the function setUsername.
6. It tries to access username outside the function, but it fails, why?!

Task 9: Check the following code, and understand the result.

displayHello("Nawras");
console.log(greet);

function displayHello(name){
  var greet  = "Hello " + name;
}

The result is: Uncaught ReferenceError: greet is not defined

How does the code above work?

1. The JavaScript engine reads the code from top to bottom.
2. It declares and initializes the function displayHello.
3. Now, the JavaScript engine executes the code line by line
4. It calls the function displayHello() with the value "Nawras".
5. It assigns "Hello Nawras" to greet. The variable greet is only accessible inside the function displayHello().
6. It tries to access greet outside the function, but it fails because the variable greet is local to the function displayHello

Task 10: Check the following code, and understand the result.

function setUsername(){
  var username = "Ali";
  console.log(username);
}

var username = "Nawras";


console.log(username);
setUsername();
console.log(username);

The result is as follows:

Nawras
Ali
Nawras

How does the code above work?

1. The JavaScript engine reads the code from top to bottom
2. It declares and initializes the function setUsername.
3. It assigns undefined to the variable username.
4. Now, the JavaScript engine executes the code line by line.
5. It assigns "Nawras" to username.
6. It searches for a variable called username in the global scope.
7. It displays the value of the global username, which is "Nawras".
8. It calls the function setUsername().
9. It assigns "Ali" to the local username.
10. console.log(username): it searches for username in the function scope, it finds username = "Ali", so "Ali" is displayed.
11. It searches for a variable called username in the global scope.
12. It displays the value of the global username, which is "Nawras".

Task 11: What is the result of the following code?

function multiplyByTwo(num){
  var result = num * 2;
  console.log(result);
}

var result = 5;

console.log(result);
multiplyByTwo(6);

The result is as follows:

5
12

Task 12: Refer to task 11; why is 5 displayed first in the result?

The JavaScript searches for the variable result in the nearest scope, which is the global scope. In the global scope, result value is equal to 5.

Task 13: Refer to task 11; why is 12 displayed secondly in the result?

The JavaScript searches for the variable result in the nearest scope, which is the function scope. In the function scope, result value is equal to 12.

Task 14: What is the result of the following code?

function multiplyByTwo(num){
  console.log(result);
}

var result = 5;

console.log(result);
multiplyByTwo(6);

The result is as follows:

5
5

Task 15: Refer to task 14; why is 5 displayed first in the result?

The JavaScript searches for the variable result in the nearest scope, which is the global scope. In the global scope, result value is equal to 5.

Task 16: Refer to task 14; why is 5 displayed secondly in the result?

The JavaScript searches for the variable result in the nearest scope, which is the function scope. In the function scope, result is not defined. Then, it searches for result in the global scope. In the global scope, result value is equal to 5.

We will learn about the block and lexical scopes later in this course.