DEV Community: Prajesh Gawhale

JavaScript Interview Questions

Prajesh Gawhale — Fri, 17 Jan 2025 07:01:53 +0000

Hi folks! 👋 Welcome to yet another session of free ka gyan 💡 (because who doesn’t love free wisdom?). You might be thinking, “Why another session?” Well, because I’ve got another article where I covered React interview questions 💻, and if you’re a React developer, you absolutely should check it out. You’re welcome. 🙌

Now, let’s switch gears to something equally exciting: JavaScript interview questions! 🎉 Yes, the magical land of curly braces {}, tricky syntax, and the occasional “Why is this undefined?” moment.

If you’re prepping for a frontend role, JavaScript will become your new best frenemy. 🥲 Interviewers love JavaScript—probably because it’s vast, unpredictable, and perfect for creating questions that make you doubt your career choices. 😅

To make things easier (and less intimidating), I’ve divided JavaScript questions into 2 juicy categories 🍹:

Theory: 🧠
Ah, the part where they test your inner philosopher. Be prepared for questions about the event loop, inheritance, and everything from “What’s a prototype?” to “Why does this hate me?” 🤔

Feature Coding: 🎨
The showstopper. 🌟 Here, they’ll ask you to build something cool using JavaScript. Maybe it’s a feature, maybe it’s some weird coding problem involving setImmediate or setInterval. ⏳ Don’t panic—I’ve even included an example that was thrown at me in an interview. It’s a fantastic way to dive into promises and async/await while lowkey questioning your life choices. 🌀

So, buckle up! This is going to be one heck of a JavaScript ride. 🚀

Note: I have only mentioned questions that are must-to-know

Theory Javascript Questions:

1. What are the different data types present in javascript?
2. Explain Hoisting in JavaScript?

Hoisting works differently for arrow functions and normal functions. Normal functions are fully hoisted, meaning both their name and definition are moved to the top of the scope. In contrast, arrow functions are not fully hoisted because they are assigned to variables. Only the variable is hoisted, not the arrow function itself.

3. Difference between var, let, and constkeyword in javascript?
4. What is pass-by-value and pass-by-reference?

All primitive data types are passed by values(A copy of the value is used) and all non-primitive data types are passed by referenced (The reference to the object is passed by value).

5. What is the difference between a deep copy and a shallow copy?
6. What are Self-Invoking Functions, or Immediately Invoked Function Expressions (IIFE), also known as Anonymous Functions?

(function () {
    console.log("I am a self-invoking function!");
})();

7. What do you mean by "strict mode" in JavaScript?
8. Explain Higher-Order Functions in JavaScript.
9. Explain the this keyword in JavaScript.
10. Explain the call(), apply(), and bind() methods in JavaScript.
11. What is currying in JavaScript?
12. What is lexical scoping in JavaScript?
13. Explain Closures in JavaScript.
14. What are object prototypes?
15. What is prototypal inheritance?
16. What are callbacks in JavaScript?
17. Explain callback hell.
18. What is the rest parameter, and how does it differ from the spread operator?
19. What is the use of Promises in JavaScript?
20. What are generator functions?
21. What is a Temporal Dead Zone in JavaScript?
22. What are async and await in JavaScript?
23. Explain the reduce() function in JavaScript
24. What is implicit coercion in JavaScript?
25. What does it mean for functions to be "first-class citizens" in JavaScript?
26. Explain the scope of this inside an object.

If a function is inside an object, `this` refers to the object and can access its properties.

If `this` is used inside a nested function or object, it will refer to the outermost object, which is usually the global window object.

27. What is the significance of the new keyword in JavaScript?
28. What is memoization in JavaScript?
29. What are Map, WeakMap, and WeakSet in JavaScript?
30. What is event propagation in JavaScript?
31. What is event delegation in JavaScript?
32. What is the event loop in JavaScript?
33. What is control flow in JavaScript?

Control flow in JavaScript determines the order in which statements are executed in your code. Here's a breakdown of the main control flow structures: If Statement, Using If-Else Statement, Using Switch Statement, Using the Ternary Operator, Using For loop.

34. What is the difference between Server-Side Rendering (SSR) and Client-Side Rendering (CSR)?
35. What is the difference between declarative and imperative programming?

Declarative Programming: Describes what to do, focusing on the desired outcome rather than the steps to achieve it.

Imperative Programming: Describes how to do it, specifying the exact steps to achieve the desired result.

36. What is debouncing and throttling?

Feature Based Questions:

1. Reverse a string in javascript?

const reversestring = str => str.split("").reverse().join("");
const res = reversestring("tpircsavaJ iH")
console.log(res) // Hi Javascript

2. Write code for debouncing.

<input placeholder="Enter test" id="userInput"/>

const inputBox = document.getElementById('userInput');

inputBox.addEventListener('input', (event) => {
  Debouncing(event);
});

let interval;

function Debouncing (event)  {
clearTimeout(interval)
interval = setTimeout(() => {
      console.log(event.target.value);
}, 2000)
}

3. Write code for throttling.

<input placeholder="Enter test" id="userInput"/>

const inputBox = document.getElementById('userInput');

inputBox.addEventListener('input', (event) => {
  Throttling(event);
});

let value = true;

function Throttling (event)  {
  if (value === true) {
    console.log(event.target.value);
    value = false;
    setTimeout(() => {
        value = true;
    }, 2000)
  }
}

4. How to sort the array of objects based on a key?

const array = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 20 }
];

// Sort by age (ascending)
array.sort((a, b) => a.age - b.age);

console.log(array);
// Output: 
// [
//   { name: 'Charlie', age: 20 },
//   { name: 'Alice', age: 25 },
//   { name: 'Bob', age: 30 }
// ]

5. write a constructor function.

function Person(name, age, city) {
  // Properties
  this.name = name;
  this.age = age;
  this.city = city;

  // Method
  this.greet = function () {
    console.log(`Hi, I'm ${this.name}, and I live in ${this.city}.`);
  };
}

// Creating an instance
const person1 = new Person("Prajesh", 25, "Pune");
const person2 = new Person("Anjali", 28, "Mumbai");

// Using the method
person1.greet(); // Output: Hi, I'm Prajesh, and I live in Pune.
person2.greet(); // Output: Hi, I'm Anjali, and I live in Mumbai.

6. Write the polyfill of a map, reduce, and filter.

Here A polyfill is a piece of code that mimics the functionality or feature of a newer API or method, enabling it to work in environments where it is not natively supported.

Array.prototype.myMap = function(callback, thisArg) {
  if (!this || !Array.isArray(this)) {
    throw new TypeError('myMap can only be called on arrays.');
  }

  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i)) {
      result.push(callback.call(thisArg, this[i], i, this)); // Use callback.call to apply thisArg
    }
  }
  return result;
};

// Example usage
const obj = { multiplier: 2 };
const numbers = [1, 2, 3];
const doubled = numbers.myMap(function (num) {
  return num * this.multiplier;
}, obj);
console.log(doubled); // Output: [2, 4, 6]

Reduce

Array.prototype.myReduce = function(callback, initialValue) {
  if (!this || !Array.isArray(this)) {
    throw new TypeError('myReduce can only be called on arrays.');
  }
  if (typeof callback !== 'function') {
    throw new TypeError('Callback must be a function.');
  }

  let accumulator = initialValue;
  let startIndex = 0;

  if (accumulator === undefined) {
    if (this.length === 0) {
      throw new TypeError('Reduce of empty array with no initial value.');
    }
    accumulator = this[0];
    startIndex = 1;
  }

  for (let i = startIndex; i < this.length; i++) {
    if (this.hasOwnProperty(i)) {
      accumulator = callback(accumulator, this[i], i, this);
    }
  }

  return accumulator;
};

// Example usage
const sum = [1, 2, 3, 4].myReduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 10

Filter

Array.prototype.myFilter = function(callback, thisArg) {
  if (!this || !Array.isArray(this)) {
    throw new TypeError('myFilter can only be called on arrays.');
  }
  if (typeof callback !== 'function') {
    throw new TypeError('Callback must be a function.');
  }

  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (this.hasOwnProperty(i) && callback.call(thisArg, this[i], i, this)) {
      // Use callback.call to apply thisArg
      result.push(this[i]);
    }
  }
  return result;
};

// Example usage
const numbers = [1, 2, 3, 4];
const obj = { divisor: 2 };
const evens = numbers.myFilter(function(num) {
  return num % this.divisor === 0;
}, obj);

console.log(evens); // Output: [2, 4]

7. Write three functions, each using setTimeout to delay execution for 3 seconds, 2 seconds, and 1 second respectively. Then, write a function to execute these three functions in the same order (one, two, three) such that the output is:

one  
two  
three

const one = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log("one")
    resolve();
    }, 3000)
  })
}

const two = () => {
     return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log("two")
    resolve();
    }, 2000)
  })
}

const three = () => {
     return new Promise((resolve, reject) => {
    setTimeout(() => {
    console.log("three")
    resolve();
    }, 1000)
  })
}

const check = async () => {
await one();
await two();
await three();
}

check();

// output:
// one
// two
// three

8. Write a simple callback function?

// A function that takes a callback as an argument
function greetUser(name, callback) {
    console.log(`Hello, ${name}!`);
    callback();
}

// A callback function
function displayMessage() {
    console.log('Welcome to the platform!');
}

// Using the greetUser function with the callback
greetUser('Jhon', displayMessage);

9. Write a multiply function which will properly work when invoked below syntax.

console.log(multiply (2) (3) (4)) // output: 24
console.log(multiply (3) (4) (5)) // output: 60

function multiply (x) {
  return function (y) {
    return function (z) {
      return x * y * z
    }
  }
}

10. Write code for memoization.

const memoizeAddition = () => {
  let cache = {};
  return (value) => {
    if (value in cache) {
      console.log("Fetching from cache");
      return cache[value]; // Here, cache.value cannot be used as property name starts with the number which is not a valid JavaScript  identifier. Hence, can only be accessed using the square bracket notation.
    } else {
      console.log("Calculating result");
      let result = value + 20;
      cache[value] = result;
      return result;
    }
  };
};
// returned function from memoizeAddition
const addition = memoizeAddition();
console.log(addition(20)); //output: 40 calculated
console.log(addition(20)); //output: 40 cached

Congratulations on making it to the bottom of this post, and thank you so much for reading!

🎉 Your dedication to learning JavaScript is truly inspiring. Since you’re here, I’d love to share a fantastic GitHub repository I discovered during my JavaScript journey. It’s packed with valuable insights and resources to deepen your understanding of JavaScript. Trust me, you’re going to love it!

👉 Repo Link: https://github.com/sudheerj/javascript-interview-questions

Questions Asked in React.js Interview.

Prajesh Gawhale — Fri, 15 Nov 2024 11:51:31 +0000

Hey there, fellow code warriors! I'm Prajesh, your friendly neighborhood dev, here to drop some ‘free gyaan’—because why pay when you can scroll? 😆 Now, congrats on finding this post! If you’re here, you’re probably doing the classic interview panic search, just like I do five minutes before the call. (Hey, it works sometimes! 😂) If not, maybe you’re just overly ambitious. Either way, good on ya!

Now, you’re probably wondering: What makes my React interview questions so special? Well… plot twist—they’re not. You’ll see these questions in other blogs too. So why stick around? Because these are the exact questions that popped up in my interviews, and trust me, every React dev should have these locked and loaded. Plus, I’m spilling the tea on what interviewers are actually looking for when they ask these tricky questions—plus some sneaky tips to nail ‘em like a pro.

If you’re still reading, you clearly trust my wisdom (wise choice). Stick around for some insights below, or if you're just here for the questions, scroll straight on down. May the JavaScript gods be with you!

Note: I have given a lot of interviews 😂.

Free Gyaan

If you’re heading into an interview for a frontend or fullstack role, keep these in mind—it’s like packing snacks for a long trip; you’ll thank me later:

JavaScript is king: Expect a parade of JavaScript questions, from the easy-breezy to the downright evil. Most new devs don’t prepare well enough, and trust me, interviewers know this. So, brush up on your basics, and don’t skip the tricky stuff—closures, promises, async/await, and maybe that one quirky thing called this.
Get ready to code: They’ll likely throw a JavaScript coding problem your way or ask you to whip up a small React feature. Don’t just build it—make it sparkle! Oh, and once you think you’re done, brace yourself for the dreaded “Can you optimize this?” or “What if we tweak it a little?” (Translation: We just want to watch you squirm.)
API integration is your BFF: Learn to wield Axios like a pro. Many interviewers love tasks like “fetch this data and display it” or “modify this API response.” If you can make API calls while looking calm, they might even clap. (Spoiler: They won’t, but hey, you’ll still ace it.)
Don’t ghost HTML and CSS: These are the unsung heroes of frontend, and ignoring them could cost you. Most interviewers will throw basic HTML/CSS questions your way, and some will even toss in a small task like creating a responsive box or styling a layout. Pro tip: It’s like solving a puzzle, but the pieces are invisible and on fire.
Know React’s extended family: React Native and Next.js might pop up in conversation. You don’t need to be a wizard, but showing that you’ve heard of them and understand the basics will score you bonus points. It’s like knowing your distant cousins—you don’t hang out much, but you’re polite when they visit.

Short version? Study up, stay calm, and remember—they want you to succeed… probably. 😉 Good luck, and may your code always run on the first try (but let’s be real, it won’t).

ReactJS Interview Questions Fired On Me:

Now, now, I know what you’re thinking: 'Why on earth aren’t the answers here?!' But trust me, it’s for your own good. Searching for answers yourself is like going on a treasure hunt—you’ll not only learn better but also understand and remember more effectively. Plus, it’s always smarter to learn from multiple sources rather than just one. Think of it as assembling a super-team of knowledge, instead of relying on just one hero. Diversity is key, even in learning! So, roll up your sleeves, open those tabs, and get cracking.

1. What is React?
Here, the interviewer is likely expecting you to say React is a library, not a framework.
2. What is JSX, and how is it different from HTML?
3. What is the DOM tree, and how does React interact with it?
4. What are props in React, and how are they passed to components?
The interviewer might throw a curveball here, asking about destructuring, spread/rest operators, so be ready to flex those JavaScript muscles.
5. What are keys in React, and why are they important?
6. What is the virtual DOM, and how does it work?
7. What are lifecycle methods in React, and how are they used?
Lifecycle methods in class components and functional components are like different species... don’t mix them up!
8. What is a Higher-Order Component (HOC) in React?
9. What are controlled and uncontrolled components in React?
10. What are React hooks, and how do they enhance React functionality?
11. What is useState, and how does it work?
12. What is useEffect, and when should it be used?
13. What is the useContext hook, and how is it used in React?
14. What are useRef, useMemo, and useCallback, and how are they used?
Focus on useRef, it’s for when you want to manipulate the real DOM
15. What is lazy loading, and how is it implemented in React?
16. How can you optimize a React application for performance?
17. What is Strict Mode in React, and what is its purpose?
18. How can we prevent unnecessary re-renders in React?
19. What is props drilling, and how can it be minimized?
20. Can we create custom hooks in React, and how are they useful?
Yes, you can! Custom hooks are like your personal React assistant. They organize code and save you from repetitive tasks.
21. How does useReducer work in React, and how is it different from Redux?
22. What is reconciliation in React?
23. How many times does a React application render during startup?
24. What are pure components in React, and when should they be used
25. What is the debugger keyword in JavaScript, and how does it work in React?
Jest, React Testing Library, and Enzyme are your go-to squad for testing.
26. What are the differences between reduce, filter, forEach, and map in JavaScript?
27. What is optional chaining, and how does it work in JavaScript?
28. What are the differences between JSX and TSX?
29. What is Redux, and how is it used in React applications?
30. What is the difference between server-side and client-side components?
31. How can you make a React application re-render infinitely, and why would you want to avoid this?
32. How would you handle complex form validation in React?
33. What are some popular testing tools for React and UI testing?
34. What is the latest version of React, and what new features does it include?

Thank you so much for taking the time to read ❤️!