Global Scope and Variable Challenge

JavaScript
1

I think this challenge is trying to teach me what happens when I don’t use var to declare a variable.
But I don’t understand the ‘typeof’ part of this function:

function fun2() {
  var output = "";
  if (typeof myGlobal != "undefined") {
    output += "myGlobal: " + myGlobal;
  }
  if (typeof oopsGlobal != "undefined") {
    output += " oopsGlobal: " + oopsGlobal;
  }
  console.log(output);
}

i get it’s assigning var values to output but I’m kinda confused what’s going on in this challenge.
I do get the concept of global variables though.

2

Correct.

Ok. Looking at the complete solution:

var myGlobal = 10; // <-- global variable


function fun1() {
  oopsGlobal = 5; // <-- unintended global variable  
}

function fun2() {
  var output = "";
  if (typeof myGlobal != "undefined") {
    output += "myGlobal: " + myGlobal;
  }
  if (typeof oopsGlobal != "undefined") {
    output += " oopsGlobal: " + oopsGlobal;
  }
  console.log(output);
}

The point is that oopsGlobal should not be available in fun2(). If oopsGlobal was defined correctly using the var keyword in fun1(), then fun2() would not be able to access it because it is inside fun1()'s scope. The typeof conditional statements are just there to check if fun2() has access to oopsGlobal.

function fun2() {
  var output = ""; // this is what is logged to the console

  // myGlobal should not be undefined
  // because it is in the global scope and we can access it.
  if (typeof myGlobal != "undefined") {
    output += "myGlobal: " + myGlobal;
  }

  // oopsGlobal should be undefined because it is inside a different function.
  // unfortunately due to error, it was put in the global scope.
  // Because it is in the global scope, it is not undefined and we log the value (5)
  // to the console.
  if (typeof oopsGlobal != "undefined") {
    output += " oopsGlobal: " + oopsGlobal;
  }

  console.log(output); // myGlobal: 10 oopsGlobal: 5
}

If we had done it correctly, the code would be like this:

var myGlobal = 10; // <-- global variable


function fun1() {
  var oopsGlobal = 5; // <-- function only variable  
}

function fun2() {
  var output = "";

  // myGlobal is not undefined - log it to the console
  if (typeof myGlobal != "undefined") {
    output += "myGlobal: " + myGlobal;
  }

  // oopsGlobal is undefined - therefore we will not return it to console.
  if (typeof oopsGlobal != "undefined") {
    output += " oopsGlobal: " + oopsGlobal;
  }

  console.log(output); // myGlobal: 10
}
3

There are some additional things you can think about which the challenge doesn’t teach you.

If you are using strict mode, your code will produce an error if you try to use a variable that has not been declared:

'use strict';

x = 5; // error, x is not defined

// these are all correct
var y = 5;
let y2 = 5;
const y3 = 5;

The past example shows two other keywords you can use to define variables. These didn’t exist in older versions of JavaScript, so var is the most used in examples on the web, but they are rapidly replacing the use of var, and most programmers suggest you ditch var for let and const.

There are differences between all three (obviously, that’s why they were introduced). It would take me quite a while to get into the discussion, so I will link some articles that are worth your reading!

You Don’t Know JS - What Is Scope
You Don’t Know JS - Lexical Scope
You Don’t Know JS - Function vs. Block Scope
You Don’t Know JS - Hoisting

And finally, a Medium Article by Eric Elliot on why to ditch var: