Question 1

What is JavaScript and what are its key features?

Accepted Answer

JavaScript is a high-level, interpreted scripting language that conforms to the ECMAScript specification. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles. Key features: dynamic typing, first-class functions, prototype-based inheritance, event-driven architecture, and asynchronous programming with promises and async/await.

Question 2

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

Accepted Answer

'var' is function-scoped and can be redeclared; it is hoisted and initialized with undefined. 'let' is block-scoped, cannot be redeclared in the same scope, and is hoisted but not initialized (temporal dead zone). 'const' is block-scoped, cannot be reassigned, and must be initialized at declaration. Use 'const' by default, 'let' when reassignment is needed, and avoid 'var' in modern code.

Question 3

What is hoisting in JavaScript?

Accepted Answer

Hoisting is a behavior where variable and function declarations are moved to the top of their containing scope during compilation. Variables declared with 'var' are hoisted and initialized with 'undefined'. Function declarations are hoisted completely. 'let' and 'const' are hoisted but not initialized, leading to a temporal dead zone if accessed before declaration.

Question 4

Explain the difference between '==' and '===' operators.

Accepted Answer

'==' is the abstract equality operator; it performs type coercion if the types are different. '===' is the strict equality operator; it checks both value and type without coercion. For example, 1 == '1' is true, but 1 === '1' is false. Always use '===' to avoid unexpected behavior and improve code predictability.

Question 5

What is a closure and why is it useful?

Accepted Answer

A closure is a function that remembers its lexical scope even when the function is executed outside that scope. It is created when a function is defined inside another function and has access to the outer function's variables. Use cases: data privacy (module pattern), function factories, and maintaining state in callbacks. Closures are fundamental to functional programming in JavaScript.

Question 6

Explain the concept of 'this' in JavaScript.

Accepted Answer

'this' refers to the execution context of a function. Its value depends on how the function is called: in a method call, 'this' refers to the object; in a regular function call, 'this' refers to the global object (strict mode: undefined); in an event handler, it refers to the element; in arrow functions, 'this' is lexically bound to the enclosing scope. 'this' can be explicitly set using call, apply, or bind.

Question 7

What are arrow functions and how are they different from regular functions?

Accepted Answer

Arrow functions are a concise syntax for writing functions using =>. They do not have their own 'this', 'arguments', 'super', or 'new.target'; they inherit from the enclosing lexical scope. They cannot be used as constructors and are not hoisted. They are ideal for callbacks and functions that need to preserve the surrounding 'this'.

Question 8

Explain the event loop and how JavaScript handles asynchronous operations.

Accepted Answer

JavaScript is single-threaded but uses an event loop to manage asynchronous operations. The event loop continuously checks the call stack and the task queue. When the call stack is empty, it picks the first task from the queue and pushes it to the stack. This allows non-blocking I/O. Microtasks (promises) have higher priority than macrotasks (setTimeout, setInterval).

Question 9

What are promises and how do they work?

Accepted Answer

Promises are objects representing the eventual completion (or failure) of an asynchronous operation. They have three states: pending, fulfilled (resolved), and rejected. Promises are chainable using .then() for success, .catch() for errors, and .finally() for cleanup. They avoid callback hell and enable better error handling.

Question 10

Explain async/await and how it relates to promises.

Accepted Answer

async/await is syntactic sugar built on top of promises. Declaring a function with 'async' makes it return a promise. The 'await' keyword pauses execution until the promise settles, making asynchronous code look synchronous. It improves readability and error handling with try/catch. Under the hood, it still uses promises.

Question 11

What is the DOM and how do you interact with it?

Accepted Answer

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page as a tree of nodes. JavaScript interacts with the DOM using methods like document.getElementById, document.querySelector, element.addEventListener, element.textContent, etc. The DOM API allows manipulation of structure, style, and content dynamically.

Question 12

What is event delegation and why is it used?

Accepted Answer

Event delegation is a technique where a single event listener is attached to a parent element to handle events for its child elements, relying on event bubbling. It reduces memory usage, improves performance, and works for dynamically added elements. It's implemented by checking the event.target to identify which child triggered the event.

Question 13

Explain the difference between 'innerHTML' and 'textContent'.

Accepted Answer

innerHTML returns or sets the HTML content inside an element, parsing HTML tags. textContent returns or sets the plain text content, ignoring any HTML tags. Use textContent for performance and security (avoids XSS), and innerHTML only when you need to insert HTML markup safely (with sanitization).

Question 14

What is the difference between 'null' and 'undefined'?

Accepted Answer

'undefined' is a variable that has been declared but not assigned a value, or a property that does not exist. It is a primitive value. 'null' is an assignment value that represents no value or empty object reference; it is also a primitive. 'undefined' is the default for uninitialized variables; 'null' must be explicitly assigned.

Question 15

What are the different data types in JavaScript?

Accepted Answer

JavaScript has two categories: Primitive types: String, Number, Boolean, Undefined, Null, Symbol (ES6), BigInt. Reference types: Object, Array, Function, Date, RegExp, etc. Primitive types are immutable and stored on the stack; reference types are mutable and stored on the heap.

Question 16

Explain the concept of prototypal inheritance.

Accepted Answer

Every JavaScript object has an internal [[Prototype]] property that points to another object. When accessing a property, the engine first checks the object itself, then its prototype, and so on up the chain. This is prototypal inheritance. Functions have a 'prototype' property that is used when creating objects with 'new'. ES6 introduced 'class' syntax which is syntactic sugar over prototypes.

Question 17

What is the difference between a 'class' and a 'function constructor'?

Accepted Answer

Class syntax (ES6) is a cleaner way to create constructor functions and handle inheritance. It supports 'constructor', 'super', and 'extends' keywords, and is easier to read. However, classes are syntactic sugar over prototypes; they are not a new object-oriented model. Function constructors are the pre-ES6 way and still work.

Question 18

Explain the 'spread' and 'rest' operators.

Accepted Answer

Spread (...) expands an iterable (array, string) into individual elements. Used in array literals, function calls, and object literals. Rest (...) collects remaining arguments into an array. Used in function parameters and destructuring. Both use the same syntax but differ in context.

Question 19

What is destructuring in JavaScript?

Accepted Answer

Destructuring is a concise way to extract values from arrays or properties from objects into distinct variables. Array destructuring: [a, b] = [1, 2]. Object destructuring: {name, age} = person. It supports default values, rest elements, and nested destructuring.

Question 20

Explain the difference between 'map()', 'filter()', and 'reduce()'.

Accepted Answer

map() transforms each element of an array and returns a new array of the same length. filter() returns a new array containing elements that pass a test (predicate). reduce() accumulates array elements into a single value by applying a function cumulatively. They are higher-order functions used in functional programming.

Question 21

What is a 'callback' and what is 'callback hell'?

Accepted Answer

A callback is a function passed as an argument to another function, to be executed later. Callback hell (pyramid of doom) occurs when multiple nested callbacks make code hard to read and maintain. Solutions: use promises, async/await, or modularize the code.

Question 22

Explain 'currying' and 'partial application'.

Accepted Answer

Currying is transforming a function that takes multiple arguments into a sequence of functions that each take a single argument (e.g., f(a,b,c) -> f(a)(b)(c)). Partial application is fixing a few arguments to produce a new function that takes the remaining arguments. Both are techniques in functional programming to create reusable functions.

Question 23

What is the 'new' operator and what does it do?

Accepted Answer

The 'new' operator creates an instance of a user-defined object type or built-in constructor. It does: 1) creates a new empty object, 2) sets the prototype to the constructor's prototype, 3) binds 'this' to the new object, 4) executes the constructor, and 5) returns the object unless the constructor returns a non-primitive.

Question 24

Explain the difference between 'call', 'apply', and 'bind'.

Accepted Answer

All three are used to set the 'this' value in a function. call() invokes the function with a given 'this' and arguments passed individually. apply() is similar but takes arguments as an array. bind() returns a new function with a bound 'this' value, which can be called later. They are used for borrowing methods and partial application.

Question 25

What is the 'typeof' operator and what are its quirks?

Accepted Answer

typeof returns a string indicating the type of the operand. Quirks: typeof null returns 'object' (historical bug), typeof function returns 'function', and typeof array returns 'object'. To check for array, use Array.isArray(). typeof is useful for detecting primitive types but limited for objects.

Question 26

Explain the concept of 'memoization' in JavaScript.

Accepted Answer

Memoization is an optimization technique that caches the results of expensive function calls. It stores the results of computations and returns the cached result when the same inputs occur again. Implemented using closures and objects to store cache. It improves performance for functions with repeated inputs.

Question 27

What is the 'Symbol' data type and when is it used?

Accepted Answer

Symbol is a primitive data type introduced in ES6. Each symbol is unique and immutable. They are used as object property keys to avoid name collisions. They are useful for creating private properties or well-known symbols (e.g., Symbol.iterator) that enable built-in behaviors.

Question 28

Explain 'template literals' and their features.

Accepted Answer

Template literals are string literals using backticks (`). They support multi-line strings, string interpolation with ${expression}, and tagged templates (function processing). They are more readable and powerful than string concatenation.

Question 29

What is the 'Set' and 'Map' data structures in JavaScript?

Accepted Answer

Set is a collection of unique values (no duplicates). Map is a collection of key-value pairs where keys can be any type (not just strings). Both provide efficient operations like add, delete, and has. They are iterable and used for storing collections with better performance than plain objects in certain scenarios.

Question 30

Explain the 'WeakSet' and 'WeakMap' and their differences from Set/Map.

Accepted Answer

WeakSet and WeakMap hold 'weak' references to objects, allowing them to be garbage-collected if no other references exist. They are not iterable and have limited methods. They are used for storing private data or metadata without preventing garbage collection.

Question 31

What is the 'Proxy' object and how is it used?

Accepted Answer

A Proxy wraps an object and intercepts operations (get, set, delete, etc.) via traps. It is used for validation, logging, access control, and virtualization. It provides metaprogramming capabilities. Example: new Proxy(target, handler) where handler defines traps.

Question 32

Explain the difference between 'Object.freeze()' and 'Object.seal()'.

Accepted Answer

Object.freeze() prevents adding/removing properties and makes existing properties read-only (non-writable, non-configurable). Object.seal() prevents adding/removing properties but allows modifications to existing properties (configurable: false, but writable remains true).

Question 33

What is the 'Debouncing' and 'Throttling' in JavaScript?

Accepted Answer

Debouncing ensures a function is called only after a certain period of inactivity (e.g., after typing stops). Throttling limits the rate of function calls (e.g., once per second during scrolling). Both are used for performance optimization in event handlers like resize, scroll, and input.

Question 34

Explain the concept of 'pollution of global namespace' and how to avoid it.

Accepted Answer

Polluting the global namespace means adding variables/functions to the global object, leading to name collisions. Avoid by: using IIFE (Immediately Invoked Function Expression), modules (ES6 modules), and avoiding var declarations globally. Use block-scoped 'let'/'const' and encapsulate code.

Question 35

What are 'ES6 modules' and how do they work?

Accepted Answer

ES6 modules allow splitting code into separate files, each with its own scope. Use 'export' to expose variables/functions and 'import' to use them. Modules are loaded asynchronously and support default exports. They help in maintaining large codebases and enable tree-shaking.

Question 36

Explain the 'async' attribute vs 'defer' attribute in script tags.

Accepted Answer

Both are used with external scripts. 'async' downloads the script without blocking HTML parsing and executes it as soon as it's ready, potentially out of order. 'defer' downloads the script without blocking parsing and executes after HTML parsing is complete, in order. 'defer' is preferred for scripts that need DOM access.

Question 37

What is the 'fetch' API and how does it differ from XMLHttpRequest?

Accepted Answer

fetch() is a modern API for making HTTP requests. It returns promises, supports streaming, and has a simpler syntax. XMLHttpRequest is older, uses callbacks, and is more complex. fetch() requires handling of responses and errors explicitly. It is the recommended way for network requests.

Question 38

Explain the concept of 'CORS' (Cross-Origin Resource Sharing).

Accepted Answer

CORS is a security mechanism that restricts web applications from making requests to a different domain than the one that served the web page. It uses HTTP headers (like Access-Control-Allow-Origin) to allow cross-origin requests. It prevents malicious sites from accessing sensitive data.

Question 39

What is the 'localStorage' and 'sessionStorage'?

Accepted Answer

localStorage and sessionStorage are web storage APIs. localStorage persists data across browser sessions, while sessionStorage persists data only for the current tab/session. Both store data as key-value pairs and are synchronous. They have a storage limit of ~5MB and are used for client-side data persistence.

Question 40

Explain the 'Observer' pattern and how it's implemented in JavaScript.

Accepted Answer

The Observer pattern defines a one-to-many dependency between objects, so when one object changes state, all its dependents are notified. In JavaScript, it's implemented using event listeners, or with custom subject-observer classes. This is used in frameworks (e.g., React's state) and in event-driven programming.

Question 41

What is 'webpack' and why is it used?

Accepted Answer

Webpack is a module bundler that processes JavaScript and other assets (CSS, images) and bundles them into optimized files. It supports code splitting, tree shaking, hot module replacement, and allows using modern JavaScript features with loaders and plugins. It's essential for build pipelines.

Question 42

Explain the concept of 'JSX' and how it relates to JavaScript.

Accepted Answer

JSX is a syntax extension for JavaScript, used with React, that allows writing HTML-like markup inside JavaScript. It is not valid JavaScript; it is transformed by tools like Babel into React.createElement calls. JSX makes UI code more readable and maintainable.

Question 43

What is the 'React' framework and its core principles?

Accepted Answer

React is a declarative, component-based library for building UIs. It uses a virtual DOM to optimize updates, follows one-way data flow (props/state), and encourages reusable components. React uses JSX and is often paired with state management libraries (Redux, Zustand).

Question 44

Explain the concept of 'hooks' in React.

Accepted Answer

Hooks are functions that allow using state and other React features in functional components. Examples: useState, useEffect, useContext, useReducer. They replace class components and provide a more direct API for state and side effects.

Question 45

What is the 'event loop' in Node.js and how is it different from the browser?

Accepted Answer

Node.js event loop is similar but operates on a server environment. It includes phases: timers, pending callbacks, idle/prepare, poll, check, close callbacks. Node.js uses libuv for cross-platform async I/O. The browser event loop handles DOM events, requests, etc. Both are based on the same principle but with different APIs.

Question 46

Explain the 'require' vs 'import' in Node.js.

Accepted Answer

require() is the CommonJS module system used in Node.js. It is synchronous and dynamic. import is the ES6 module syntax, which is asynchronous and static. In Node.js, import is supported with the 'type: module' or .mjs extension. import allows better static analysis and tree-shaking.

Question 47

What are 'streams' in Node.js and what are the types?

Accepted Answer

Streams are objects that allow reading/writing data continuously (chunk by chunk) without loading everything into memory. Types: Readable (reading), Writable (writing), Duplex (both read and write), Transform (modify data as it passes). Streams are efficient for handling large files, network requests, and real-time data.

Question 48

Explain the 'event emitters' in Node.js.

Accepted Answer

EventEmitters are objects that can emit events and register listeners. They are the foundation of Node.js's event-driven architecture. The 'events' module provides the EventEmitter class. Used in many core modules (fs, http, net) and custom modules.

Question 49

What is 'TypeScript' and how does it relate to JavaScript?

Accepted Answer

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds static types, interfaces, enums, and advanced type inference. It improves code quality, refactoring, and IDE support. It's widely used in large enterprise applications.

Question 50

What are some common design patterns used in JavaScript?

Accepted Answer

Common patterns: Module pattern (encapsulation), Singleton, Observer, Factory, Constructor, Prototype, Decorator, and Model-View-Controller (MVC). Modern frameworks like React and Angular incorporate many of these patterns.

Question 51

What is the future of JavaScript and what are the upcoming features?

Accepted Answer

JavaScript continues to evolve. Upcoming features (ES2024 and beyond) include: Decorators (phase 3), Temporal API (modern Date replacement), pipeline operator, record/tuple (immutable collections), and improved pattern matching. JavaScript will likely focus on better performance, simpler syntax, and more robust tooling.

JavaScript Interview Q&A