JavaScript Interview Questions and Answers

In ES5, it will throw a TypeError exception if the obj parameter isn't an object. Whereas in ES2015, the parameter will be coerced to an Object.

      // ES5
      Object.getPrototypeOf("James"); // TypeError: "James" is not an object
      // ES2015
      Object.getPrototypeOf("James"); // String.prototype
      

You can use the Object.setPrototypeOf() method that sets the prototype (i.e., the internal Prototype property) of a specified object to another object or null. For example, if you want to set prototype of a square object to rectangle object would be as follows,

      Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
      Object.setPrototypeOf({}, null);
      

The destructuring assignment is a JavaScript expression that makes it possible to unpack values from arrays or properties from objects into distinct variables.
Let's get the month values from an array using destructuring assignment

      var [one, two, three] = ["JAN", "FEB", "MARCH"];

      console.log(one); // "JAN"
      console.log(two); // "FEB"
      console.log(three); // "MARCH"
      

and you can get user properties of an object using destructuring assignment,

      var { name, age } = { name: "John", age: 32 };

      console.log(name); // John
      console.log(age); // 32
      

A variable can be assigned a default value when the value unpacked from the array or object is undefined during destructuring assignment. It helps to avoid setting default values separately for each assignment. Let's take an example for both arrays and object use cases,

Arrays destructuring:

      var x, y, z;

      [x = 2, y = 4, z = 6] = [10];
      console.log(x); // 10
      console.log(y); // 4
      console.log(z); // 6
      

Objects destructuring:

      var { x = 2, y = 4, z = 6 } = { x: 10 };

      console.log(x); // 10
      console.log(y); // 4
      console.log(z); // 6
      

If you don't use destructuring assignment, swapping two values requires a temporary variable. Whereas using a destructuring feature, two variable values can be swapped in one destructuring expression. Let's swap two number variables in array destructuring assignment,

      var x = 10,
        y = 20;

      [x, y] = [y, x];
      console.log(x); // 20
      console.log(y); // 10
      

No. All objects have prototypes except two exceptions:

• Object.prototype itself — This is the base object in the prototype chain, and its prototype is null.
• Objects created with Object.create(null) — These are deliberately created with no prototype, so they don’t inherit from Object.prototype.

All other standard objects do have a prototype.

The asynchronous thunks are useful to make network requests. Let's see an example of network requests,

      function fetchData(fn) {
        fetch("https://jsonplaceholder.typicode.com/todos/1")
          .then((response) => response.json())
          .then((json) => fn(json));
      }

      const asyncThunk = function () {
        return fetchData(function getData(data) {
          console.log(data);
        });
      };

      asyncThunk();
      

The getData function won't be called immediately but it will be invoked only when the data is available from API endpoint. The setTimeout function is also used to make our code asynchronous. The best real time example is redux state management library which uses the asynchronous thunks to delay the actions to dispatch.

Sometimes you would like to have a destructured variable with a different name than the property name. In that case, you'll use a : newName to specify a name for the variable. This process is called destructuring aliases.

      const obj = { x: 1 };
      // Grabs obj.x as { otherName }
      const { x: otherName } = obj;
      

Below are the list of different ways to deal with Asynchronous code.

1. Callbacks
2. Promises
3. Async/await
4. Third-party libraries such as async.js,bluebird etc

Some of the major difference in a tabular form

| Promises | Observables |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| Emits only a single value at a time | Emits multiple values over a period of time(stream of values ranging from 0 to multiple) |
| Eager in nature; they are going to be called immediately | Lazy in nature; they require subscription to be invoked |
| Promise is always asynchronous even though it resolved immediately | Observable can be either synchronous or asynchronous |
| Doesn't provide any operators | Provides operators such as map, forEach, filter, reduce, retry, and retryWhen etc |
| Cannot be canceled | Canceled by using unsubscribe() method |

An async function is a function declared with the async keyword which enables asynchronous, promise-based behavior to be written in a cleaner style by avoiding promise chains. These functions can contain zero or more await expressions.

Let's take a below async function example,

     async function logger() {
       let data = await fetch("http://someapi.com/users"); // pause until fetch returns
       console.log(data);
     }
     logger();
     

It is basically syntax sugar over ES2015 promises and generators.

While using asynchronous code, JavaScript’s ES6 promises can make your life a lot easier without having callback pyramids and error handling on every second line. But Promises have some pitfalls and the biggest one is swallowing errors by default.

Let's say you expect to print an error to the console for all the below cases,

     Promise.resolve("promised value").then(function () {
       throw new Error("error");
     });

     Promise.reject("error value").catch(function () {
       throw new Error("error");
     });

     new Promise(function (resolve, reject) {
       throw new Error("error");
     });
     

But there are many modern JavaScript environments that won't print any errors. You can fix this problem in different ways,

1. Add catch block at the end of each chain: You can add catch block to the end of each of your promise chains

        Promise.resolve("promised value")
          .then(function () {
            throw new Error("error");
          })
          .catch(function (error) {
            console.error(error.stack);
          });
        

But it is quite difficult to type for each promise chain and verbose too.

1. Add done method: You can replace first solution's then and catch blocks with done method

        Promise.resolve("promised value").done(function () {
          throw new Error("error");
        });
        

Let's say you want to fetch data using HTTP and later perform processing on the resulting data asynchronously. You can write done block as below,

        getDataFromHttp()
          .then(function (result) {
            return processDataAsync(result);
          })
          .done(function (processed) {
            displayData(processed);
          });
        

In future, if the processing library API changed to synchronous then you can remove done block as below,

        getDataFromHttp().then(function (result) {
          return displayData(processDataAsync(result));
        });
        

and then you forgot to add done block to then block leads to silent errors.

1. Extend ES6 Promises by Bluebird:

Bluebird extends the ES6 Promises API to avoid the issue in the second solution. This library has a “default” onRejection handler which will print all errors from rejected Promises to stderr. After installation, you can process unhandled rejections

        Promise.onPossiblyUnhandledRejection(function (error) {
          throw error;
        });
        

and discard a rejection, just handle it with an empty catch

        Promise.reject("error value").catch(function () {});
        

If you don't know if a value is a promise or not, wrapping the value as Promise.resolve(value) which returns a promise

     function isPromise(object) {
       if (Promise && Promise.resolve) {
         return Promise.resolve(object) == object;
       } else {
         throw "Promise not supported in your environment";
       }
     }

     var i = 1;
     var promise = new Promise(function (resolve, reject) {
       resolve();
     });

     console.log(isPromise(i)); // false
     console.log(isPromise(promise)); // true
     

Another way is to check for .then() handler type

     function isPromise(value) {
       return Boolean(value && typeof value.then === "function");
     }
     var i = 1;
     var promise = new Promise(function (resolve, reject) {
       resolve();
     });

     console.log(isPromise(i)); // false
     console.log(isPromise(promise)); // true
     

The easiest and safest way to ignore promise errors is void that error. This approach is ESLint friendly too.

     await promise.catch((e) => void e);
     

Prior to ES2022, if you attempted to use an await outside of an async function resulted in a SyntaxError.

     await Promise.resolve(console.log("Hello await")); // SyntaxError: await is only valid in async function
     

But you can fix this issue with an alternative IIFE (Immediately Invoked Function Expression) to get access to the feature.

     (async function () {
       await Promise.resolve(console.log("Hello await")); // Hello await
     })();
     

In ES2022, you can write top-level await without writing any hacks.

     await Promise.resolve(console.log("Hello await")); //Hello await
     

The this keyword in JavaScript refers to the object that is executing the current function. Its value is determined by how a function is called, not where it is defined. this is essential for writing object-oriented and event-driven code, as it allows methods to interact with the data of the object they belong to.

Example 1: this in a Global Context

  console.log(this);
  

• In a global context, this refers to the global object (e.g., window in a browser).

Example 2: this in a Function

  function displayThis() {
    console.log(this);
  }

  displayThis();
  

• In a regular function, this refers to the global object(window in browser and global in nodejs) for non-strict mode. In strict mode, it's value is undefined.

Example 3: this in a Method

  const person = {
    name: "John",
    greet: function () {
      console.log("Hello, " + this.name);
    },
  };

  person.greet();
  

• In a method, this refers to the object that owns the method (person in the case).

Example 4: this in an Event Handler

   document.getElementById("myButton").addEventListener("click", function () {
            console.log(this);
   });
  

• In an event handler, this refers to the element that triggered the event (the button in this case).

Example 5: this with Arrow Functions

        const obj = {
          age: 42,
          regular: function() { console.log(this.age); },
          arrow: () => { console.log(this.age); }
        };
        obj.regular(); // 42 (this refers to obj)
        obj.arrow();   // undefined (this refers to the outer scope, not obj)
  

• Arrow functions do not have their own this binding; they inherit it from their surrounding (lexical) context.

Example 6: this in Constructor Functions / Classes

    function Person(name) {
      this.name = name;
    }
    
    const p1 = new Person('Sudheer');
    console.log(p1.name); // Sudheer
  

• When used with new, this refers to the newly created object.

Closures are a powerful feature in programming languages like JavaScript. They allow functions to retain access to variables from their containing (enclosing) scope even after the outer function has finished executing. This means that a function defined within another function can access variables from the outer function, even if the outer function has already returned.
Here are some common use cases of closures:

• Data Privacy: Closures can be used to create private variables and methods. By defining variables within a function's scope and returning inner functions that have access to those variables, you can create a form of encapsulation, limiting access to certain data or functionality.

• Function Factories: Closures are often used to create functions with pre-set parameters. This is useful when you need to create multiple functions with similar behavior but different configurations.

• Callback Functions: Closures are frequently used in asynchronous programming, such as handling event listeners or AJAX requests. The inner function captures variables from the outer scope and can access them when the callback is invoked.

• Memoization: Closures can be used for memoization, a technique to optimize performance by caching the results of expensive function calls. The inner function can remember the results of previous calls and return the cached result if the same input is provided again.

• iterators and Generators: Closures can be used to create iterators and generators, which are essential for working with collections of data in modern JavaScript.

Promise.any() is a Promise combinator method introduced in ES2021 that takes an iterable of promises and returns a single promise that fulfills as soon as any of the input promises fulfills. It resolves with the value of the first promise that successfully resolves.

Key Characteristics:

1. First Success Wins: Returns the value of the first fulfilled promise
2. Ignores Rejections: Continues waiting even if some promises reject
3. AggregateError: Only rejects if all promises reject (with an AggregateError containing all rejection reasons)

When to Use Promise.any():

• Fastest Resource: When fetching from multiple mirrors/CDNs and you want the first successful response
• Redundant Services: When calling multiple redundant APIs and only need one to succeed
• Fallback Mechanisms: When you have primary and backup data sources

Example:

     // Fetching from multiple CDNs - use whichever responds first
     const cdn1 = fetch('https://cdn1.example.com/data.json');
     const cdn2 = fetch('https://cdn2.example.com/data.json');
     const cdn3 = fetch('https://cdn3.example.com/data.json');

     Promise.any([cdn1, cdn2, cdn3])
       .then(response => response.json())
       .then(data => console.log('First successful response:', data))
       .catch(error => {
         // Only if ALL promises reject
         console.error('All CDNs failed:', error.errors);
       });

     // Comparison with other Promise methods:
     const promises = [
       Promise.reject('Error 1'),
       Promise.resolve('Success!'),
       Promise.reject('Error 2')
     ];

     // Promise.any() - Returns first fulfilled promise
     Promise.any(promises)
       .then(value => console.log(value)); // Output: "Success!"

     // Promise.race() - Returns first settled promise (fulfilled or rejected)
     Promise.race(promises)
       .catch(error => console.log(error)); // Output: "Error 1"

     // Promise.all() - Waits for all or fails on first rejection
     Promise.all(promises)
       .catch(error => console.log(error)); // Output: "Error 1"

     // Promise.allSettled() - Waits for all, never rejects
     Promise.allSettled(promises)
       .then(results => console.log(results));
     // Output: [
     //   { status: 'rejected', reason: 'Error 1' },
     //   { status: 'fulfilled', value: 'Success!' },
     //   { status: 'rejected', reason: 'Error 2' }
     // ]
     

The at() method (introduced in ES2022) allows you to access array elements using both positive and negative indices. It provides a simpler and more intuitive way to access elements from the end of an array.

Syntax:

     array.at(index)
     

Key Features:

1. Negative Indexing: Negative indices count from the end of the array
2. Cleaner Syntax: More readable than traditional methods for accessing end elements
3. Works on Strings: Also available on String.prototype
4. Returns undefined: Returns undefined for out-of-bounds indices (like bracket notation)

Examples:

     const fruits = ['apple', 'banana', 'orange', 'mango', 'grape'];

     // Positive indices (same as bracket notation)
     console.log(fruits.at(0));  // 'apple'
     console.log(fruits.at(2));  // 'orange'
     console.log(fruits[2]);     // 'orange' (equivalent)

     // Negative indices (the game changer!)
     console.log(fruits.at(-1)); // 'grape' (last element)
     console.log(fruits.at(-2)); // 'mango' (second to last)
     console.log(fruits.at(-5)); // 'apple' (first element)

     // Out of bounds
     console.log(fruits.at(10));  // undefined
     console.log(fruits.at(-10)); // undefined

     // Comparison with traditional approaches:
     const arr = [10, 20, 30, 40, 50];

     // Getting last element
     console.log(arr.at(-1));           // 50 ✅ Clean and simple
     console.log(arr[arr.length - 1]);  // 50 ❌ Verbose
     console.log(arr.slice(-1)[0]);     // 50 ❌ Creates new array

     // Getting second to last
     console.log(arr.at(-2));           // 40 ✅ Clean
     console.log(arr[arr.length - 2]);  // 40 ❌ Verbose

     // Dynamic index from the end
     const n = 3;
     console.log(arr.at(-n));           // 30 ✅ Clean
     console.log(arr[arr.length - n]);  // 30 ❌ Verbose
     

Works with Strings:

     const text = 'Hello, World!';

     console.log(text.at(0));   // 'H'
     console.log(text.at(-1));  // '!'
     console.log(text.at(-6));  // 'W'
     

Real-World Use Cases:

     // 1. Processing the last few elements
     const scores = [85, 92, 78, 95, 88];
     const lastScore = scores.at(-1);
     const secondLastScore = scores.at(-2);
     console.log(`Last two scores: ${secondLastScore}, ${lastScore}`);

     // 2. Circular/wraparound logic
     function getElement(array, index) {
       // Positive: use directly
       // Negative: count from end
       return array.at(index);
     }

     // 3. Working with dynamic data
     const messages = ['msg1', 'msg2', 'msg3', 'msg4'];
     const latest = messages.at(-1); // Always gets the latest

     // 4. Palindrome checking
     function isPalindrome(str) {
       const len = str.length;
       for (let i = 0; i < len / 2; i++) {
         if (str.at(i) !== str.at(-i - 1)) {
           return false;
         }
       }
       return true;
     }
     console.log(isPalindrome('racecar')); // true

     // 5. Safe access with method chaining
     const data = [1, 2, 3];
     console.log(data.filter(x => x > 1).at(-1)); // 3 (last of filtered results)
     

Benefits over Traditional Methods:

     const items = ['a', 'b', 'c', 'd', 'e'];

     // Traditional (verbose and error-prone)
     const last = items[items.length - 1];
     const thirdFromEnd = items[items.length - 3];

     // Modern (clean and intuitive)
     const last2 = items.at(-1);
     const thirdFromEnd2 = items.at(-3);

     // Especially useful in expressions
     const result = someFunction() || items.at(-1); // Clean
     const result2 = someFunction() || items[items.length - 1]; // Cluttered
     

Top-level await is a feature (introduced in ES2022) that allows you to use the await keyword at the top level of ES modules, outside of async functions. This enables modules to act as asynchronous functions themselves.

Key Characteristics:

1. Module-Only: Only works in ES modules (not in scripts or CommonJS)
2. Blocks Execution: The module graph execution pauses until the promise resolves
3. No Async Wrapper: No need to wrap await in an async function
4. Import Dependency: Modules that import a module using top-level await will wait for it

Before Top-Level Await:

     // ❌ Old way: Wrapper function required
     // config.js
     let config;

     async function loadConfig() {
       const response = await fetch('/api/config');
       config = await response.json();
     }

     loadConfig(); // Returns a promise, but we can't await here

     export { config }; // config might be undefined when imported!

     // ❌ Or using IIFE (Immediately Invoked Function Expression)
     (async () => {
       const response = await fetch('/api/config');
       const config = await response.json();
       // Now what? How to export?
     })();
     

With Top-Level Await:

     // ✅ New way: Direct top-level await
     // config.js
     const response = await fetch('/api/config');
     const config = await response.json();

     export { config }; // config is guaranteed to be loaded
     

Real-World Use Cases:

     // 1. Loading configuration before app starts
     // config.js
     const response = await fetch('/api/config');
     export const config = await response.json();

     // 2. Conditional module loading
     // feature.js
     const isDevelopment = process.env.NODE_ENV === 'development';
     const debugModule = isDevelopment 
       ? await import('./debug-tools.js')
       : null;

     export const debug = debugModule?.debug || (() => {});

     // 3. Database connection
     // db.js
     import { MongoClient } from 'mongodb';

     const client = new MongoClient(process.env.DB_URL);
     await client.connect();
     export const db = client.db('myapp');
     console.log('Database connected!');

     // 4. Establishing dependencies
     // auth.js
     const permissions = await fetch('/api/permissions').then(r => r.json());
     export const hasPermission = (user, action) => {
       return permissions[user]?.includes(action) || false;
     };

     // 5. Feature detection
     // capabilities.js
     let wasmSupported = false;
     try {
       await WebAssembly.instantiate(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0]));
       wasmSupported = true;
     } catch {}

     export { wasmSupported };
     

Module Import Blocking:

     // slow-module.js
     console.log('Starting slow module');
     await new Promise(resolve => setTimeout(resolve, 3000));
     console.log('Slow module ready');
     export const data = 'Loaded!';

     // main.js
     console.log('Before import');
     import { data } from './slow-module.js'; // Waits for top-level await
     console.log('After import:', data);

     // Console output:
     // "Before import"
     // "Starting slow module"
     // ... 3 second pause ...
     // "Slow module ready"
     // "After import: Loaded!"
     

Execution Order with Multiple Modules:

     // a.js
     console.log('A: start');
     await new Promise(r => setTimeout(r, 100));
     console.log('A: end');
     export const a = 'A';

     // b.js
     console.log('B: start');
     import { a } from './a.js';
     console.log('B: got', a);
     export const b = 'B';

     // main.js
     console.log('Main: start');
     import { b } from './b.js';
     import { a } from './a.js';
     console.log('Main:', a, b);

     // Output:
     // "A: start"
     // (100ms pause)
     // "A: end"
     // "B: start"
     // "B: got A"
     // "Main: start"
     // "Main: A B"
     

Error Handling:

     // data-loader.js
     let data;
     try {
       const response = await fetch('/api/data');
       if (!response.ok) throw new Error('Failed to fetch');
       data = await response.json();
     } catch (error) {
       console.error('Failed to load data:', error);
       data = { default: true }; // Fallback data
     }

     export { data };
     

Important Considerations:

1. Performance: Top-level await blocks the entire module graph, so use sparingly
2. Error Impact: If a top-level await rejects and isn't caught, it can prevent module loading
3. Not for Scripts: Only works in ES modules (files with type="module" or .mjs extension)
4. Circular Dependencies: Be careful with circular imports when using top-level await

     // ❌ Don't do this - blocks everything
     await new Promise(r => setTimeout(r, 10000)); // 10 second delay!

     // ✅ Better approach for initialization
     const dataPromise = fetch('/api/data').then(r => r.json());
     export const getData = () => dataPromise; // Let consumers decide when to await
     

Async iterators allow you to iterate over asynchronous data sources using for await...of loops, where each iteration can wait for a Promise to resolve.

Regular iterator (synchronous):

     const syncIterable = {
       [Symbol.iterator]() {
         let i = 0;
         return {
           next() {
             if (i < 3) {
               return { value: i++, done: false };
             }
             return { done: true };
           }
         };
       }
     };

     for (const val of syncIterable) {
       console.log(val); // 0, 1, 2
     }
     

Async iterator:

     const asyncIterable = {
       [Symbol.asyncIterator]() {
         let i = 0;
         return {
           async next() {
             if (i < 3) {
               await new Promise(resolve => setTimeout(resolve, 1000));
               return { value: i++, done: false };
             }
             return { done: true };
           }
         };
       }
     };

     (async () => {
       for await (const val of asyncIterable) {
         console.log(val); // 0, 1, 2 (one per second)
       }
     })();
     

Async generator function:

     async function* fetchPages(urls) {
       for (const url of urls) {
         const response = await fetch(url);
         const data = await response.json();
         yield data;
       }
     }

     (async () => {
       const urls = ['api/page1', 'api/page2', 'api/page3'];
       for await (const page of fetchPages(urls)) {
         console.log(page);
       }
     })();
     

Practical example - reading file streams:

     async function* readLines(filePath) {
       const fileStream = fs.createReadStream(filePath);
       const rl = readline.createInterface({
         input: fileStream,
         crlfDelay: Infinity
       });

       for await (const line of rl) {
         yield line;
       }
     }

     (async () => {
       for await (const line of readLines('large-file.txt')) {
         console.log(line);
       }
     })();
     

Key differences:

| Regular Iterator | Async Iterator |
|-----------------|----------------|
| Returns { value, done } | Returns Promise<{ value, done }> |
| Symbol.iterator | Symbol.asyncIterator |
| Used with for...of | Used with for await...of |
| Synchronous | Asynchronous |
| next() method | async next() method |

Promise.allSettled() and Promise.all() both handle multiple promises, but they behave differently when promises are rejected.

Promise.all() - fails fast:

     const promises = [
       Promise.resolve(1),
       Promise.reject('Error'),
       Promise.resolve(3)
     ];

     Promise.all(promises)
       .then(results => console.log(results))
       .catch(error => console.log(error)); // 'Error'
     // Stops at first rejection
     

Promise.allSettled() - waits for all:

     Promise.allSettled(promises)
       .then(results => console.log(results));
     /*
     [
       { status: 'fulfilled', value: 1 },
       { status: 'rejected', reason: 'Error' },
       { status: 'fulfilled', value: 3 }
     ]
     */
     

Practical example - multiple API calls:

     async function fetchUserData(userId) {
       const endpoints = [
         fetch(`/api/users/${userId}`),
         fetch(`/api/users/${userId}/posts`),
         fetch(`/api/users/${userId}/comments`)
       ];

       const results = await Promise.allSettled(endpoints);

       return {
         profile: results[0].status === 'fulfilled' 
           ? await results[0].value.json() 
           : null,
         posts: results[1].status === 'fulfilled' 
           ? await results[1].value.json() 
           : [],
         comments: results[2].status === 'fulfilled' 
           ? await results[2].value.json() 
           : []
       };
     }
     

Filtering settled results:

     const results = await Promise.allSettled(promises);

     const successful = results
       .filter(r => r.status === 'fulfilled')
       .map(r => r.value);

     const failed = results
       .filter(r => r.status === 'rejected')
       .map(r => r.reason);

     console.log(`${successful.length} succeeded, ${failed.length} failed`);
     

When to use each:

| Use Promise.all() when: | Use Promise.allSettled() when: |
|------------------------|-------------------------------|
| All promises must succeed | You need all results regardless of status |
| Failure should stop execution | You want to handle each result independently |
| You want to fail fast | You need a complete report |

Synchronous and asynchronous generators differ in how they produce values and handle asynchronous operations.

Synchronous generator:

     function* syncGenerator() {
       yield 1;
       yield 2;
       yield 3;
     }

     const gen = syncGenerator();
     console.log(gen.next()); // { value: 1, done: false }
     console.log(gen.next()); // { value: 2, done: false }
     

Asynchronous generator:

     async function* asyncGenerator() {
       yield await Promise.resolve(1);
       yield await Promise.resolve(2);
       yield await Promise.resolve(3);
     }

     (async () => {
       for await (const value of asyncGenerator()) {
         console.log(value); // 1, 2, 3
       }
     })();
     

Comparison:

| Synchronous Generator | Asynchronous Generator |
|----------------------|------------------------|
| function* | async function* |
| Returns iterator | Returns async iterator |
| .next() returns { value, done } | .next() returns Promise<{ value, done }> |
| Used with for...of | Used with for await...of |
| Cannot await inside | Can await inside |

Practical example - data streaming:

     // Sync generator - in-memory data
     function* readFileSync(lines) {
       for (const line of lines) {
         yield line;
       }
     }

     // Async generator - streaming data
     async function* readFileAsync(filePath) {
       const stream = createReadStream(filePath);
       const reader = stream.getReader();

       while (true) {
         const { done, value } = await reader.read();
         if (done) break;
         yield value;
       }
     }
     

Async generator with delays:

     async function* ticker(interval, max) {
       let count = 0;
       while (count < max) {
         await new Promise(resolve => setTimeout(resolve, interval));
         yield count++;
       }
     }

     (async () => {
       for await (const tick of ticker(1000, 5)) {
         console.log(tick); // 0, 1, 2, 3, 4 (one per second)
       }
     })();
     

Combining generators:

     async function* fetchPages(urls) {
       for (const url of urls) {
         const response = await fetch(url);
         yield await response.json();
       }
     }

     async function* processPages(urls) {
       for await (const page of fetchPages(urls)) {
         yield processPage(page);
       }
     }
     

Lazy loading defers module loading until they're actually needed, reducing initial bundle size and improving load time.

Dynamic import (ES modules):

     // Traditional import - loaded immediately
     import { heavyFunction } from './heavy-module.js';

     // Dynamic import - loaded on demand
     async function loadModule() {
       const module = await import('./heavy-module.js');
       module.heavyFunction();
     }

     // Or with destructuring
     const { heavyFunction } = await import('./heavy-module.js');
     

Route-based lazy loading (React):

     import { lazy, Suspense } from 'react';

     const Dashboard = lazy(() => import('./Dashboard'));
     const Profile = lazy(() => import('./Profile'));

     function App() {
       return (
         <Router>
           <Suspense fallback={<div>Loading...</div>}>
             <Routes>
               <Route path="/dashboard" element={<Dashboard />} />
               <Route path="/profile" element={<Profile />} />
             </Routes>
           </Suspense>
         </Router>
       );
     }
     

Feature-based lazy loading:

     class FeatureLoader {
       constructor() {
         this.features = new Map();
       }

       async loadFeature(name) {
         if (this.features.has(name)) {
           return this.features.get(name);
         }

         const module = await import(`./features/${name}.js`);
         this.features.set(name, module);
         return module;
       }
     }

     const loader = new FeatureLoader();

     // Load feature only when needed
     button.addEventListener('click', async () => {
       const feature = await loader.loadFeature('advanced-charts');
       feature.render(data);
     });
     

Intersection Observer lazy loading:

     const observer = new IntersectionObserver((entries) => {
       entries.forEach(async (entry) => {
         if (entry.isIntersecting) {
           const moduleName = entry.target.dataset.module;
           const module = await import(`./modules/${moduleName}.js`);
           module.init(entry.target);
           observer.unobserve(entry.target);
         }
       });
     });

     // Observe elements
     document.querySelectorAll('[data-module]').forEach(el => {
       observer.observe(el);
     });
     

Conditional lazy loading:

     async function loadEditor() {
       if (window.innerWidth > 768) {
         // Load full editor for desktop
         const { FullEditor } = await import('./FullEditor.js');
         return new FullEditor();
       } else {
         // Load mobile editor
         const { MobileEditor } = await import('./MobileEditor.js');
         return new MobileEditor();
       }
     }
     

Prefetching for better UX:

     // Prefetch on hover
     link.addEventListener('mouseenter', () => {
       import(/* webpackPrefetch: true */ './heavy-module.js');
     });

     // Preload critical modules after initial load
     window.addEventListener('load', () => {
       setTimeout(() => {
         import(/* webpackPreload: true */ './important-module.js');
       }, 1000);
     });
     

Module caching:

     class ModuleCache {
       constructor() {
         this.cache = new Map();
         this.pending = new Map();
       }

       async load(path) {
         // Return cached module
         if (this.cache.has(path)) {
           return this.cache.get(path);
         }

         // Return pending promise
         if (this.pending.has(path)) {
           return this.pending.get(path);
         }

         // Load module
         const promise = import(path).then(module => {
           this.cache.set(path, module);
           this.pending.delete(path);
           return module;
         });

         this.pending.set(path, promise);
         return promise;
       }
     }

     const moduleCache = new ModuleCache();
     const module = await moduleCache.load('./module.js');
     

Webpack code splitting:

     // Magic comments for webpack
     const module = await import(
       /* webpackChunkName: "my-chunk" */
       /* webpackMode: "lazy" */
       './module.js'
     );
     

In JavaScript, there are several methods to convert a string representation of a number into an actual numeric type, each with distinct edge case behaviors:

### 1. Number(str) Function (Recommended for Exact Numbers)
Parses the entire string as a number. Returns NaN if the string contains any non-numeric characters (except leading/trailing whitespace):

Number("42");     // 42
Number("42.5");   // 42.5
Number("42px");   // NaN (strict parsing)
Number("");       // 0

### 2. Unary Plus Operator (+str)
The fastest syntax, behaves identically to Number(str):

+"123.45"; // 123.45
+"abc";    // NaN

### 3. parseInt(str, radix)
Parses characters from left to right until encountering an invalid character. Always provide radix 10 to prevent legacy octal misinterpretations:

parseInt("42px", 10);    // 42
parseInt("010", 10);     // 10
parseInt("abc", 10);     // NaN

### 4. parseFloat(str)
Parses floating-point decimals from left to right:

parseFloat("3.14159rad"); // 3.14159

### Comparison Summary:
Use Number() or + when validating clean numbers where trailing letters indicate an invalid input; use parseInt() or parseFloat() when parsing CSS values like "16px" or "2.5rem".

Arrow functions are a shorthand syntax for writing function expressions in JavaScript. They use the => syntax to separate the function parameters from the function body and have a concise syntax that makes them ideal for writing short, one-liner functions.

First-class functions means when functions in that language are treated like any other variable. This means that functions can be assigned to variables, passed as arguments to other functions, and returned from functions.

Promises in JavaScript are a way of handling async operations. They help us write async code that looks and behaves like sync code, making it easier to read and maintain. Promises have three states: pending, fulfilled, and rejected.

In JavaScript, errors can be handled using try-catch blocks. The code that might generate an error is enclosed in a try block, and if an error occurs, the catch block is executed. The catch block can then handle the error, such as by logging it to the console or displaying an error message to the user.

To prevent the default behavior of an event in the DOM using JavaScript, you can use the preventDefault() method. This method is called on the event object that is passed to the event handler function

There are four ways to clone an object in javascript. They are:

1. Use the spread operator.
2. Call the Object.assign() function.
3. Use JSON parsing.
4. Use the structuredClone() function.

const data = { name: "Alice", age: 26 }
// 1
const copy1 = { ...data }
// 2
const copy2 = Object.assign({}, data)
// 3
const copy3 = JSON.parse(JSON.stringify(data))
// 4
const copy4 = structuredClone(data)

Method overriding is a concept in JavaScript where a subclass can provide its own implementation of a method that is already defined in the parent class. To override a method in a subclass, you simply define a method with the same name as the method in the parent class

Encapsulation is a concept in object-oriented programming that refers to bundling data and methods within a single unit, such as a class, and hiding the internal details of the class from the outside world. This makes the code more secure and maintainable.

In JavaScript, instance variables are properties of an object that are specific to an instance of a class. When we create a new instance of a class using the new keyword, each instance has its own set of instance variables that are separate from other instances.

In JavaScript, you can convert an object to a JSON string using the JSON.stringify() method, and you can convert a JSON string back to an object using the JSON.parse() method.

Polymorphism in JavaScript classes means that different objects can share the same methods, even if they belong to different classes. This allows us to reuse code across multiple classes and write more flexible, maintainable code.

Prototypal inheritance allows objects to inherit properties and methods from their parent objects. When an object is created with a constructor function, its prototype is automatically set to the prototype object associated with that constructor function. Any properties or methods defined in the prototype object are shared by all objects created with that constructor function. When an object tries to access a property or method, JavaScript first looks for it in the object itself. If it's not found, it looks up the prototype chain until it finds the property or method.

| Prototype | Constructor Function |
| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| An object that is shared by all instances created by the constructor function | A function that is used to create new objects |
| Used to define properties and methods that are shared by all instances | Used to define properties and methods that are unique to each instance |
| Accessed using the prototype property of the constructor function | Accessed using the new keyword followed by the constructor function |
| Modifying the prototype affects all instances created by the constructor function | Modifying the constructor function does not affect existing instances |

We can add properties and methods to an object's prototype by using the constructor function's prototype property. To add a property, simply assign a value to a property on the prototype object. To add a method, define a function and assign it to a property on the prototype object.

MyConstructor.prototype.myProperty = "some value";

We can check if an object inherits from a specific prototype by using the isPrototypeOf() method. This method can be called on a prototype object to check if it appears anywhere in the prototype chain of another object. If the prototype object does appear in the prototype chain of the other object, isPrototypeOf() will return true. Otherwise, it will return false.

// Check if person inherits from the Object.prototype
console.log(Object.prototype.isPrototypeOf(person)); // Outputs true if it inherits or else false

We can override a method in an object's prototype by redefining the method on the prototype. To do this, you simply assign a new function to the existing property on the prototype. When you do this, any objects that were created using the constructor function whose prototype you are modifying will now have the new version of the method available to them.

The question mark (?) is a metacharacter used in regular expressions to indicate that the preceding character or group of characters is optional. It means that the preceding character or group of characters may appear zero or one time. For example, the regular expression "colou?r" will match both "color" and "colour".

In a character class, you can specify a range of characters by using a hyphen (-) between two characters. For example, the regular expression "[a-z]" matches any lowercase letter from "a" to "z". Similarly, the regular expression "[0-9]" matches any digit character from "0" to "9". Note that the range is inclusive, so the characters at both ends are included in the match.

The pipe (|) operator is used in regular expressions to match either one pattern or another. For example, the regular expression "cat|dog" will match either "cat" or "dog". You can also use parentheses to group patterns together when using the pipe operator. For example, the regular expression "(red|green|blue) car" will match "red car", "green car", or "blue car".

Regular expressions (RegEx) are indispensable across software development for parsing, validating, and transforming textual data:

### 1. Form Input Validation
Enforcing structural correctness on user inputs before submitting to servers:

• Email Validation: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
• Phone Numbers: /^\+?[1-9]\d{1,14}$/ (E.164 standard)
• Strong Passwords: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/

### 2. Text Parsing and Tokenization
Extracting structured parameters from unstructured text (such as parsing URL query strings, Markdown links \[(.*?)\]\((.*?)\), or HTTP log headers).

### 3. Search and Intelligent Replacement
Transforming formatted strings:

• Stripping HTML tags: str.replace(/<[^>]*>?/gm, '')
• Formatting currency or masking sensitive credit cards: str.replace(/\d(?=\d{4})/g, "*")

### 4. Code Refactoring & Linter Rules
Static analysis tools (ESLint, Babel) use regex patterns to detect prohibited patterns, deprecated syntax, or formatting irregularities.

To match a specific number of characters in a regular expression, you can use quantifiers such as {n} to match exactly n occurrences of a pattern, or {n,m} to match between n and m occurrences.

To match a specific character that has a special meaning in a regular expression, you can use an escape character () before the special character.

Lookarounds in regular expressions allow you to look ahead or behind the current position in the string without including the matched text in the result. Positive lookaheads (?=) and negative lookaheads (?!), as well as positive lookbehinds (?<=) and negative lookbehinds (?<!), are the four types of lookarounds that can be used.

Some of the properties of the window.location object are:

href : returns the entire URL of the current page <br/>
protocol : returns the protocol of the URL (http:, https:, etc.) <br/>
host : returns the hostname and port number of the URL <br/>
hostname : returns the hostname of the URL <br/>
port : returns the port number of the URL <br/>
pathname : returns the path and filename of the URL <br/>
search : returns the query string of the URL <br/>
hash : returns the anchor part of the URL <br/>

We can redirect to another page using the assign() method of the window.location object.

     window.location.assign("https://www.google.com");

In web browsers, you can reload the current URL using the window.location.reload() method:

// Reloads the current page using the browser cache if valid
window.location.reload();

### Advanced Options and Alternatives:

1. Soft Navigation vs Force Reload:

In older browser specifications, reload(true) forced a hard reload bypassing the HTTP cache. In modern W3C specifications, reload() takes no parameters; hard reloads must be initiated by the user (Ctrl+F5) or via cache headers (Cache-Control: no-cache).

1. Navigating to Current URL:

Assigning href directly re-triggers navigation:

   window.location.href = window.location.href;
   

1. SPA Caution:

In Single Page Applications (Next.js, React Router, Vue Router), calling window.location.reload() causes a full browser document rebuild and loses all in-memory state. Prefer router re-validation (e.g. router.refresh() in Next.js) instead of full page reloads.

You can get the value of a query parameter from the URL using the searchParams property of the window.location object. For example, to get the value of a query parameter named id.

const id = new URLSearchParams(window.location.search).get("id");

You can format a date in JavaScript using the toLocaleDateString() method of the Date object, which returns a string representation of the date in the specified locale.

let date = new Date();
let formattedDate = date.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric' });
console.log(formattedDate); // Output: "05/14/2023"

You can compare two dates in JavaScript using the <, >, <=, >=, ==, and != operators, which compare the numeric values of the Date objects (i.e., their timestamps).

let date1 = new Date('2023-05-14');
let date2 = new Date('2023-05-15');

if (date1 < date2) {
  console.log('date1 is earlier than date2');
} else {
  console.log('date1 and date2 are equal');
}

You can get the current timestamp in JavaScript using the getTime() method of the Date object, which returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.

You can add or subtract days to a date in JavaScript using the setDate() method of the Date object, which allows you to set the day of the month for a given date.

let date = new Date();
date.setDate(date.getDate() + 3);
console.log(date); // Output: the date 3 days from now

In JavaScript, an iterator is an object that provides a way to access elements of a collection or a custom data structure in a sequential manner. It allows you to loop over the elements one at a time, retrieving them on demand.

The most important method is next(), which is responsible for returning the next element in the sequence. When you call next() on an iterator, it returns an object with two properties: value, representing the current element, and done, indicating whether there are more elements or if the iteration is complete.

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

The DOM event DOMContentLoaded will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.

Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as String, Math, RegExp, Object, Function, etc on the other hand, the host objects are provided by the runtime environment (browser or Node), such as window, XMLHTTPRequest, etc.

Anonymous functions are functions that are not bound to a name. They are often used as inline functions, or as arguments to other functions. One typical use case for anonymous functions is as callback functions.

ECMAScript (ES) is the official open standard and specification (managed by Ecma International and the TC39 committee), while JavaScript (JS) is the commercial programming language and runtime implementation that conforms to that specification.

### Analogy:

• ECMAScript is the blueprint or architectural rulebook.
• JavaScript is the concrete house built according to that blueprint, supplemented with browser-specific APIs (such as DOM manipulation, window, fetch, and WebSockets) or Node.js-specific APIs (fs, http, process).

### Historical Timeline:

• 1995: Brendan Eich created JavaScript at Netscape.
• 1997: Netscape submitted JavaScript to Ecma International for standardization, creating ECMAScript Edition 1 (ES1).
• 2015 (ES6 / ES2015): Major modernization introducing let/const, Arrow Functions, Classes, Promises, and Modules.
• Annual Releases: ECMAScript now releases yearly incremental revisions (ES2016 through ES2024+).

We can delete a variable and remove it from memory in the following ways:

1. Using the delete keyword:

   let x = 10;
   console.log(x); // Output: 10

   delete x;
   console.log(x); // Output: 10 (variable still exists but with no value)
   

1. Setting the variable to undefined or null:

   let x = 10;
   console.log(x); // Output: 10

   x = undefined;
   console.log(x); // Output: undefined
   

1. Using a block scope with let or const:

   //Variables declared with let or const within a block scope will automatically be removed
   // from memory once the block is exited.
   {
   let x = 10;
   console.log(x); // Output: 10
   }

   console.log(x); // Output: ReferenceError: x is not defined
   

There are three types of errors:

1. Load time errors: Errors that come up when loading a web page, like improper syntax errors, are known as Load time errors and generate the errors dynamically.
2. Runtime errors: Errors that come due to misuse of the command inside the HTML language.
3. Logical errors: These are the errors that occur due to the bad logic performed on a function with a different operation.

If you have only a few lines of code that is specific to a particular webpage. In that case, it is better to keep your JavaScript code internal within your HTML document. On the other hand, if your JavaScript code is used in many web pages, you should consider keeping your code in a separate file.If your code is too long, it is better to keep it in a separate file. This helps in easy debugging.

To debug JavaScript code, you can use console.log() statements to print values and messages to the console, browser developer tools for breakpoints, stepping through code, and variable inspection, the debugger statement to trigger breakpoints, exception handling to catch and log errors, linters and code analyzers to detect potential issues, and remote debugging for debugging code running in a different environment.

To optimize JavaScript code, you can combine and minify files, minimize global variables, optimize loops and conditionals, use efficient data structures and algorithms, cache data, leverage asynchronous programming, and optimize DOM manipulation.

Since 2 and 5 are integers, they will be added numerically. And since 3 is a string, its concatenation will be done. So the result would be 73. The ” ” makes all the difference here and represents 3 as a string and not a number.

The delete operator removes a property from a JavaScript object. If the property exists, it deletes the key and returns true; if the property does not exist, it does nothing and still returns true.

### Example:

const user = { name: 'Alice', role: 'admin', age: 28 };
delete user.age; // Returns true
console.log(user); // { name: 'Alice', role: 'admin' }

### Important Caveats & Best Practices:

1. Does Not Affect Variables: delete cannot delete variables declared with var, let, or const, or standalone functions:

   let x = 10;
   delete x; // Returns false (in non-strict mode) or throws SyntaxError in strict mode
   

1. Prototype Chain: Deleting a property only removes it from the *own* object instance; if the prototype contains the property, it will still be visible via inheritance.
2. V8 Optimization Penalty: Modifying the shape of an object using delete de-optimizes V8 hidden classes (shapes). For high-performance code, prefer setting properties to undefined or creating a new shallow copy omitting the key:

   const { age, ...cleanUser } = user; // Idiomatic immutable deletion
   

Control flow functions provide mechanisms to coordinate and handle asynchronous operations, ensuring that certain actions occur before or after others. They help to maintain the desired order and synchronization in asynchronous code.

No, you cannot directly access the DOM in Node.js. Node.js is a runtime environment for running JavaScript outside of web browsers, and it does not have a built-in DOM implementation.

In the client-side/browser environment, if variables and functions are declared in the global scope (window), they can be accessed and shared by all scripts on the page. This is often referred to as the global scope or global namespace.

The instanceof operator checks whether the prototype property of a constructor appears anywhere in the prototype chain of an object. In other words, the instanceof operator checks if the object is an instance of a class or not at run time.

class Person {
  constructor(name) {
    this.name = name;
  }
}

const john = new Person("John");

console.log(john instanceof Person); // Output: true
console.log(john instanceof Object); // Output: true (all objects inherit from Object)

const str = "Hello";
console.log(str instanceof String); // Output: false (str is a primitive string,
not an instance of the String constructor)

Prototypal inheritance also has some drawbacks. First, it can be more difficult to understand than class-based inheritance. Second, it can be more difficult to debug. Third, it can be more difficult to test.

When using regular expressions, common problems include incorrect pattern matching, performance issues with large data or complex patterns, difficulty in readability and maintenance, and the risk of overfitting the problem at hand.

The "var" keyword in JavaScript has limitations. Variables declared with "var" are function-scoped, accessible throughout the entire function. It lacks block-level scoping, leading to confusion and unintended side effects. Additionally, "var" doesn't prevent variable redeclaration within the same scope, risking inadvertent overwriting.

The "this" keyword in JavaScript has limitations. Its value depends on the function invocation, leading to confusion and unexpected behavior. In arrow functions, "this" behaves differently, being lexically scoped. When using "this" in a constructor function without the "new" keyword, it refers to the global object instead of creating a new instance.

The "delete" operator in JavaScript has drawbacks. It can be slow and impact performance when deleting object properties. It does not affect the prototype chain, leading to unexpected behavior. It also cannot delete variables or functions declared with "var" or "function" keywords.

Closures in JavaScript allow for encapsulation, data privacy, and the creation of private variables and functions that are inaccessible from the outside scope.

Prototypal inheritance in JavaScript allows objects to inherit properties and methods from other objects, promoting code reuse and reducing memory consumption.

Template literals in JavaScript allow for easier string interpolation, multiline strings, and dynamic content embedding, enhancing readability and reducing string manipulation complexities.

The fetch API offers a simpler and more modern way to make asynchronous HTTP requests, providing better error handling, support for promises, and the ability to handle various data formats.

To stay updated with the latest developments in JavaScript, I also make use of online learning platforms like Udemy and Coursera to enroll in courses focused on JavaScript and attend conferences or meetups whenever possible. Additionally, I find it helpful to contribute to open-source projects on GitHub, as it exposes me to different coding styles and practices.

To ensure maintainable, readable, and best practice-following code, I follow coding conventions and style guidelines. I also write clear comments, use descriptive variable and function names, and modularize the code to make it easier to understand and maintain.

Clear communication, organization, and collaboration are essential for JavaScript projects with a large codebase or multiple developers. Using Git for version control enables simultaneous work and easy code merging. Breaking down the code into smaller modules, documenting, following coding standards, conducting code reviews, and implementing testing ensure code quality and facilitate collaboration.

JavaScript handles memory management through automatic garbage collection. The JavaScript engine keeps track of all objects created during the program execution. When an object is no longer reachable or referenced by any part of the program, it becomes eligible for garbage collection. The garbage collector then frees up the memory occupied by those unreferenced objects, making it available for future use.

According to the JavaScript array, "chicken" comes before "egg" because "chicken" is alphabetically sorted before "egg".

const arr = ["egg", "chicken"];
const sortedArr = arr.sort();

console.log(sortedArr) // ["chicken", "egg"]

//Hence proved, chicken comes first than egg