exec: explain-the-concept-of-scope-in-javascript

Author: tahachm

questions/explain-the-concept-of-scope-in-javascript/en-US.mdx

@@ -6,25 +6,33 @@ title: Explain the concept of scope in JavaScript
 
 In JavaScript, scope determines the accessibility of variables and functions at different parts of the code. There are three main types of scope: global scope, function scope, and block scope. Global scope means the variable is accessible everywhere in the code. Function scope means the variable is accessible only within the function it is declared. Block scope, introduced with ES6, means the variable is accessible only within the block (e.g., within curly braces `{}`) it is declared.
 
-```js
-// Global scope
-var globalVar = 'I am global';
+```js live
+var globalVar = 'I am a global var';
 
 function myFunction() {
-  // Function scope
-  var functionVar = 'I am in a function';
+  var functionVar = 'I am a function-scoped var';
 
   if (true) {
-    // Block scope
-    let blockVar = 'I am in a block';
-    console.log(blockVar); // Accessible here
+    let blockVar = 'I am a block-scoped var';
+
+    console.log('Inside block:');
+    console.log(globalVar); // Accessible
+    console.log(functionVar); // Accessible
+    console.log(blockVar); // Accessible
   }
 
-  // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
+  console.log('Inside function:');
+  console.log(globalVar); // Accessible
+  console.log(functionVar); // Accessible
+  // console.log(blockVar); // Uncaught ReferenceError
 }
 
-console.log(globalVar); // Accessible here
-// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+myFunction();
+
+console.log('In global scope:');
+console.log(globalVar); // Accessible
+// console.log(functionVar); // Uncaught ReferenceError
+// console.log(blockVar); // Uncaught ReferenceError
 ```
 
 ---
@@ -35,47 +43,49 @@ console.log(globalVar); // Accessible here
 
 Variables declared outside any function or block have global scope. They are accessible from anywhere in the code.
 
-```js
+```js live
 var globalVar = 'I am global';
 
 function myFunction() {
   console.log(globalVar); // Accessible here
 }
 
+myFunction();
 console.log(globalVar); // Accessible here
 ```
 
 ### Function scope
 
 Variables declared within a function are in function scope. They are accessible only within that function.
 
-```js
+```js live
 function myFunction() {
   var functionVar = 'I am in a function';
   console.log(functionVar); // Accessible here
 }
 
-// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+myFunction();
+console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
 ```
 
 ### Block scope
 
 Variables declared with `let` or `const` within a block (e.g., within curly braces `{}`) have block scope. They are accessible only within that block.
 
-```js
+```js live
 if (true) {
   let blockVar = 'I am in a block';
   console.log(blockVar); // Accessible here
 }
 
-// console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
+console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
 ```
 
 ### Lexical scope
 
 JavaScript uses lexical scoping, meaning that the scope of a variable is determined by its location within the source code. Nested functions have access to variables declared in their outer scope.
 
-```js
+```js live
 function outerFunction() {
   var outerVar = 'I am outside';