Technical Interview Concepts for Front-End Developers

Function Currying

Currying is the transformation of a function that takes multiple arguments into a sequence of functions that each take a single argument, ultimately returning the computed result.

const curry = (fn, ...initialArgs) => {
  return (...nextArgs) => {
    const allArgs = [...initialArgs, ...nextArgs];
    return allArgs.length >= fn.length ? fn(...allArgs) : curry(fn, ...allArgs);
  };
};

const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

Array Intersection

Using Set and filter provides a clean approach:

function getIntersection(arrA, arrB) {
  const set = new Set(arrA);
  return arrB.filter(value => set.has(value));
}

CommonJS vs. ES Modules

  • Syntax: CommonJS uses require/module.exports, whereas ESM uses import/export.
  • Loading: CommonJS is synchronous and runtime-based. ESM is asynchronous, allows for static analysis, and supports tree-shaking.
  • Binding: CommonJS exports a copy of the value; ESM exports a live binding (reference) to the value.
  • Environment: CommonJS is historically Node.js-centric; ESM is the modern standard supported by browsers and newer Node.js versions.

Map vs. Object

  • Keys: Map keys can be any type; Object key are restricted to Strings or Symbols.
  • Ordering: Map preserves insertion order; Object property order is not guaranteed.
  • Size: Map has a size property; Object requires manual counting or Object.keys().
  • Iteration: Map is directly iterable via for...of or forEach.

Cross-Origin Resource Sharing (CORS) Mechanisms

  • JSONP: Bypasses restrictions by injecting a <script> tag. Supports only GET requests.
  • CORS: Managed by server-side Access-Control-Allow-Origin headers. Supports all HTTP methods.
  • postMessage: Enables communication between windows or iframes across different origins.
  • Nginx Proxy: Acts as an intermediary to hide the origin mismatch from the browser.

Vue.js Reactivity and Lifecycle

  • v-if vs. v-show: v-if conditionally renders DOM elements; v-show toggles the display CSS property.
  • computed vs. methods: computed properties are cached based on dependencies; methods execute every time they are called.
  • nextTick: Ensures DOM updates are applied after the next tick of the event loop. Essential when performing operations that rely on updated DOM states.

Promise and Async Logic

Implementing a custom Promise.all:

function promiseAll(tasks) {
  return new Promise((resolve, reject) => {
    const results = [];
    let completed = 0;
    tasks.forEach((task, index) => {
      Promise.resolve(task).then(val => {
        results[index] = val;
        completed++;
        if (completed === tasks.length) resolve(results);
      }).catch(reject);
    });
  });
}

TCP/IP Networking

  • Three-Way Handshake: SYN -> SYN-ACK -> ACK. Ensures both client and server are ready for data exchange.
  • Four-Way Handshake: FIN -> ACK -> FIN -> ACK. Used for connection termination. The client enters a TIME_WAIT state to ensure the server receives the final ACK.

Tags: javascript Vue.js front-end Interview TypeScript

Posted on Sat, 24 Oct 2026 16:34:33 +0000 by RJP1