JavaScript Interview Questions and Answers (original) (raw)

JavaScript (JS) is the most popular lightweight, scripting, and interpreted programming language. JavaScript is well-known as a scripting language for web pages, mobile apps, web servers, and many other platforms. Both front-end and back-end developers need to have a strong command of JavaScript, as many job roles require fluency in this language.

Here, we provide 70+ JavaScript Interview Questions and Answers designed for both freshers and experienced developers. Here, we will cover everything, including Core JavaScript Concepts, ES6+ features, DOM manipulation, asynchronous JavaScript, error handling, JavaScript frameworks and libraries, and more, that will surely help you crack your next JavaScript interview.

Table of Content

JavaScript Interview Questions for Freshers

Let’s discuss some common questions that you should prepare for the interviews. These questions will help clear the interviews, especially for the frontend development role.

Java is an object-oriented programming language, while JavaScript is a client-side scripting language. Both of them are different from each other. Here are main difference point between them:

**Java **JavaScript
Statically typed, compiled and then interpreted Dynamically typed, interpreted
Runs on JVM (Java Virtual Machine) Runs in a browser or Node.js
Class-based inheritance Prototype-based inheritance
Compiled into bytecode and then bytcdode is run by the interpreter Interpreted directly by browser
Multi-threading and concurrency supported Single-threaded, async with event loop
Strongly typed Weakly typed
Fully object-oriented Supports object-oriented but more flexible
Automatic garbage collection (JVM) Automatic garbage collection (browser)

2. What are Data Types in JavaScript?

JavaScript data types are categorized into two parts i.e. primitive and non-primitive types.

The newest version of JavaScript is called **ECMAScript 2023 (**ES2023). It came out in June 2023.

4. What would be the result of 3+2+"7"?

Here, 3 and 2 behave like an integer, and "7" behaves like a string. So 3 plus 2 will be 5. Then the output will be 5+"7" = 57.

5. What is the use of the isNaN function?

The number isNan function determines whether the passed value is NaN (Not a number) and is of the type "Number". In JavaScript, the value NaN is considered a type of number. It returns true if the argument is not a number, else it returns false.

6. Which is faster in JavaScript and ASP script?

JavaScript is faster compared to ASP Script. JavaScript is a client-side scripting language and does not depend on the server to execute. The ASP script is a server-side scripting language always dependable on the server.

7. What is negative infinity?

The negative infinity is a constant value represents the lowest available value. It means that no other number is lesser than this value. It can be generate using a self-made function or by an arithmetic operation. JavaScript shows the NEGATIVE_INFINITY value as -Infinity.

8. Is it possible to break JavaScript Code into several lines?

Yes, it is possible to break the JavaScript code into several lines in a string statement. It can be broken by using the ****'\n'** (backslash n).

**Example:

console.log("A Online Computer Science Portal\n for Geeks")

The code-breaking line is avoid by JavaScript which is not preferable.

let gfg= 10, GFG = 5,
Geeks =
gfg + GFG;

9. What are "truthy" and "falsy" values in JavaScript

10. What are undeclared and undefined variables?

**11. Write a JavaScript code for adding new elements dynamically.

html `

Click Here! 
<script>
    function create() {
        let geeks = document.createElement('geeks');
        geeks.textContent = "Geeksforgeeks";
        geeks.setAttribute('class', 'note');
        document.body.appendChild(geeks);
    }
</script>

`

12. What are global variables? How are these variables declared, and what are the problems associated with them?

In contrast, global variables are the variables that define outside of functions. These variables have a global scope, so they can be used by any function without passing them to the function as parameters.

**Example:

javascript `

let petName = "Rocky"; // Global Variable myFunction();

function myFunction() { console.log("Inside myFunction - Type of petName:", typeof petName); console.log("Inside myFunction - petName:", petName); }

console.log("Outside myFunction - Type of petName:", typeof petName); console.log("Outside myFunction - petName:", petName);

`

Output

Inside myFunction - Type of petName: string Inside myFunction - petName: Rocky Outside myFunction - Type of petName: string Outside myFunction - petName: Rocky

It is difficult to debug and test the code that relies on global variables.

13. What do you mean by NULL in JavaScript?

The NULL value represents that no value or no object. It is known as empty value/object.

14. How to delete property-specific values?

The **delete keyword deletes the whole property and all the values at once like

let gfg={Course: "DSA", Duration:30};
delete gfg.Course;

15. What is the difference between null and undefined in JavaScript?

A deeper comparison between the two special values, null (intentional absence of value) and undefined (uninitialized variables).

16. What is a prompt box?

The prompt box is a dialog box with an optional message prompting the user to input some text. It is often used if the user wants to input a value before entering a page. It returns a string containing the text entered by the user, or null.

17. What is the 'this' keyword in JavaScript?

Functions in JavaScript are essential objects. Like objects, it can be assign to variables, pass to other functions, and return from functions. And much like objects, they have their own properties. 'this' stores the current execution context of the JavaScript program. Thus, when it use inside a function, the value of 'this' will change depending on how the function is defined, how it is invoked, and the default execution context.

18. Explain the working of timers in JavaScript. Also explain the drawbacks of using the timer, if any.

The timer executes some specific code at a specific time or any small amount of code in repetition to do that you need to use the functions **setTimout, **setInterval, and **clearInterval. If the JavaScript code sets the timer to 2 minutes and when the times are up then the page displays an alert message "times up". The **setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

19. What is the difference between ViewState and SessionState?

20. How to submit a form using JavaScript?

You can use **document.form[0].submit()method to submit the form in JavaScript.

**21. Does JavaScript support automatic type conversion?

Yes, JavaScript supports automatic type conversion.

22. What is a template literal in JavaScript?

A **template literal in JavaScript is a way to define strings that allow embedded expressions and multi-line formatting. It uses backticks (`) instead of quotes and supports ${} for embedding variables or expressions inside the string.

**23. What is a higher-order function in JavaScript?

A **higher-order function in JavaScript is a function that either takes one or more functions as arguments, or returns a function as its result. These functions allow for more abstract and reusable code, enabling functional programming patterns

For example, map() and filter() are higher-order functions because they take callback functions as arguments.

24. What are all the looping structures in JavaScript?

**25. What is lexical scope in JavaScript?

**Lexical scope in JavaScript refers to the way variables are resolved based on their location in the source code. A variable's scope is determined by the position of the code where it is defined, and it is accessible to any nested functions or blocks. This means that functions have access to variables in their own scope and the outer (lexical) scopes, but not to variables in inner scopes.

JavaScript `

let outer = "I am outside!"; function inner() { console.log(outer); } inner();

`

In this example, inner() can access the outer variable because of lexical scoping.

26. How does lexical scoping work with the this keyword in JavaScript?

In JavaScript, lexical scoping primarily applies to variable resolution, while the behavior of the this keyword is determined by how a function is called, not by its position in the code. The value of this is dynamically determined at runtime based on the function’s context (e.g., whether it’s called as a method, in a global context, or with call, apply, or bind).

JavaScript `

const obj = { name: "JavaScript", greet: function () { console.log(this.name); } }; obj.greet(); // "JavaScript"

`

Here, this refers to obj because the function is called as a method of the object. Lexical scoping affects variable lookups but doesn’t alter how this behaves.

27. Explain how to read and write a file using JavaScript?

The **readFile() functions is used for reading operation.

readFile( Path, Options, Callback)

The **writeFile() functions is used for writing operation.

writeFile( Path, Data, Callback)

28. What is called Variable typing in JavaScript?

The **variable typing is the type of variable used to store a number and using that same variable to assign a “string”.

Geeks = 42;
Geeks = "GeeksforGeeks";

**29. What is hoisting in JavaScript?

**Hoisting in JavaScript is the behavior where variable and function declarations are moved to the top of their containing scope during compilation, before the code is executed. This means you can reference variables and functions before they are declared in the code. However, only declarations are hoisted, not initializations.

JavaScript `

console.log(a); // undefined var a = 5;

`

In this case, the declaration of a is hoisted, but its value (5) is not assigned until the code execution reaches that line. Hoisting applies differently for var, let, const, and function declarations.

30. How to convert the string of any base to integer in JavaScript?

In JavaScript, parseInt() function is used to convert the string to an integer. This function returns an integer of base which is specified in second argument of parseInt() function. The parseInt() function returns Nan (not a number) when the string doesn’t contain number.

31. Explain how to detect the operating system on the client machine?

To detect the operating system on the client machine, one can simply use navigator.appVersion or navigator.userAgent property. The Navigator appVersion property is a read-only property and it returns the string that represents the version information of the browser.

32. What are the types of Pop up boxes available in JavaScript?

There are three types of pop boxes available in JavaScript.

33. What is the use of void(0) ?

The void(0) is used to call another method without refreshing the page during the calling time parameter “zero” will be passed.

**34. What are JavaScript modules, and how do you import/export them?

JavaScript modules allow you to split your code into smaller, reusable pieces. They enable the export of variables, functions, or objects from one file and the import of them into another. To export an element, you use export (either named or default). To import it, you use import.

JavaScript `

// In file1.js export const greet = () => "Hello";

// In file2.js import { greet } from './file1'; console.log(greet());

`

Modules help organize code and avoid global namespace pollution. They are natively supported in modern JavaScript through import and export statements.

35. What are WeakMap and WeakSet, and how are they different from Map and Set?

A **WeakMap is a collection of key-value pairs where keys are objects and the values can be any data type. The key-value pairs in a WeakMap are "weakly" held, meaning if no other references to a key exist, the entry can be garbage collected. A **WeakSet is a collection of unique objects, and like WeakMap, the objects are weakly held.

The main difference from **Map and **Set is that in **Map and **Set, entries are strongly held, meaning they prevent garbage collection, while in **WeakMap and **WeakSet, entries can be garbage collected if no other references to the objects exist.

36. What is the role of the setImmediate function in Node.js, and how is it different from setTimeout?

In Node.js, the setImmediate() function schedules a callback to be executed in the next iteration of the event loop, specifically after the current event loop phase (which includes I/O events). It's commonly used for deferring tasks to be executed once the current operation completes.

The key difference between setImmediate() and setTimeout() is that setImmediate() runs after the current event loop iteration, following I/O events but before any timers (such as setTimeout()). On the other hand, setTimeout() schedules tasks to run after a specified delay, which might not be precise if the event loop is busy, meaning it can be delayed by I/O or other tasks. While setTimeout() schedules tasks with a minimum delay, setImmediate() executes as soon as the event loop reaches a free point in the "check" phase, after I/O events have been processed.

JavaScript Interview Questions for Experienced

**37. What is the ‘Strict’ mode in JavaScript and how can it be enabled?

Strict Mode is a new feature in ECMAScript 5 that allows you to place a program or a function in a “strict” operating context. This strict context prevents certain actions from being taken and throws more exceptions. The statement “use strict” instructs the browser to use the Strict mode, which is a reduced and safer feature set of JavaScript.

38. What are the advantages and disadvantages of using async/await over traditional callbacks or promises?

**Advantages of async/await:

**Disadvantages of async/await:

**39. How to explain closures in JavaScript and when to use it?

The closure is created when a child functions to keep the environment of the parent’s scope even after the parent’s function has already executed. The Closure is a locally declared variable related to a function. The closure will provide better control over the code when using them.

JavaScript `

function foo() { let b = 1; function inner() { return b; } return inner; } let get_func_inner = foo();

console.log(get_func_inner()); console.log(get_func_inner()); console.log(get_func_inner());

`

**40. What is the difference between call() and apply() methods ?

Both methods are used in a different situation

**41. How to target a particular frame from a hyperlink in JavaScript ?

This can be done by using the **target attribute in the hyperlink. Like

New Page

**42. Write the errors shown in JavaScript?

There are three different types of errors in JavaScript.

**43. What is the difference between JavaScript and Jscript?

**JavaScript

**JScript

**44. How many ways an HTML element can be accessed in JavaScript code?

There are four possible ways to access HTML elements in JavaScript which are:

**45. What is an event bubbling in JavaScript?

Consider a situation an element is present inside another element and both of them handle an event. When an event occurs in bubbling, the innermost element handles the event first, then the outer, and so on.

**46. Explain the concept of memoization in JavaScript?

**Memoization in JavaScript is an optimization technique that stores the results of expensive function calls and reuses them when the same inputs occur again. This reduces the number of computations by caching the results. Memoization is typically implemented using an object or a map to store function arguments and their corresponding results. When the function is called with the same arguments, the cached result is returned instead of recalculating it. This improves performance, especially for functions with repeated calls and expensive computations.

**47. What is the difference between == and === in JavaScript?

In JavaScript, == is the **loose equality operator, which compares two values for equality after performing type coercion if necessary. This means it converts the operands to the same type before comparing.

=== is the **strict equality operator, which compares both the values and their types, without performing type conversion.

**48. Explain the concept of promises and how they work.

A **Promise in JavaScript is an object that represents the result of an asynchronous operation. It can be in one of three states: pending, fulfilled (resolved), or rejected. You create a promise using new Promise(), passing an executor function with resolve and reject callbacks. When the operation succeeds, resolve() is called; if it fails, reject() is used. Promises are handled with .then() for success and .catch() for failure. They can be chained to handle sequences of asynchronous tasks in a more readable way.

**49. What is the difference between a shallow copy and a deep copy?

A **shallow copy creates a new object but copies references to the original nested objects, meaning changes to the nested objects affect both the original and the copy. A **deep copy, on the other hand, creates a new object and recursively copies all nested objects, ensuring that the original and the copy are completely independent. In a shallow copy, nested objects are shared, while in a deep copy, they are fully duplicated.

**50. Explain the concept of the event loop and the call stack in JavaScript. How does JavaScript handle asynchronous code execution?

In JavaScript, the **event loop manages the execution of code, handling both synchronous and asynchronous operations. The **call stack stores function calls and executes them in a Last In, First Out (LIFO) order. When asynchronous code (e.g., setTimeout, promises) is encountered, it’s offloaded to the callback queue once its execution context is ready. The event loop continuously checks the call stack and moves tasks from the callback queue to the stack when it’s empty, allowing asynchronous code to run without blocking the main thread.

**51. What are Web Workers, and how do you use them to run scripts in the background?

**Web Workers are JavaScript threads that run in the background, separate from the main thread, allowing long-running scripts to be executed without blocking the user interface. You can create a Web Worker using the Worker constructor, passing a JavaScript file as an argument. Once created, the worker can perform tasks asynchronously, and you can communicate with it via postMessage and onmessage events, ensuring the main thread remains responsive.

**52. Explain the concept of "debouncing" and "throttling" in JavaScript. How can these techniques optimize performance?

**Debouncing and **throttlingare techniques used to optimize performance by limiting the frequency of function executions in response to events like scrolling or resizing.

JavaScript MCQ Coding Interview Questions

**53. Which of the following is a JavaScript data type?

Options:

  1. number
  2. string
  3. boolean
  4. All of the above

Answer:

4

Explanation:

54. What is the result of the following code?

JavaScript `

let a = [1, 2, 3]; let b = a; b[0] = 100; console.log(a);

`

Options:

  1. [100, 2, 3]
  2. [1, 2, 3]
  3. [100, 100, 100]
  4. undefined

Answer :

1

Explanation :

55. What is the output of the following code?

JavaScript `

console.log([] + []);

`

Options:

  1. null
  2. undefined
  3. ''
  4. []

Answer :

3

Explanation:

**56. What will be the output of the following code?

JavaScript `

(function() { var a = b = 5; })(); console.log(typeof a); console.log(typeof b);

`

**Options:

  1. typeof a: "undefined"
    typeof b: "number"
  2. typeof a: "number"
    typeof b: "number"
  3. typeof a: "undefined"
    typeof b: "undefined"
  4. typeof a: "number"
    typeof b: "undefined"

**Answer:

1

**Explanation:

**57. What will be logged in the console?

console.log(1 < 2 < 3);
console.log(3 > 2 > 1);

**Options:

  1. true, true
  2. true, false
  3. false, true
  4. false, false

**Answer:

2

**Explanation:

**58. What will be the output of the following code?

const obj1 = { a: 1 };
const obj2 = { a: 1 };
console.log(obj1 == obj2);
console.log(obj1 === obj2);

Options:

  1. true, true
  2. true, false
  3. false, true
  4. false, false

**Answer:

4

**Explanation:

**59. What will be the result of the following code?

let x = 10;
let y = (x++, x + 1, x * 2);
console.log(y);

Options :

  1. 22
  2. 12
  3. 21
  4. 20

**Answer:

22

**Explanation:

**60. What will be the output of this asynchronous JavaScript code?

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

Options:

  1. A D B C
  2. A B C D
  3. A D C B
  4. A C D B

**Answer:

3

**Explanation:

**61. What will be the output of this recursive function?

function foo(num) {
if (num === 0) return 1;
return num + foo(num - 1);
}
console.log(foo(3));

Options:

  1. 3
  2. 6
  3. 7
  4. 10

Answer:

3

**Explanation:

**62. What will be printed in the following code?

let a = [1, 2, 3];
let b = a;
b.push(4);
console.log(a);
console.log(b);

**Options:

  1. [1, 2, 3]
    [1, 2, 3, 4]
  2. [1, 2, 3, 4]
    [1, 2, 3, 4]
  3. [1, 2, 3]
    [1, 2, 3]
  4. [1, 2, 3, 4]
    [1, 2, 3]

**Answer:

2

**Explanation:

**63. What will be logged by the following code?

function test() {
console.log(this);
}
test.call(null);

Options:

  1. null
  2. undefined
  3. Window or global object
  4. TypeError

**Answer:

3

**Explanation:

JavaScript-Interview-Questions

JavaScript Interview Questions and Answers

JavaScript Tricky Coding Interview Questions

In Interviews sometimes interviewer ask some tricky output based JS questions to test your grasp on concepts. Let's see some of tricky questions that may ask in your upcoming interview.

**Note: we recommend you should guess first then confirm your output by hit on run.

**64.

JavaScript `

let a = 5; let b = '5';

if (a == b) { console.log('Equal'); } else { console.log('Not Equal'); }

`

**Explanation: The == operator performs type coercion, converting both operands to the same type before comparison. Here, '5' is coerced to a number, making the comparison 5 == 5, which evaluates to true. To avoid such issues, it's recommended to use the strict equality operator ===, which checks both value and type without coercion.

65.

JavaScript `

for (var i = 0; i < 3; i++) { setTimeout(function() { console.log(i); }, 100); }

`

**Explanation: Due to JavaScript's function scoping with var, the variable i is shared across all iterations. By the time the setTimeout callbacks execute, the loop has completed, and i equals 3. To capture the value of i at each iteration, you can use let (which has block scope) or pass i as an argument to an immediately invoked function expression (IIFE).

66.

JavaScript `

function arrayFromValue(item) { return [item]; }

console.log(arrayFromValue(10)); // ???

`

**Explanation: JavaScript's automatic semicolon insertion adds a semicolon after the return statement, causing the function to return undefined instead of the intended array. To fix this, ensure the return statement is on the same line as the array:

67.

JavaScript `

const car = { name: 'Toyota', getName: function() { return this.name; }, };

const getCarName = car.getName; console.log(getCarName()); // ???

`

**Explanation: When getCarName is called, it's no longer in the context of the car object. Therefore, this refers to the global object (or undefined in strict mode), not the car object. To maintain the correct context, you can use .bind(car):

const getCarName = car.getName.bind(car);
console.log(getCarName()); // 'Toyota'

68.

JavaScript `

console.log(a); // ??? console.log(b); // ???

var a = 2; let b = 2;

`

**Explanation: Variables declared with var are hoisted and initialized with undefined, so console.log(a) outputs undefined. Variables declared with let are hoisted but not initialized, leading to a ReferenceError when accessed before their declaration.

69.

JavaScript `

console.log(typeof null); // ???

`

**Explanation: This is a well-known quirk in JavaScript. Despite null being a primitive value representing the intentional absence of any object value, the typeof operator returns "object". This behavior is considered a bug in JavaScript that has been maintained for backward compatibility.

70.

JavaScript `

let arr = new Array(3).fill([]); arr[0].push(10); console.log(arr); // ???

`

**Explanation: The fill method fills all elements of the array with the same reference to the same array. Therefore, when you modify one element (e.g., arr[0].push(10)), all elements reflect this change because they all point to the same array in memory.

71.

JavaScript `

const obj = { x: 1 }; const { x, x: y } = obj; console.log(y); // ???

`

**Explanation: In this destructuring assignment, x is first assigned the value 1 from the object. Then, x: y creates a new variable y and assigns it the value of x. Since x is 1, y also becomes 1. This demonstrates how destructuring can assign values to multiple variables from the same property.

72.

JavaScript `

console.log(typeof undeclaredVar); // ??? console.log(typeof y); // ??? let y = 1;

`

**Explanation: The first console.log outputs "undefined" because undeclaredVar is not declared at all. The second console.log throws a ReferenceError because y is declared with let and is in a "temporal dead zone" from the start of the block until the declaration is encountered. During this period, accessing y results in a ReferenceError. ​

Common JavaScript Interview Questions

**1. What are the different data types in JavaScript?

JavaScript has two types of data: **primitive and **non-primitive.

**2. What is the difference between == and === in JavaScript?

**3. What is the difference between let , const , and var ?

**4. Explain hoisting in JavaScript.

**Hoisting is JavaScript's default behavior of moving all variable and function declarations to the top of their containing scope during the compile phase. However, only the declarations are hoisted, not the initialization.

**5. What is the difference between null and undefined in JavaScript?

let a = null; // Explicitly assigned nulllet b; // Variable declared but not assigned, hence undefined

**6. What are promises in JavaScript and how do they work?

A **promise is an object representing the eventual completion or failure of an asynchronous operation. Promises are used to handle asynchronous operations like API calls, ensuring cleaner code compared to callbacks. It has three states:

const myPromise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Operation was successful");
}
else {
reject("Operation failed");
}});
myPromise.then(result => console.log(result)).catch(error => console.log(error));

**7. What is the event loop in JavaScript?

The **event loop is a mechanism that allows JavaScript to handle asynchronous operations (like I/O, timers, etc.) without blocking the main thread. It continuously checks the call stack for any code to execute and moves tasks from the callback queue to the call stack when the stack is empty.

**8. What are closures in JavaScript?

A **closure is a function that retains access to its lexical scope (the scope in which it was created) even after that scope has finished execution. Closures allow functions to access variables from an outer function after the outer function has returned.

JavaScript `

function outer() { let x = 10; return function inner() { console.log(x); } } const closureFunc = outer(); closureFunc(); // prints 10

`

**9. Explain the concept of this in JavaScript.

In JavaScript, the **this keyword refers to the context in which a function is called. It is used to refer to the object that is executing the current piece of code.

The value of this can change depending on how the function is called. Here are the different scenarios where this behaves differently:

**10. What is a callback function in JavaScript?

A **callback function in JavaScript is a function that is passed as an argument to another function and is executed after the completion of that function. Callback functions are primarily used for handling asynchronous operations, such as API requests or timeouts, ensuring that certain code runs only after a specific task is completed.

JavaScript `

function greet(name, callback) { console.log("Hello " + name); callback(); }

function sayGoodbye() { console.log("Goodbye!"); }

greet("Anjali", sayGoodbye);

`

Output

Hello Anjali Goodbye!

Pratice JavaScript with Quizes

Apart from these questions you can also practice JavaScript Quiz for better understanding of every topic to enhance your knowledge and helping you in the interviews.

  1. Basic JavaScript
  2. Variables and Data Types
  3. Operators
  4. Control Flow
  5. Functions
  6. Objects
  7. Arrays
  8. DOM and BOM
  9. Event Handling
  10. Classes and Inheritance
  11. Modern JavaScript (ES6+)
  12. Advanced JavaScript
  13. Regular Expressions and JSON
  14. Asynchronous JavaScript
  15. Error Handling and Debugging

Conclusion

In conclusion, after going through this article, you should now have a solid understanding of the key JavaScript interview questions that are commonly asked in web development interviews. Remember, JavaScript often includes a few tricky questions, so be sure not to skip that part of your preparation. Whether you're preparing for a front-end or back-end role, it’s always helpful to check out our specialized interview question guides(1. Frontend Interview Questions 2. Backend Interview Questions 3. Full-Stack Interview Questions) for both areas. Stay well-prepared and confident, and you'll be ready to tackle your interview with ease!