added some coding exercise challenges

Author: xingarr

coding-exercise/array-methods-chaining.js

@@ -0,0 +1,30 @@
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+const result = numbers
+    .filter(num => num % 2 === 0)  // [2, 4, 6, 8, 10]
+    .map(num => num * 2)            // [4, 8, 12, 16, 20]
+    .reduce((sum, num) => sum + num, 0); // 60
+
+console.log(result); // 60
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates method chaining with array methods in JavaScript.
+ * 
+ * 1. filter() creates a new array with elements that pass the test.
+ *    Here, it keeps only even numbers: [2, 4, 6, 8, 10]
+ * 
+ * 2. map() creates a new array by transforming each element.
+ *    Here, it doubles each number: [4, 8, 12, 16, 20]
+ * 
+ * 3. reduce() reduces the array to a single value.
+ *    Here, it sums all numbers: 4 + 8 + 12 + 16 + 20 = 60
+ * 
+ * 4. Each method returns a new array (except reduce), allowing chaining.
+ * 
+ * 5. This functional programming style is concise and readable.
+ * 
+ * Note: Each method creates a new array, so for large datasets, consider
+ * performance implications. A single loop might be more efficient.
+ */

coding-exercise/async-await-error.js

@@ -0,0 +1,41 @@
+async function fetchData() {
+    throw new Error('Network error');
+}
+
+async function getData() {
+    try {
+        const data = await fetchData();
+        console.log(data);
+        return data;
+    } catch (error) {
+        console.log('Caught:', error.message);
+        return null;
+    }
+}
+
+getData().then(result => {
+    console.log('Result:', result);
+});
+
+// Output:
+// Caught: Network error
+// Result: null
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates error handling with async/await in JavaScript.
+ * 
+ * 1. fetchData() is an async function that throws an error.
+ * 
+ * 2. In getData(), we use try/catch to handle errors from await fetchData().
+ * 
+ * 3. When fetchData() throws an error, it's caught by the catch block,
+ *    which logs the error message and returns null.
+ * 
+ * 4. The .then() receives the return value from getData(), which is null
+ *    because the error was caught and handled.
+ * 
+ * 5. Without try/catch, the error would propagate and could be caught
+ *    with .catch() on the promise chain.
+ */

coding-exercise/closure-counter.js

@@ -0,0 +1,32 @@
+function createCounter() {
+    let count = 0;
+    return function() {
+        count++;
+        return count;
+    };
+}
+
+const counter1 = createCounter();
+const counter2 = createCounter();
+
+console.log(counter1()); // 1
+console.log(counter1()); // 2
+console.log(counter2()); // 1
+console.log(counter1()); // 3
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates closure behavior in JavaScript.
+ * 
+ * 1. createCounter() returns a function that has access to the 'count' variable
+ *    from its outer scope, even after createCounter() has finished executing.
+ * 
+ * 2. Each call to createCounter() creates a new closure with its own 'count' variable.
+ *    So counter1 and counter2 maintain separate counts.
+ * 
+ * 3. counter1() increments its own count: 1, 2, 3
+ *    counter2() has its own separate count: 1
+ * 
+ * This is a classic example of how closures can be used to create private variables.
+ */

coding-exercise/destructuring-defaults.js

@@ -0,0 +1,30 @@
+function displayUser({ name = 'Guest', age = 18, country } = {}) {
+    console.log(`Name: ${name}, Age: ${age}, Country: ${country}`);
+}
+
+displayUser({ name: 'John', age: 25, country: 'USA' }); 
+// Name: John, Age: 25, Country: USA
+
+displayUser({ name: 'Alice' }); 
+// Name: Alice, Age: 18, Country: undefined
+
+displayUser(); 
+// Name: Guest, Age: 18, Country: undefined
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates destructuring with default values in JavaScript.
+ * 
+ * 1. The function parameter uses object destructuring to extract properties.
+ * 
+ * 2. Default values (name = 'Guest', age = 18) are provided for some properties.
+ *    If these properties are not passed or are undefined, the defaults are used.
+ * 
+ * 3. The = {} at the end provides a default empty object if no argument is passed,
+ *    preventing a TypeError when trying to destructure undefined.
+ * 
+ * 4. country has no default, so it remains undefined if not provided.
+ * 
+ * This pattern is useful for functions with optional parameters.
+ */

coding-exercise/object-property-shorthand.js

@@ -0,0 +1,37 @@
+const name = 'Alice';
+const age = 30;
+
+// Old way
+const user1 = {
+    name: name,
+    age: age
+};
+
+// ES6 shorthand
+const user2 = {
+    name,
+    age
+};
+
+console.log(user1); // { name: 'Alice', age: 30 }
+console.log(user2); // { name: 'Alice', age: 30 }
+console.log(user1.name === user2.name); // true
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates ES6 object property shorthand syntax.
+ * 
+ * 1. When creating an object, if the property name matches the variable name,
+ *    you can use the shorthand syntax.
+ * 
+ * 2. { name, age } is equivalent to { name: name, age: age }
+ * 
+ * 3. This makes code more concise and readable, especially when dealing with
+ *    many properties.
+ * 
+ * 4. Both user1 and user2 are functionally identical.
+ * 
+ * This is commonly used in modern JavaScript, especially with destructuring
+ * and when returning objects from functions.
+ */

coding-exercise/promise-all-behavior.js

@@ -0,0 +1,45 @@
+const promise1 = Promise.resolve(3);
+const promise2 = new Promise((resolve) => setTimeout(() => resolve('foo'), 100));
+const promise3 = Promise.reject('Error occurred');
+const promise4 = Promise.resolve(42);
+
+Promise.all([promise1, promise2, promise4])
+    .then(values => {
+        console.log(values); // [3, 'foo', 42]
+    })
+    .catch(error => {
+        console.log('Caught:', error);
+    });
+
+Promise.all([promise1, promise2, promise3, promise4])
+    .then(values => {
+        console.log(values); // This won't execute
+    })
+    .catch(error => {
+        console.log('Caught:', error); // Caught: Error occurred
+    });
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates Promise.all() behavior in JavaScript.
+ * 
+ * 1. Promise.all() takes an array of promises and returns a single promise.
+ * 
+ * 2. If ALL promises resolve, Promise.all() resolves with an array of all
+ *    resolved values, in the same order as the input promises.
+ * 
+ * 3. If ANY promise rejects, Promise.all() immediately rejects with the
+ *    reason of the first promise that rejected. Other promises are ignored.
+ * 
+ * 4. In the first example, all three promises resolve, so we get [3, 'foo', 42].
+ * 
+ * 5. In the second example, promise3 rejects, so Promise.all() rejects
+ *    immediately with 'Error occurred', even though promise1 and promise4
+ *    would have resolved.
+ * 
+ * 6. Promise.all() waits for all promises to settle (resolve or reject).
+ * 
+ * Use Promise.allSettled() if you want to wait for all promises regardless
+ * of whether they resolve or reject.
+ */

coding-exercise/prototype-chain.js

@@ -0,0 +1,42 @@
+function Animal(name) {
+    this.name = name;
+}
+
+Animal.prototype.speak = function() {
+    console.log(this.name + ' makes a sound.');
+};
+
+function Dog(name) {
+    Animal.call(this, name);
+}
+
+Dog.prototype = Object.create(Animal.prototype);
+Dog.prototype.constructor = Dog;
+
+Dog.prototype.speak = function() {
+    console.log(this.name + ' barks.');
+};
+
+const dog = new Dog('Rex');
+dog.speak(); // Rex barks.
+console.log(dog instanceof Dog); // true
+console.log(dog instanceof Animal); // true
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates prototypal inheritance in JavaScript.
+ * 
+ * 1. Dog inherits from Animal using Object.create(Animal.prototype).
+ * 
+ * 2. Animal.call(this, name) calls the Animal constructor in the context of Dog,
+ *    allowing Dog to inherit Animal's properties.
+ * 
+ * 3. Dog.prototype.constructor = Dog resets the constructor property after
+ *    overwriting the prototype.
+ * 
+ * 4. Dog overrides the speak method from Animal.
+ * 
+ * 5. dog instanceof checks the prototype chain, so dog is an instance of both
+ *    Dog and Animal.
+ */

coding-exercise/spread-operator-objects.js

@@ -0,0 +1,35 @@
+const obj1 = { a: 1, b: 2 };
+const obj2 = { b: 3, c: 4 };
+const obj3 = { ...obj1, ...obj2 };
+
+console.log(obj3); // { a: 1, b: 3, c: 4 }
+
+const original = { x: 1, y: { z: 2 } };
+const copy = { ...original };
+
+copy.x = 10;
+copy.y.z = 20;
+
+console.log(original.x); // 1
+console.log(original.y.z); // 20
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates the spread operator with objects in JavaScript.
+ * 
+ * 1. The spread operator (...) copies properties from one object to another.
+ * 
+ * 2. When spreading multiple objects with the same property (like 'b'),
+ *    the last one wins. So obj2.b (3) overwrites obj1.b (2).
+ * 
+ * 3. The spread operator creates a SHALLOW copy, not a deep copy.
+ * 
+ * 4. Primitive values (like x) are copied by value, so changing copy.x
+ *    doesn't affect original.x.
+ * 
+ * 5. Nested objects (like y) are copied by reference, so changing copy.y.z
+ *    DOES affect original.y.z.
+ * 
+ * For deep copying, you need JSON.parse(JSON.stringify()) or a library like lodash.
+ */

coding-exercise/temporal-dead-zone.js

@@ -0,0 +1,28 @@
+console.log(varVariable); // undefined
+console.log(letVariable); // ReferenceError: Cannot access 'letVariable' before initialization
+
+var varVariable = 'I am var';
+let letVariable = 'I am let';
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates the Temporal Dead Zone (TDZ) in JavaScript.
+ * 
+ * 1. Variables declared with 'var' are hoisted to the top of their scope
+ *    and initialized with 'undefined'. So accessing varVariable before
+ *    its declaration returns undefined (no error).
+ * 
+ * 2. Variables declared with 'let' and 'const' are also hoisted, but they
+ *    are NOT initialized. They remain in the "temporal dead zone" from the
+ *    start of the block until the declaration is executed.
+ * 
+ * 3. Accessing letVariable before its declaration throws a ReferenceError
+ *    because it's in the TDZ.
+ * 
+ * 4. The TDZ exists to catch programming errors and make code more predictable.
+ * 
+ * 5. The same behavior applies to 'const' declarations.
+ * 
+ * Best practice: Always declare variables at the top of their scope.
+ */

coding-exercise/type-coercion-comparison.js

@@ -0,0 +1,38 @@
+console.log([] == false);  // true
+console.log([] === false); // false
+console.log('' == 0);      // true
+console.log('' === 0);     // false
+console.log(null == undefined);  // true
+console.log(null === undefined); // false
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates type coercion with == vs === in JavaScript.
+ * 
+ * 1. == (loose equality) performs type coercion before comparison.
+ *    === (strict equality) does NOT perform type coercion.
+ * 
+ * 2. [] == false:
+ *    - [] is converted to a primitive: [].toString() = ''
+ *    - false is converted to a number: 0
+ *    - '' is converted to a number: 0
+ *    - 0 == 0 is true
+ * 
+ * 3. [] === false:
+ *    - No coercion, different types (object vs boolean), so false
+ * 
+ * 4. '' == 0:
+ *    - '' is coerced to 0, so 0 == 0 is true
+ * 
+ * 5. '' === 0:
+ *    - Different types (string vs number), so false
+ * 
+ * 6. null == undefined:
+ *    - Special case in JavaScript, they are loosely equal
+ * 
+ * 7. null === undefined:
+ *    - Different types, so false
+ * 
+ * Best practice: Use === to avoid unexpected type coercion bugs.
+ */