JavaScript Interview Questions 2024
What is JavaScript and what are its key features?
JavaScript is a scripting language used primarily for adding interactivity and behavior to web pages. Its key features include being lightweight, interpreted, dynamically typed, and supporting both procedural and object-oriented programming paradigms.
Explain the differences between undefined and null.
Undefined means a variable has been declared but has not been assigned a value, while null is an assignment value representing no value or empty value explicitly assigned by the developer
What are the different data types in JavaScript?
JavaScript has several data types, including numbers, strings, booleans, undefined, null, symbols, objects, and functions.
What is the difference between == and === operators?
The == operator checks for equality after performing type coercion, while the === operator checks for strict equality without type coercion.
Explain the concept of hoisting in JavaScript.
Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope during the compilation phase, allowing them to be used before they are declared.
What is closure in JavaScript? Provide an example.
A closure is a combination of a function and the lexical environment within which that function
was declared. It allows a function to retain access to variables from its containing scope even
after the scope has closed. Example:
function outer() {
let name = 'John';
function inner() {
console.log(name);
}
return inner;
}
let innerFn = outer();
innerFn(); // Output: John
How does event delegation work in JavaScript?
Event delegation is a technique where a single event listener is attached to a parent element to handle events for multiple child elements. It leverages event bubbling to efficiently manage event handling for dynamically created or large numbers of elements.
What is the this keyword in JavaScript? How does it behave in different contexts?
The this keyword refers to the context in which a function is executed. Its value depends on how the function is called: in a method, it refers to the object that owns the method; in a regular function, it refers to the global object; in an event handler, it refers to the element that triggered the event
What is a callback function? Provide an example.
A callback function is a function passed as an argument to another function and executed after some operation has been completed. Example:
function fetchData(callback) {
setTimeout(function() {
callback('Data fetched successfully');
}, 2000);
}
function displayData(message) {
console.log(message);
}
fetchData(displayData);
Explain the concept of asynchronous programming in JavaScript.
Asynchronous programming in JavaScript allows tasks to be executed concurrently, without blocking the execution of subsequent code. It is commonly used for handling operations such as fetching data from a server or performing time-consuming tasks without freezing the user interface.
What are promises in JavaScript? How do they differ from callbacks?
Promises are objects representing the eventual completion or failure of an asynchronous operation and its resulting value. They provide a more structured way to handle asynchronous code compared to callbacks, allowing chaining and better error handling.
What are arrow functions? How do they differ from regular functions?
Arrow functions are a more concise syntax for writing functions in JavaScript introduced in ES6. They have a shorter syntax compared to regular functions and lexically bind the value of this. Arrow functions cannot be used as constructors and do not have their own this, arguments, super, or new.target.
Explain the difference between function declaration and function expression.
Function declarations are statements that define a named function, which can be called before its declaration. Function expressions, on the other hand, are created by assigning a function to a variable or passing it as an argument to another function. Function expressions cannot be called before their declaration.
What is the difference between let, var, and const for variable declaration?
Var is function-scoped and can be redeclared and reassigned. let and const are block-scoped; let allows reassignment but not redeclaration within the same scope, while const does not allow reassignment or redeclaration.
What is the spread operator (…) in JavaScript? Provide an example.
The spread operator … allows an iterable (like an array or string) to be expanded into individual elements. It is commonly used to clone arrays, concatenate arrays, or pass arguments to functions. Example:
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]
What are template literals in JavaScript? Provide an example.
Template literals are string literals allowing embedded expressions and multiline strings. They are enclosed by backticks ( ) instead of single or double quotes. Example:
const name = 'John';
const greeting = Hello, ${name}!';
console.log(greeting); // Output: Hello, John !
How does error handling work in JavaScript? Explain try, catch, and finally.
Error handling in JavaScript is done using try, catch, and finally blocks. Code that may throw an error is placed inside the try block, and if an error occurs, it is caught and handled in the catch block. The finally block is executed regardless of whether an error occurs or not.
What is the difference between synchronous and asynchronous code execution?
Synchronous code is executed sequentially, blocking further execution until the current operation is completed. Asynchronous code, on the other hand, allows multiple operations to be executed concurrently, without blocking subsequent code execution.
What are higher-order functions? Provide an example.
Higher-order functions are functions that take other functions as arguments or return functions. They enable functional programming paradigms and code reusability. Example:
function multiplier(factor) {
return function(x) {
return x * factor;
};
}
const double = multiplier(2);
console.log(double(3)); // Output: 6
Explain the concept of scope in JavaScript.
Scope in JavaScript refers to the visibility and accessibility of variables. There are two main types of scope: global scope and local scope. Variables declared outside of any function have global scope and can be accessed from anywhere in the code, while variables declared inside a function have local scope and can only be accessed within that function.
Also Read: DSA Roadmap 2024: Zero to Hero with Free Resources
What is the difference between global scope and local scope?
Global scope refers to variables declared outside of any function, which can be accessed from anywhere in the code. Local scope refers to variables declared inside a function, which can only be accessed within that function.
What are modules in JavaScript? How do you export and import modules?
Modules in JavaScript are reusable pieces of code that encapsulate functionality. They allow code to be organized into separate files and imported/exported as needed. Modules can be exported using the export keyword and imported using the import keyword.
What is event bubbling and event capturing? How do they differ?
Event bubbling and event capturing are two phases of event propagation in the DOM. In event bubbling, events are first captured at the deepest level of the DOM hierarchy and then propagate up to the topmost ancestor. In event capturing, events are captured at the topmost ancestor and then propagate down to the target element.
How can you prevent default behavior in an event handler?
You can prevent the default behavior of an event using the preventDefault() method. This method can be called on the event object passed to the event handler function, preventing the default action associated with the event from being executed.
What are the different ways to create objects in JavaScript?
There are several ways to create objects in JavaScript:
Object literal notation: const obj = { key: value };
Constructor functions: function MyClass() {} const obj = new MyClass();
Object.create() method: const obj = Object.create(proto);
ES6 classes: class MyClass {} const obj = new MyClass();
What is prototypal inheritance in JavaScript? How does it differ from classical inheritance?
Prototypal inheritance is a mechanism in JavaScript where objects inherit properties andmethods from a prototype object. Each object has a hidden internal link to its prototype object. This differs from classical inheritance in languages like Java or C++, where classes inherit from other classes in a hierarchical manner.
What are ES6 features? Provide examples of some ES6 features.
ES6 (ECMAScript 2015) introduced several new features to JavaScript, including:
Arrow functions: const add = (a, b) => a + b;
Template literals: const name = ‘John’; console.log(`Hello, ${name}!`);
Destructuring assignment: const { x, y } = obj;
Spread operator: const arr = [1, 2, 3]; const newArr = […arr];
Explain the difference between map, filter, and reduce array methods.
map(): Creates a new array by applying a function to each element of the original array.
filter(): Creates a new array with elements that pass a certain condition specified by a function.
reduce(): Reduces an array to a single value by applying a function to each element and accumulating the result.
What is the Event Loop in JavaScript? How does it work?
The Event Loop is a mechanism in JavaScript that allows asynchronous operations to be handled in a non-blocking manner. It continuously checks the call stack and task queue, moving tasks from the queue to the stack for execution when the stack is empty.
What are Web Workers in JavaScript? How do they work?
 Web Workers are a browser feature that allows JavaScript code to run in background threads, separate from the main execution thread. They enable parallel processing and prevent long running scripts from blocking the user interface.
Explain the concept of CORS (Cross-Origin Resource Sharing) in JavaScript.
CORS is a security feature implemented in web browsers to prevent cross-origin HTTP requests, where a web application on one domain requests resources from a different domain. It allows servers to specify which origins are allowed to access their resources using HTTP headers.
What are the different ways to handle asynchronous code in JavaScript?
Asynchronous code in JavaScript can be handled using callbacks, promises, async/await, or event listeners, depending on the use case and preference.
What is a generator function in JavaScript? Provide an example.
A generator function is a special type of function that can pause and resume its execution, allowing for iterative control flow. Example:
function generator() { *
yield 1;
yield 2;
yield 3;
}
const gen = generator();
console.log(gen.next().value); // Output: 1
console.log(gen.next().value); // Output: 2
console.log(gen.next().value); // Output: 3
What is a decorator in JavaScript? Provide an example.
Decorators are a design pattern in JavaScript used to modify the behavior of functions ormethods dynamically. Example:
function logger(target, name, descriptor) {
const original = descriptor.value;
descriptor.value = function(...args) {
console.log(Calling ${name} with arguments: ${args);
return original.apply(this, args);
};
return descriptor;
}
class MyClass {
@logger
myMethod() {
// Method logic
}
}
How can you handle errors in promises?
Errors in promises can be handled using the .catch() method or by chaining a .then() method with a second argument for error handling.
What is the difference between for…in and for…of loops?
 The for…in loop iterates over the enumerable properties of an object, while the for…of loop iterates over the iterable elements of an array, string, or other iterable objects.
What is the purpose of the async and await keywords in JavaScript?
The async and await keywords are used to write asynchronous code in a synchronous manner, making it easier to work with promises. async marks a function as asynchronous, while await pauses the execution of the function until a promise is resolved.
How can you handle exceptions in asynchronous code?
Exceptions in asynchronous code can be handled using try…catch blocks inside async functions or by chaining a .catch() method to promise chains.
What is the difference between localStorage and sessionStorage in JavaScript?
localStorage and sessionStorage are both web storage objects used to store key-value pairs in a web browser. The main difference is that data stored in localStorage persists even after the browser is closed, while data stored in sessionStorage is cleared when the session ends or the browser is closed.
Table of Contents
Advertisement
