1. What is a closure in JavaScript?
Explanation: A closure is a function that retains access to its outer scope’s variables even after the outer function has returned. This allows the inner function to maintain a reference to the variables in its enclosing scope.
2. How does JavaScript handle asynchronous operations?
Explanation: JavaScript handles asynchronous operations using callbacks, promises, and async/await. Callbacks are functions passed as arguments to other functions. Promises represent the eventual completion (or failure) of an asynchronous operation. Async/await syntax provides a way to write asynchronous code in a synchronous manner.
3. What is the difference between var, let, and const?
Explanation: var is function-scoped and allows re-declaration. let and const are block-scoped. let allows reassignment but not re-declaration, while const does not allow reassignment or re-declaration.
4. Explain the concept of hoisting in JavaScript.
Explanation: Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope. This means variable and function declarations are processed before any code is executed. However, let and const are not initialized until their definition is evaluated.
5. What are the differences between == and ===?
Explanation: == checks for equality with type coercion, while === checks for equality without type coercion. === is generally preferred because it avoids unexpected type conversions.
6. What is event delegation in JavaScript?
Explanation: Event delegation is a technique where a single event listener is added to a parent element to manage events for multiple child elements. This improves performance by reducing the number of event listeners attached to the DOM.
7. Describe the use of bind, call, and apply methods.
Explanation: bind creates a new function with this set to the provided value. call invokes a function with this set to the provided value and arguments passed individually. apply is similar to call but arguments are passed as an array.
8. What is a promise, and how does it work?
Explanation: A promise is an object representing the eventual completion or failure of an asynchronous operation. It has three states: pending, fulfilled, and rejected. Promises allow chaining using then and catch methods.
9. Explain the concept of prototypal inheritance.
Explanation: Prototypal inheritance is a feature in JavaScript where objects inherit properties and methods from other objects. Each object has a prototype, and properties are looked up through the prototype chain.
10. What is the this keyword, and how does it work?
Explanation: The this keyword refers to the context in which a function is executed. In the global scope, this refers to the global object (window in browsers). In methods, this refers to the object the method is called on.
11. What are higher-order functions in JavaScript?
Explanation: Higher-order functions are functions that can take other functions as arguments, return functions, or both. Examples include map, filter, and reduce.
12. How does the async/await syntax work in JavaScript?
Explanation: async functions return a promise and allow the use of await within them. await pauses the execution of the function until the promise is resolved or rejected.
13. Explain the concept of memoization.
Explanation: Memoization is an optimization technique where results of expensive function calls are cached. Subsequent calls with the same arguments return the cached result, improving performance.
14. What is the event loop, and how does it work?
Explanation: The event loop is a mechanism that allows JavaScript to handle asynchronous operations. It continuously checks the call stack and task queue, executing tasks in the call stack and moving tasks from the queue to the stack when the stack is empty.
15. What are generator functions?
Explanation: Generator functions are functions that can be paused and resumed. They use the function* syntax and the yield keyword to return multiple values over time.
16. How does the Proxy object work in JavaScript?
Explanation: The Proxy object allows you to create a wrapper for another object, intercepting and redefining fundamental operations like property access, assignment, enumeration, and function invocation.
17. What are symbols in JavaScript?
Explanation: Symbols are unique and immutable data types introduced in ES6. They are often used as object property keys to create private or non-conflicting properties.
18. Explain the use of Map and Set.
Explanation: Map is a collection of keyed data items, similar to an object but with any type of key. Set is a collection of unique values. Both provide methods for adding, deleting, and checking for values.
19. What is the difference between shallow copy and deep copy?
Explanation: A shallow copy copies an object’s top-level properties, while a deep copy copies all nested objects. Shallow copies share references with the original object, whereas deep copies do not.
20. How do you handle errors in JavaScript?
Explanation: Errors are handled using try, catch, finally, and throw. try block contains code that might throw an error. catch block handles the error. finally block executes code regardless of an error. throw is used to create custom errors.
21. Explain the concept of destructuring.
Explanation: Destructuring is a syntax for unpacking values from arrays or properties from objects into distinct variables. It provides a concise way to extract data.
22. What are template literals?
Explanation: Template literals are string literals allowing embedded expressions. They are enclosed by backticks () and support multi-line strings and interpolation with ${}`.
23. What is the module pattern in JavaScript?
Explanation: The module pattern is a design pattern that uses closures to create private and public methods and variables, promoting encapsulation and reducing global scope pollution.
24. How do let and const declarations help avoid common JavaScript issues?
Explanation: let and const provide block scope, preventing issues related to variable hoisting and re-declaration. They help create more predictable and error-free code.
25. What is the spread operator, and how is it used?
Explanation: The spread operator (...) allows an iterable to be expanded in places where zero or more arguments or elements are expected. It is used for copying arrays, concatenating arrays, and spreading elements in function calls.
26. What are arrow functions, and how do they differ from regular functions?
Explanation: Arrow functions provide a concise syntax for writing functions. They do not have their own this, arguments, super, or new.target bindings, making them useful for non-method functions.
27. How does JavaScript’s event bubbling work?
Explanation: Event bubbling is a propagation mechanism where an event starts at the target element and bubbles up to the root. Event handlers on parent elements can capture events from child elements.
28. What are weak references in JavaScript?
Explanation: Weak references (like WeakMap and WeakSet) hold references to objects that do not prevent garbage collection. They are useful for keeping track of objects without preventing their cleanup.
29. Explain the concept of debouncing and throttling.
Explanation: Debouncing limits the rate at which a function is called by postponing its execution until a certain time has passed since the last call. Throttling limits the number of times a function can be called over a specified period.
30. How do default parameters work in JavaScript?
Explanation: Default parameters allow function parameters to have default values if no argument is provided or if undefined is passed. This simplifies handling optional arguments.
31. What is a singleton pattern, and how is it implemented in JavaScript?
Explanation: The singleton pattern ensures that a class has only one instance and provides a global point of access to it. It is implemented by creating a class with a static method that returns the instance.
32. How do you perform deep cloning of an object?
Explanation: Deep cloning can be performed using libraries like Lodash’s _.cloneDeep, or by serializing and deserializing the object using JSON.stringify and JSON.parse. However, the latter does not handle functions, Date, undefined, or circular references.
33. What is an IIFE, and why is it used?
Explanation: An IIFE (Immediately Invoked Function Expression) is a function that is executed immediately after its definition. It is used to create a local scope and avoid polluting the global namespace.
34. Explain the difference between synchronous and asynchronous code.
Explanation: Synchronous code is executed sequentially, blocking further execution until the current operation completes. Asynchronous code allows execution to continue without waiting for the current operation to complete, using callbacks, promises, or async/await.
35. What are decorators, and how are they used?
Explanation: Decorators are functions that modify the behavior of classes or class members. They are used to add metadata, log access, perform validations, or alter methods. Decorators are proposed for future JavaScript versions and are used in some frameworks like Angular.
36. What is the difference between for...of and for...in?
Explanation: for...of iterates over iterable objects (arrays, strings, maps, sets), providing values. for...in iterates over enumerable properties of an object, providing keys.
37. How do you handle deep property access in objects safely?
Explanation: Deep property access can be handled safely using optional chaining (?.) which short-circuits and returns undefined if any intermediate property is null or undefined.
38. What are mixins, and how are they used in JavaScript?
Explanation: Mixins are objects or classes that provide methods to other classes without using inheritance. They allow code reuse by extending a class’s functionality. Mixins are typically used with Object.assign or similar methods.
39. Explain the concept of reactivity in JavaScript frameworks.
Explanation: Reactivity refers to the automatic tracking and updating of data changes in JavaScript frameworks like Vue.js and React. It ensures that the UI stays in sync with the underlying data model.
40. How do you manage state in JavaScript applications?
Explanation: State management involves keeping track of an application’s state and updating it in response to user interactions or other events. Libraries like Redux, MobX, and Context API are used for state management in larger applications.
41. What are Tagged Template Literals, and how are they used?
Explanation: Tagged template literals are functions that process template literals. They allow you to parse template strings with custom logic, making them useful for creating domain-specific languages (DSLs) or safe HTML templates.
42. Explain the concept of tail call optimization.
Explanation: Tail call optimization is a technique where the last function call in a function is optimized to avoid adding a new stack frame. This reduces the call stack size and prevents stack overflow errors in recursive functions.
43. What are Async Iterators and Generators?
Explanation: Async iterators allow you to iterate over asynchronous data sources using for await...of loops. Generators are functions that can be paused and resumed, producing a sequence of values on each call to next().
44. What is the Reflect API in JavaScript?
Explanation: The Reflect API provides a set of static methods for interceptable JavaScript operations similar to the Proxy object. It standardizes low-level operations, making them more predictable and easier to use.
45. How do you implement a binary search algorithm in JavaScript?
Explanation: A binary search algorithm finds the position of a target value within a sorted array. It repeatedly divides the search interval in half, comparing the target value to the middle element until the target is found or the interval is empty.
46. What are WeakMap and WeakSet, and how do they differ from Map and Set?
Explanation: WeakMap and WeakSet are collections that hold weak references to their keys (in WeakMap) or values (in WeakSet). Unlike Map and Set, they do not prevent garbage collection and cannot be iterated.
47. Explain the Decorator pattern.
Explanation: The decorator pattern is a design pattern that allows behavior to be added to individual objects dynamically. It involves wrapping the original object with a decorator object that adds new behaviors or responsibilities.
48. How do you handle large datasets in JavaScript?
Explanation: Handling large datasets involves techniques like pagination, lazy loading, virtual scrolling, and using Web Workers for offloading heavy computations to prevent UI blocking.
49. What are the benefits and drawbacks of using TypeScript over JavaScript?
Explanation: TypeScript provides static typing, which can catch errors at compile-time, improve code readability, and enhance tooling support. However, it adds complexity to the build process and requires additional learning for JavaScript developers.
50. How do you optimize JavaScript performance in web applications?
Explanation: Optimizing JavaScript performance involves techniques like code splitting, lazy loading, minimizing DOM manipulation, using efficient data structures, avoiding memory leaks, and leveraging browser caching.
