JavaScript "use strict" inconsistently working in Chrome snippets / DevTools Sources panel

Question

I am currently taking a Udemy course on "Advanced" Javascript concepts (https://www.udemy.com/course/javascript-advanced/), and the first lesson goes over the "use strict" command and its functionality. The course uses Chrome's Sources panel to write code in snippets and observe expected results.

For some reason I am having inconsistent success with the "use strict" command when following along with the video.

Example: The course writes the following code as an example of when "use strict" will throw an error on screen to showcase that an undefined variable is present..

  "use strict";
  //
  var theVal = 0;
  //
  thVal = 1;
  //
  if (theVal > 0) {
      console.log("Hello!");
  }

In the video, an error is throw - "Uncaught ReferenceError: thVal is not defined" - and a red "x" appears on line 5 of the snippet to highlight where the error was thrown. However, for some reason I am not seeing that error.

The weird thing is that I can change the incorrectly stated variable to anything else - "thValue", "theVol", etc. - and the error message and "x" will appear. Is there something that I am missing here? I make sure to save the snippet before running but for some reason I cannot follow along with the video exactly as shown and it's simply bugging me as to why this is happening specifically when using "thVal".

Answer 1

   "use strict";
    
var theVal = 0;
    
theVal = 1;
   
if (theVal > 0) {
   console.log("Hello!");
}

The purpose of "use strict" is to indicate that the code should be executed in "strict mode". With strict mode, you can not use undeclared variables. For example thVal = 1; is undeclared. You can find the working code above.