Merge branch 'main' into quiz-spread-syntax-correction

Author: yangshun

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

@@ -29,7 +29,7 @@ The following behavior summarizes the result of accessing the variables before t
 
 ## Hoisting
 
-Hoisting is a term used to explain the behavior of variable declarations in JavaScript code. 
+Hoisting is a term used to explain the behavior of variable declarations in JavaScript code.
 
 Variables declared or initialized with the `var` keyword will have their declaration "moved" up to the top of their containing scope during compilation, which we refer to as hoisting.
 
@@ -124,7 +124,7 @@ In ECMAScript specifications `let` and `const` declarations are [explained as be
 
 > The variables are created when their containing Environment Record is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated.
 
-However, this statement is [a litle bit different for the `var` keyword](https://tc39.es/ecma262/#sec-variable-statement):
+However, this statement is [a little different for the `var` keyword](https://tc39.es/ecma262/#sec-variable-statement):
 
 > Var variables are created when their containing Environment Record is instantiated and are initialized to `undefined` when created.
 

questions/explain-hoisting/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 hoisting with regards to functions
 
 Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.
 
-```js
+```js live
 // Function declaration
 hoistedFunction(); // Works fine
 function hoistedFunction() {
@@ -30,7 +30,7 @@ Hoisting is a JavaScript mechanism where variables and function declarations are
 
 Function declarations are fully hoisted. This means you can call a function before its declaration in the code.
 
-```js
+```js live
 hoistedFunction(); // Works fine
 
 function hoistedFunction() {
@@ -42,7 +42,7 @@ function hoistedFunction() {
 
 Function expressions, including arrow functions, are not hoisted in the same way. They are treated as variable assignments and are only hoisted as undefined.
 
-```js
+```js live
 nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function
 
 var nonHoistedFunction = function () {
@@ -54,7 +54,7 @@ var nonHoistedFunction = function () {
 
 Arrow functions behave similarly to function expressions in terms of hoisting.
 
-```js
+```js live
 arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function
 
 var arrowFunction = () => {

questions/explain-the-concept-of-hoisting-with-regards-to-functions/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!';