Freecodecamp: ES6 - Compare Scopes of the var and let keywords - console not defined error

[mstellaluna]

Challenge Name

https://beta.freecodecamp.org/en/challenges/es6/compare-scopes-of-the-var-and-let-keywords

Issue Description

There are two errors that appear in the challenge on the editor.
First is for the "use strict", the warning states "use the function form of use strict"
Second error is console.log having a red X stating console is not defined.
The challenge still passes.

if I put the use strict into function form, the errors on the editor disappear

Browser Information

Browser Name, Version:
Operating System: FireFox 57.0 (64-bit) and Chrome Version 63.0.3239.84 (Official Build) (64-bit)
Mobile, Desktop, or Tablet: Laptop Windows 10 Professional 64-bit

Your Code

Screenshot

Use Strict in Function Form:

[bteng22]

It looks like this is occurring in all the exercises on the beta environment—I could take a look at this. This would be my first issue, but I'm assuming the expected behavior should be not having to execute use strict and not having errors on globally defined functions like console.log?

[bteng22]

Looks like @Ethan-Arrowood covered most of these in #16262 which addressed the related issue #16254. Appears we just need to fix the last 5 on the ES6 challenges from Understand the Differences Between import and require to Import a Default Export which are complaining about not using the function form of use strict

[saurishkar]

Hi, Taking this up if nobody is working on it.

[saurishkar]

just found an additional error in test cases. The test cases do not account for library name in single quotes in the import statement. Will be fixing this issue in the same PR i raise.

[raisedadead]

Awesome @saurishkar thanks a lot.

[raiden357]

I put let i = "function scope"; and let i = "block scope"; and it passed

[raisedadead]

This is open for contributions.

[jsonkao]

The "function form" of "use strict" is not "use strict()". "use strict()" is just invalid JavaScript. The functional form is when you put "use strict" as the first line of a function.

// file form of Strict mode
'use strict';
function() ...

// function form of Strict mode
function() {
  'use strict';
  ...
}

The reason why using "use strict()" worked in @mstellaluna 's case was because it didn't mean anything. It would have been the same thing as putting "dog"—JavaScript just ignores it.

The reason why the Code Mirror pushes campers to use the function form of "use strict" goes back to its linting mechanism. Most linters force coders to use the function form due to one simple reason: file concatenation. To appease the Performance Gods, we coders concatenate many JavaScript files together to avoid cumulative HTTP delays. This means that one rogue "use strict" outside of a function will affect all our JavaScript. If there is sloppy code in a file not in the file where Strict Mode is declared, the code will probably fail.

Anyways, the console is not defined error within the Code Mirror is also a Code Mirror/JSLint thing. (You can reproduce the warning on their linter demo.) The solution in a linter is usually to use the functional form of "use strict" or to add /* jslint browser: true */ to the top of the file.

// /* jslint browser: true */ adds the same globals as this directive:
/* global
clearInterval, clearTimeout, document, event, FileReader, FormData, history, localStorage, location, name, navigator, screen, sessionStorage, setInterval, setTimeout, Storage, URL, window, XMLHttpRequest
*/

However, notice how the above set of globals does not include console. To fix the console is not defined error, a /* global console */ statement has to be added.

For now, it is just easier to listen to the linter and use the function form of "use strict". The function form will not call out the "undefinedness" of globals. (A better developer than me could explain why.)

[QuincyLarson]

@raisedadead what do you think of @jkao1's suggestion? Should we just move the "use strict"; into functions to get the linter to accept them?

If so, could you open a PR addressing this real quick? It would seem that @saurishkar never got around to opening a follow-up PR. (@saurishkar if you're reading this, thanks anyway for your help and if you have time, we'd still welcome a PR - we just want to keep this moving.)

[raisedadead]

Hi @QuincyLarson its actually a more complicated problem than that.

@jkao1: You analysis is spot on the presented facts.

But there is a catch over here (don't worry its not your fault at all), which I will explain:

We have been using an eval() method to run all user code.
https://github.com/freeCodeCamp/freeCodeCamp/blob/1d513227e87f0b4d5623bde595f78ea38dd8e041/client/frame-runner.js#L96

Basically we are concatenating a bunch of stuff together from different places and running them in isolation from browser's context inside a function.

More explanation which could be stale, considering a lot has changed recently

This user code is head + seed code + text editor + tail. Where these are pre-setup code, pre-poulated code in editor, user edited code, and end-setup code in that order respectively. This is run in isolation and results are compared against tests.

So, the function form of "use strict" is valid in usage.

Meaning what you see on the webpage as this:

'use strict';
myChallengeCodeFunction(){
...
...
}
console.log(...)

is actually this for purposes of execution (sort of, I am just representing what happens, in sudo code):

eval() {
  'use strict';
   myChallengeCodeFunction(){
    ...
    ...
    }
    console.log(...)
}

This has to be investigated on how to have linting filter rather for various possible use cases. That I am not very sure at the moment.

[QuincyLarson]

@raisedadead OK - thanks for filling us in. We should investigate this, but I'll defer this until after beta release.

[QuincyLarson]

OK - beta has been released. Anyone interested in tackling this?

[ArielLeslie]

This issue can be closed.

[RandellDawson]

@raisedadead, @mstellaluna Is this still an issue?