JavaScript Technical Interview Guide 2026: Questions & Tips

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Output: 1, 4, 3, 2

const animal = {
  speak() {
    console.log(`${this.name} makes a sound`);
  }
};

const dog = Object.create(animal);
dog.name = 'Rex';
dog.bark = function() {
  console.log('Woof!');
};

dog.speak(); // "Rex makes a sound"
dog.bark();  // "Woof!"

// Promise-based
function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: 'John' });
      } else {
        reject(new Error('Invalid ID'));
      }
    }, 100);
  });
}

fetchUser(1)
  .then(user => console.log(user))
  .catch(err => console.error(err));

async function getUserData(userId) {
  try {
    const user = await fetchUser(userId);
    const posts = await fetchPosts(user.id);
    const comments = await fetchComments(posts[0].id);
    return { user, posts, comments };
  } catch (error) {
    console.error('Failed to fetch data:', error);
    throw error;
  }
}

// Parallel fetching
async function getAll() {
  const [users, posts] = await Promise.all([
    fetchUsers(),
    fetchPosts()
  ]);
  return { users, posts };
}

// Object destructuring
const user = { name: 'John', age: 30, address: { city: 'NYC' } };
const { name, address: { city } } = user;

// Array destructuring
const [first, , third] = [1, 2, 3];

// Spread operator
const merged = { ...user, role: 'admin' };
const copy = [...array];

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

const obj = {
  name: 'Object',
  regular: function() {
    console.log(this.name); // 'Object'
  },
  arrow: () => {
    console.log(this.name); // undefined (or window.name)
  },
  delayed: function() {
    setTimeout(() => {
      console.log(this.name); // 'Object' - arrow preserves this
    }, 100);
  }
};

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// Usage
const searchInput = document.querySelector('#search');
const handleSearch = debounce((e) => {
  console.log('Searching:', e.target.value);
}, 300);

searchInput.addEventListener('input', handleSearch);

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map(item => deepClone(item));
  }

  const cloned = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloned[key] = deepClone(obj[key]);
    }
  }
  return cloned;
}

// Modern alternative
const clone = structuredClone(original);

// Implement map
Array.prototype.myMap = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }
  return result;
};

// Implement filter
Array.prototype.myFilter = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

// Implement reduce
Array.prototype.myReduce = function(callback, initial) {
  let acc = initial !== undefined ? initial : this[0];
  const start = initial !== undefined ? 0 : 1;
  for (let i = start; i < this.length; i++) {
    acc = callback(acc, this[i], i, this);
  }
  return acc;
};

// Instead of adding listener to each button:
document.querySelector('.list').addEventListener('click', (e) => {
  // Check if clicked element is a button
  if (e.target.matches('.delete-btn')) {
    const itemId = e.target.dataset.id;
    deleteItem(itemId);
  }

  if (e.target.matches('.edit-btn')) {
    const itemId = e.target.dataset.id;
    editItem(itemId);
  }
});

// Works for dynamically added elements too!

const obj = {
  name: 'Object',
  getName: function() {
    return this.name;
  },
  getNameArrow: () => this.name,
  getNameDelayed: function() {
    setTimeout(function() {
      console.log(this.name); // undefined (or window.name)
    }, 100);
  },
  getNameDelayedFixed: function() {
    setTimeout(() => {
      console.log(this.name); // 'Object'
    }, 100);
  }
};

console.log(obj.getName());       // 'Object'
console.log(obj.getNameArrow());  // undefined

const fn = obj.getName;
console.log(fn());                // undefined