𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗮𝗹 𝗣𝗿𝗼𝗴𝗿𝗮𝗺𝗺𝗶𝗻𝗴:

Question 1

What is currying, and how do you implement it?

Answer 1

“Currying is a functional programming technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument, returning a new function until all arguments are provided.

For example:

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) return fn(...args);
    return (...nextArgs) => curried(...args, ...nextArgs);
  };
}
const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // Outputs 6

Currying enables partial application and reusable functions. As an SDET, I’d test curried functions to ensure correct argument handling and verify the final output for various input sequences.”

Question 2

Explain functional programming concepts in JavaScript.

Answer 2

“Functional programming (FP) in JavaScript emphasizes writing code using pure functions, immutability, and avoiding side effects. Key concepts include:

Pure Functions: Same input always produces the same output, no side effects.
Immutability: Data isn’t modified; new data is created instead (e.g., using spread operator).
Higher-Order Functions: Functions that take or return functions (e.g., map, filter).
Function Composition: Combining functions to create new ones.
For example:

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]

FP improves predictability and testability. As an SDET, I’d test FP code for immutability and ensure functions remain pure by checking for unintended state changes.”

Question 3

Explain functional programming concepts in JavaScript.

Answer 3

“Functional programming (FP) in JavaScript emphasizes writing code using pure functions, immutability, and avoiding side effects. Key concepts include:

Pure Functions: Same input always produces the same output, no side effects.
Immutability: Data isn’t modified; new data is created instead (e.g., using spread operator).
Higher-Order Functions: Functions that take or return functions (e.g., map, filter).
Function Composition: Combining functions to create new ones.
For example:

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]

FP improves predictability and testability. As an SDET, I’d test FP code for immutability and ensure functions remain pure by checking for unintended state changes.”

Question 4

What are pure functions, and why are they useful?

Answer 4

“A pure function is a function that always produces the same output for the same input and has no side effects, like modifying external state or DOM.

For example:

const add = (a, b) => a + b; // Pure
let total = 0;
const impureAdd = (a) => total += a; // Impure, modifies total

Pure functions are useful because they’re predictable, easier to test, and reusable. As an SDET, I’d write tests to verify a function’s output consistency and ensure it doesn’t alter external state, making debugging simpler.”

Question 5

What is debouncing and throttling? How are they implemented?

Answer 5

“Debouncing ensures a function is called only after a delay since the last invocation, useful for events like input typing. Throttling limits a function to run at most once in a specified time interval, ideal for scroll or resize events.

For example:

// Debounce
function debounce(fn, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn(...args), delay);
  };
}

// Throttle
function throttle(fn, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

const debouncedLog = debounce(() => console.log('Debounced'), 1000);
const throttledLog = throttle(() => console.log('Throttled'), 1000);

As an SDET, I’d test debouncing to ensure delayed execution and throttling to verify rate-limiting, especially for performance-critical UI events.”

Question 6

How do you optimize performance using lazy loading?

Answer 6

“Lazy loading is a technique to defer loading non-critical resources, like images or scripts, until they’re needed, improving page load times and reducing bandwidth usage.

For example:

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy">

The loading=”lazy” attribute defers image loading until it’s near the viewport. Alternatively, for JavaScript:

function lazyLoadImage(img) {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      img.src = img.dataset.src;
      observer.disconnect();
    }
  });
  observer.observe(img);
}

Lazy loading boosts performance by prioritizing visible content. As an SDET, I’d test lazy-loaded assets to ensure they load correctly when in view and verify performance metrics like load time improve.”