Top 50 JavaScript Interview Questions: Answers & Tips for Success

1. What are the different data types in JavaScript?

JavaScript has seven primitive data types: String, Number, Boolean, Undefined, Null, Symbol, and BigInt. It also includes objects, which can be collections of data and more complex entities.

1
let name = "John"; // String
2
let age = 30; // Number
3
let isStudent = true; // Boolean
4
let address; // Undefined
5
let empty = null; // Null
6
let uniqueId = Symbol("id"); // Symbol
7
let bigIntNumber = BigInt(1234567890123456789012345678901234567890); // BigInt
8
let person = { name: "Jane", age: 25 }; // Object

2. What is the difference between undefined and null?

undefined means a variable has been declared but not assigned a value, whereas null is an assignment value that represents the intentional absence of any object value.

1
let x;
2
console.log(x); // 
3
let y = null;
4
console.log(y); // null

3. What are JavaScript functions?

Functions are blocks of code designed to perform particular tasks. They are executed when they are called (invoked).

1
function greet(name) {
2
  return `Hello, ${name}!`;
3
}
4
console.log(greet("Vasyl")); // Hello, Vasyl!

4. Explain the difference between let, const, and var.

var is function-scoped or globally-scoped and can be re-declared and updated. let is block-scoped and can be updated but not re-declared. const is block-scoped and cannot be updated or re-declared.

1
var a = 1;
2
var a = 2; // No error
3

4
let b = 1;
5
// let b = 2; // Error: Identifier 'b' has already been declared
6

7
const c = 1;
8
// c = 2; // Error: Assignment to constant variable.

5. What is a closure in JavaScript?

A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope. Closures allow functions to access variables from an enclosing scope.

1
function outer() {
2
  let counter = 0;
3
  return function inner() {
4
    counter++;
5
    return counter;
6
  };
7
}
8
const increment = outer();
9
console.log(increment()); // 1
10
console.log(increment()); // 2

6. What is an Immediately Invoked Function Expression (IIFE)?

An IIFE is a function that runs as soon as it is defined. It is used to avoid polluting the global namespace and to create a new scope.

1
(function() {
2
  console.log("IIFE executed!");
3
})();

7. What is hoisting in JavaScript?

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope. This means that variables and function declarations can be used before they are declared.

1
console.log(x); // 
2
var x = 5;
3

4
greet();
5
function greet() {
6
  console.log("Hello!");
7
}

8. What are arrow functions?

Arrow functions are a concise syntax for writing function expressions. They do not have their own this, arguments, super, or new.target.

1
const add = (a, b) => a + b;
2
console.log(add(2, 3)); // 5

9. What is the difference between == and ===?

== checks for equality with type coercion, meaning it converts the operands to the same type before comparing. === checks for strict equality without type coercion, meaning the values and types must be the same.

1
console.log(1 == '1'); // true
2
console.log(1 === '1'); // false

10. What is the purpose of the this keyword?

this refers to the object that is executing the current function. Its value depends on how the function is called.

1
const person = {
2
  name: 'Vasyl',
3
  greet: function() {
4
    console.log(`Hello, my name is ${this.name}`);
5
  }
6
};
7
person.greet(); // Hello, my name is Vasyl

11. What is an event loop in JavaScript?

The event loop is a mechanism that allows JavaScript to perform non-blocking operations by offloading operations to the system kernel whenever possible.

1
console.log('Start');
2
setTimeout(() => {
3
  console.log('Timeout');
4
}, 0);
5
console.log('End');
6
// Output: Start, End, Timeout

12. What are Promises?

Promises are objects representing the eventual completion or failure of an asynchronous operation. They provide a way to handle asynchronous operations in a more readable manner.

1
const promise = new Promise((resolve, reject) => {
2
  setTimeout(() => {
3
    resolve('Done!');
4
  }, 1000);
5
});
6

7
promise.then(result => {
8
  console.log(result); // Done!
9
});

13. Explain async and await.

async functions return a promise and allow the use of await within them. await pauses the execution of an async function and waits for the promise to resolve or reject.

1
async function fetchData() {
2
  let response = await fetch('https://api.example.com/data');
3
  let data = await response.json();
4
  console.log(data);
5
}
6
fetchData();

14. What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content.

1
document.getElementById('myElement').textContent = 'Hello, World!';

15. What is event delegation?

Event delegation is a technique of using a single event listener to manage all events of a particular type within a container. It takes advantage of event bubbling to handle events efficiently.

1
document.getElementById('parent').addEventListener('click', function(event) {
2
  if (event.target && event.target.matches('button.class-name')) {
3
    console.log('Button clicked');
4
  }
5
});

16. What is the difference between map, filter, and reduce?

map creates a new array with the results of calling a function on every element in the calling array. filter creates a new array with all elements that pass the test implemented by the provided function. reduce applies a function against an accumulator and each element in the array to reduce it to a single value.

1
const numbers = [1, 2, 3, 4, 5];
2

3
const doubled = numbers.map(n => n * 2);
4
console.log(doubled); // [2, 4, 6, 8, 10]
5

6
const even = numbers.filter(n => n % 2 === 0);
7
console.log(even); // [2, 4]
8

9
const sum = numbers.reduce((acc, n) => acc + n, 0);
10
console.log(sum); // 15

17. What are higher-order functions?

Higher-order functions are functions that take other functions as arguments or return functions as their result. They are a key feature of functional programming.

1
function applyOperation(a, b, operation) {
2
  return operation(a, b);
3
}
4

5
function add(x, y) {
6
  return x + y;
7
}
8

9
console.log(applyOperation(5, 3, add)); // 8

18. What is a callback function?

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some action.

1
function fetchData(callback) {
2
  setTimeout(() => {
3
    const data = { name: 'John' };
4
    callback(data);
5
  }, 1000);
6
}
7

8
fetchData(data => {
9
  console.log(data); // { name: 'John' }
10
});

19. What are modules in JavaScript?

Modules are reusable pieces of code that can be imported and exported to organize and structure your code. They help to keep code clean, maintainable, and scoped properly.

1
// module.js
2
export const greet = name => `Hello, ${name}!`;
3

4
// main.js
5
import { greet } from './module.js';
6
console.log(greet('Vasyl')); // Hello, Vasyl!

20. What is the purpose of use strict?

use strict is a directive that helps catch common coding errors and "unsafe" actions such as defining global variables. It enforces stricter parsing and error handling in your code.

1
'use strict';
2
x = 3.14; // Error: x is not defined

21. What is the spread operator?

The spread operator (...) allows an iterable to expand in places where multiple arguments or elements are expected. It is used for copying arrays, merging arrays, and spreading elements.

1
const arr1 = [1, 2, 3];
2
const arr2 = [...arr1, 4, 5];
3
console.log(arr2); // [1, 2, 3, 4, 5]
4

5
const obj1 = { a: 1, b: 2 };
6
const obj2 = { ...obj1, c: 3 };
7
console.log(obj2); // { a: 1, b: 2, c: 3 }

22. What are template literals?

Template literals are string literals allowing embedded expressions. They can be multi-line and use interpolation using ${} syntax.

1
const name = 'Vasyl';
2
const message = `Hello, ${name}!`;
3
console.log(message); // Hello, Vasyl!

23. What is destructuring in JavaScript?

Destructuring is a syntax for extracting values from arrays or properties from objects into distinct variables.

1
const [a, b] = [1, 2];
2
console.log(a, b); // 1 2
3

4
const { name, age } = { name: 'Vasyl', age: 25 };
5
console.log(name, age); // Vasyl 25

24. What is the difference between for...of and for...in?

for...of iterates over iterable objects (like arrays, strings, etc.) and returns the values. for...in iterates over the enumerable properties of an object and returns the keys.

1
const arr = [1, 2, 3];
2
for (const value of arr) {
3
  console.log(value); // 1, 2, 3
4
}
5

6
const obj = { a: 1, b: 2 };
7
for (const key in obj) {
8
  console.log(key); // a, b
9
}

25. What are generators in JavaScript?

 Generators are functions that can be paused and resumed, producing a sequence of results using the function* syntax and yield keyword.

1
function* generateSequence() {
2
  yield 1;
3
  yield 2;
4
  yield 3;
5
}
6

7
const generator = generateSequence();
8
console.log(generator.next().value); // 1
9
console.log(generator.next().value); // 2
10
console.log(generator.next().value); // 3

26. What is the difference between synchronous and asynchronous code?

Synchronous code is executed line by line, with each operation waiting for the previous one to complete. Asynchronous code allows multiple operations to occur simultaneously, using callbacks, promises, or async/await.

1
console.log('Start');
2
setTimeout(() => {
3
  console.log('Timeout');
4
}, 0);
5
console.log('End');
6
// Output: Start, End, Timeout

27. What are JavaScript prototypes?

Prototypes are a mechanism by which JavaScript objects inherit features from one another. Every JavaScript object has a prototype, which is another object that the original object inherits properties and methods from.

1
function Person(name) {
2
  this.name = name;
3
}
4

5
Person.prototype.greet = function() {
6
  return `Hello, my name is ${this.name}`;
7
};
8

9
const person = new Person('Vasyl');
10
console.log(person.greet()); // Hello, my name is Vasyl

28. What is event bubbling and capturing?

Event bubbling is when an event starts from the target element and propagates up to the root. Event capturing (or trickling) is the reverse, where the event starts from the root and propagates down to the target element.

1
document.getElementById('child').addEventListener('click', () => {
2
  console.log('Child clicked');
3
});
4

5
document.getElementById('parent').addEventListener('click', () => {
6
  console.log('Parent clicked');
7
});
8
// If you click on the child element, "Child clicked" and then "Parent clicked" will be logged.

29. What is a promise chain?

A promise chain is a series of promises where each promise is executed after the previous one completes, using then() for chaining.

1
fetch('https://api.example.com/data')
2
  .then(response => response.json())
3
  .then(data => {
4
    console.log(data);
5
    return fetch('https://api.example.com/other-data');
6
  })
7
  .then(response => response.json())
8
  .then(otherData => {
9
    console.log(otherData);
10
  })
11
  .catch(error => {
12
    console.error('Error:', error);
13
  });

30. What are JavaScript classes?

Classes are a template for creating objects and are a syntactical sugar over JavaScript's existing prototype-based inheritance. They provide a cleaner and more intuitive way to create objects and manage inheritance.

1
class Person {
2
  constructor(name) {
3
    this.name = name;
4
  }
5

6
  greet() {
7
    return `Hello, my name is ${this.name}`;
8
  }
9
}
10

11
const person = new Person('Vasyl');
12
console.log(person.greet()); // Hello, my name is Vasyl

31. What is the super keyword?

The super keyword is used to call the constructor or methods of a parent class. It allows access to the parent class's properties and methods.

1
class Animal {
2
  constructor(name) {
3
    this.name = name;
4
  }
5

6
  speak() {
7
    return `${this.name} makes a sound.`;
8
  }
9
}
10

11
class Dog extends Animal {
12
  constructor(name) {
13
    super(name);
14
  }
15

16
  speak() {
17
    return `${this.name} barks.`;
18
  }
19
}
20

21
const dog = new Dog('Rex');
22
console.log(dog.speak()); // Rex barks.

32. What are JavaScript Promises?

Promises represent the eventual completion or failure of an asynchronous operation. They are used to handle asynchronous operations more effectively, avoiding callback hell.

1
const promise = new Promise((resolve, reject) => {
2
  setTimeout(() => {
3
    resolve('Success!');
4
  }, 1000);
5
});
6

7
promise.then(result => {
8
  console.log(result); // Success!
9
}).catch(error => {
10
  console.error(error);
11
});

33. What is an async function?

An async function is a function declared with the async keyword that enables the use of the await keyword within it to pause execution until a promise is resolved.

1
async function fetchData() {
2
  try {
3
    let response = await fetch('https://api.example.com/data');
4
    let data = await response.json();
5
    console.log(data);
6
  } catch (error) {
7
    console.error('Error:', error);
8
  }
9
}
10

11
fetchData();

34. What is the new keyword?

The new keyword is used to create an instance of a constructor function or a class. It sets up the prototype chain and initializes the new object.

1
function Person(name) {
2
  this.name = name;
3
}
4

5
const person = new Person('Vasyl');
6
console.log(person.name); // Vasyl

35. What is the difference between call and apply?

Both call and apply invoke a function with a specified this value, but call takes arguments separately while apply takes arguments as an array.

1
function greet(greeting, punctuation) {
2
  console.log(`${greeting}, my name is ${this.name}${punctuation}`);
3
}
4

5
const person = { name: 'Vasyl' };
6

7
greet.call(person, 'Hello', '!'); // Hello, my name is Vasyl!
8
greet.apply(person, ['Hi', '.']); // Hi, my name is Vasyl.