Executable coding blocks production-readiness - PR 2 (#22)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

Author: 3 people

README.md

@@ -7,7 +7,7 @@ subtitle: How does this new syntax differ from other functions?
 
 Arrow functions provide a concise syntax for writing functions in JavaScript. They are particularly useful for maintaining the `this` context within methods and callbacks. For example, in an event handler or array method like `map`, arrow functions can simplify the code and avoid issues with `this` binding.
 
-```javascript
+```js live
 const numbers = [1, 2, 3];
 const doubled = numbers.map((n) => n * 2);
 console.log(doubled); // [2, 4, 6]
@@ -21,30 +21,35 @@ console.log(doubled); // [2, 4, 6]
 
 Arrow functions provide a more concise way to write functions. This is especially useful for short functions or callbacks.
 
-```javascript
+```js live
 // Traditional function
 const add = function (a, b) {
   return a + b;
 };
 
 // Arrow function
-const add = (a, b) => a + b;
+const anotherAdd = (a, b) => a + b;
+
+console.log(add(2, 3)); // Output: 5
+console.log(anotherAdd(2, 3)); // Output: 5
 ```
 
 ### Lexical `this` binding
 
 Arrow functions do not have their own `this` context. Instead, they inherit `this` from the surrounding scope. This is particularly useful in methods and callbacks where the `this` context can be tricky.
 
-```javascript
+```js live
 function Timer() {
   this.seconds = 0;
-  setInterval(() => {
-    this.seconds++;
+  this.increment = () => {
+    this.seconds++; // 'this.seconds' is inherited from the outer scope
     console.log(this.seconds);
-  }, 1000);
+  };
 }
 
 const timer = new Timer();
+timer.increment(); // 1
+timer.increment(); // 2
 ```
 
 In the example above, using a traditional function inside `setInterval` would require additional steps to maintain the correct `this` context.
@@ -53,11 +58,11 @@ In the example above, using a traditional function inside `setInterval` would re
 
 Arrow functions are often used in array methods like `map`, `filter`, and `reduce` for cleaner and more readable code.
 
-```javascript
+```js live
 const numbers = [1, 2, 3, 4, 5];
 
 // Traditional function
-const doubled = numbers.map(function (n) {
+const doubledTraditional = numbers.map(function (n) {
   return n * 2;
 });
 
@@ -71,7 +76,7 @@ console.log(doubled); // [2, 4, 6, 8, 10]
 
 Arrow functions can be used in event handlers to maintain the `this` context of the class or object.
 
-```javascript
+```js
 class Button {
   constructor() {
     this.count = 0;

questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx

@@ -33,12 +33,12 @@ This code defines a function named `Person` that takes a parameter `name` and as
 
 `const person = Person()` simply invoke the function's code. When you invoke `Person` as a regular function (i.e., without the `new` keyword), the function does not behave as a constructor. Instead, it executes its code and returns `undefined` if no return value is specified and that gets assigned to the variable intended as the instance. Invoking as such is a common mistake if the function is intended to be used as a constructor.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
 
-const person = Person('John');
+const person = Person('John'); // Throws error in strict mode
 console.log(person); // undefined
 console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
 ```
@@ -49,7 +49,7 @@ In this case, `Person('John')` does not create a new object. The `person` variab
 
 `const person = new Person()` creates an instance of the `Person` object using the new operator, which inherits from `Person.prototype`. An alternative would be to use `Object.create`, such as: `Object.create(Person.prototype)` and `Person.call(person, 'John')` initializes the object.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }

questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx

@@ -12,7 +12,7 @@ This behavior simulates classical inheritance, but it is really more of [delegat
 
 Here's an example of prototypal inheritance:
 
-```js
+```js live
 // Parent object constructor.
 function Animal(name) {
   this.name = name;
@@ -60,7 +60,7 @@ Prototypical inheritance is a feature in JavaScript used to create objects that
 
 1. **Prototypes** : Every object in Javascript has a prototype, which is another object. When you create an object using an object literal or a constructor function, the new object is linked to the prototype of its constructor function or the `Object.prototype` if no prototype is specified. This is commonly referenced using `__proto__` or `[[Prototype]]`. You can also get the prototype by using inbuilt method `Object.getPrototypeOf()` and you can set the prototype of an object via `Object.setPrototypeOf()`.
 
-```js
+```js live
 // Define a constructor function
 function Person(name, age) {
   this.name = name;
@@ -104,7 +104,7 @@ console.log(john.sayHello); // undefined
 
 3. **Constructor functions**: JavaScript provides constructor functions to create objects. When a function is used as a constructor with the new keyword, the new object's prototype (`[[Prototype]]`) is set to the constructor's prototype property.
 
-```js
+```js live
 // Define a constructor function
 function Animal(name) {
   this.name = name;
@@ -142,7 +142,7 @@ console.log(fido.fly); // undefined
 
 4. **`Object.create()`**: This method creates a new object with the specified prototype object and properties. It's a straightforward way to set up prototypical inheritance. If you create a object via `Object.create(null)` it will not inherit any properties from `Object.prototype`. This means the object will not have any built-in properties or methods like `toString()`, `hasOwnProperty()`,
 
-```js
+```js live
 // Define a prototype object
 let proto = {
   greet: function () {

questions/explain-how-prototypal-inheritance-works/en-US.mdx

@@ -32,7 +32,7 @@ A callback function is a function that is passed as an argument to another funct
 
 ### Example of a synchronous callback
 
-```js
+```js live
 function greet(name, callback) {
   console.log('Hello ' + name);
   callback();
@@ -76,13 +76,11 @@ fetchData((data) => {
 
 When dealing with asynchronous operations, it's important to handle errors properly. A common pattern is to use the first argument of the callback function to pass an error object, if any.
 
-```js
+```js live
 function fetchData(callback) {
-  setTimeout(() => {
-    const error = null;
-    const data = { name: 'John', age: 30 };
-    callback(error, data);
-  }, 1000);
+  // assume asynchronous operation to fetch data
+  const { data, error } = { data: { name: 'John', age: 30 }, error: null };
+  callback(error, data);
 }
 
 fetchData((error, data) => {

questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx

@@ -6,7 +6,7 @@ title: Explain the concept of destructuring assignment for objects and arrays
 
 Destructuring assignment is a syntax in JavaScript that allows you to unpack values from arrays or properties from objects into distinct variables. For arrays, you use square brackets, and for objects, you use curly braces. For example:
 
-```js
+```js live
 // Array destructuring
 const [a, b] = [1, 2];
 
@@ -26,7 +26,7 @@ Array destructuring allows you to unpack values from arrays into distinct variab
 
 #### Basic example
 
-```js
+```js live
 const numbers = [1, 2, 3];
 const [first, second, third] = numbers;
 
@@ -39,7 +39,7 @@ console.log(third); // 3
 
 You can skip values in the array by leaving an empty space between commas.
 
-```js
+```js live
 const numbers = [1, 2, 3];
 const [first, , third] = numbers;
 
@@ -51,7 +51,7 @@ console.log(third); // 3
 
 You can assign default values in case the array does not have enough elements.
 
-```js
+```js live
 const numbers = [1];
 const [first, second = 2] = numbers;
 
@@ -65,7 +65,7 @@ Object destructuring allows you to unpack properties from objects into distinct
 
 #### Basic example
 
-```js
+```js live
 const person = { name: 'John', age: 30 };
 const { name, age } = person;
 
@@ -77,7 +77,7 @@ console.log(age); // 30
 
 You can rename the variables while destructuring.
 
-```js
+```js live
 const person = { name: 'John', age: 30 };
 const { name: personName, age: personAge } = person;
 
@@ -89,7 +89,7 @@ console.log(personAge); // 30
 
 You can assign default values in case the property does not exist in the object.
 
-```js
+```js live
 const person = { name: 'John' };
 const { name, age = 25 } = person;
 
@@ -101,7 +101,7 @@ console.log(age); // 25
 
 You can destructure nested objects as well.
 
-```js
+```js live
 const person = { name: 'John', address: { city: 'New York', zip: '10001' } };
 const {
   name,

questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.mdx

@@ -6,7 +6,7 @@ title: Explain the concept of inheritance in ES2015 classes
 
 Inheritance in ES2015 classes allows one class to extend another, enabling the child class to inherit properties and methods from the parent class. This is done using the `extends` keyword. The `super` keyword is used to call the constructor and methods of the parent class. Here's a quick example:
 
-```js
+```js live
 class Animal {
   constructor(name) {
     this.name = name;
@@ -44,7 +44,7 @@ Inheritance in ES2015 classes allows a class (child class) to inherit properties
 
 The `extends` keyword is used to create a class that is a child of another class. The child class inherits all the properties and methods of the parent class.
 
-```js
+```js live
 class ParentClass {
   constructor() {
     this.parentProperty = 'I am a parent property';
@@ -75,7 +75,7 @@ child.parentMethod(); // This is a parent method
 
 The `super` keyword is used to call the constructor of the parent class and to access its methods. This is necessary when you want to initialize the parent class properties in the child class.
 
-```js
+```js live
 class Animal {
   constructor(name) {
     this.name = name;
@@ -108,7 +108,7 @@ dog.speak();
 
 Child classes can override methods from the parent class. This allows the child class to provide a specific implementation of a method that is already defined in the parent class.
 
-```js
+```js live
 class Animal {
   speak() {
     console.log('Animal makes a noise.');

questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx

@@ -6,7 +6,7 @@ title: Explain the concept of lexical scoping
 
 Lexical scoping means that the scope of a variable is determined by its location within the source code, and nested functions have access to variables declared in their outer scope. For example:
 
-```js
+```js live
 function outerFunction() {
   let outerVariable = 'I am outside!';
 
@@ -36,7 +36,7 @@ When a function is defined, it captures the scope in which it was created. This
 
 Consider the following example:
 
-```js
+```js live
 function outerFunction() {
   let outerVariable = 'I am outside!';
 
@@ -60,7 +60,7 @@ In this example:
 
 Lexical scoping is closely related to closures. A closure is created when a function retains access to its lexical scope, even when the function is executed outside that scope.
 
-```js
+```js live
 function outerFunction() {
   let outerVariable = 'I am outside!';
 

questions/explain-the-concept-of-lexical-scoping/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';