JavaScript Interview Questions & Answers

JavaScript is a high-level, interpreted programming language primarily used for web development. It is dynamic, weakly typed, prototype-based, and supports object-oriented, imperative, and functional programming styles.

var has function scope and can be redeclared, let has block scope and cannot be redeclared in the same scope, const is block-scoped and cannot be reassigned after initialization.

The primitive data types are: number, string, boolean, undefined, null, symbol (added in ES6), and bigint (added in ES2020).

You can use the typeof operator, which returns a string indicating the type of the operand. For example, typeof 42 returns 'number', typeof 'hello' returns 'string'.

Type coercion is the automatic or implicit conversion of values from one data type to another, such as converting a string to a number when performing mathematical operations.

Falsy values include false, 0, '', null, undefined, and NaN. All other values are considered truthy. When used in boolean contexts, falsy values evaluate to false, while truthy values evaluate to true.

== performs type coercion before comparison, while === (strict equality) checks both value and type without type conversion. For example, 1 == '1' is true, but 1 === '1' is false.

Objects can be created using object literals {key: value}, the new Object() constructor, Object.create() method, or using constructor functions and class syntax introduced in ES6.

Template literals are string literals allowing embedded expressions, multiline strings, and string interpolation. They use backticks `` and ${} for expression interpolation.

Function declaration uses the 'function' keyword and is hoisted, while function expression assigns a function to a variable and is not hoisted. Function expressions can be anonymous or named.

Arrow functions provide a concise syntax, have lexical 'this' binding, are always anonymous, and cannot be used as constructors. They use => syntax and have an implicit return for single expressions.

Destructuring allows unpacking values from arrays or properties from objects into distinct variables. It works with arrays, objects, and can have default values and rest syntax.

The spread operator (...) expands an array or object, while the rest operator collects multiple elements into an array. They are used in function arguments, array literals, and object literals.

Map is a collection that holds key-value pairs where keys can be of any type. Unlike objects, Maps maintain insertion order, are directly iterable, and have methods like set(), get(), has(), and delete().

ES6 modules provide a way to organize and share code using import and export statements. They support named exports, default exports, and can import specific parts of a module.

Default parameters allow you to specify default values for function parameters if no value or undefined is passed. They provide a way to handle missing arguments more elegantly.

Set is a collection of unique values of any type. It prevents duplicate values and offers methods like add(), delete(), has(), and clear() for managing elements.

Proxy objects allow you to create a wrapper around another object (target) that can intercept and redefine fundamental operations like getting, setting, and defining properties.

Generator functions use the function* syntax and return a generator object. They can pause and resume execution using yield keyword, enabling custom iteration and asynchronous programming patterns.

Object destructuring allows renaming variables and setting default values. For example: const {originalName: newName = defaultValue} = object enables both renaming and providing a fallback.

TypeScript is a superset of JavaScript that adds optional static typing, interfaces, and advanced type checking. It compiles to plain JavaScript and provides enhanced tooling and development experience.

Type annotations allow explicitly declaring variable types using syntax like let name: string = 'John'. They help catch type-related errors during development and improve code documentation.

Union types allow a variable to have multiple possible types, defined using the | operator. For example, let id: number | string enables a variable to hold either a number or a string.

Type inference automatically determines variable types based on assigned values. Type assertion allows explicitly telling the compiler a specific type using 'as' keyword or angle-bracket syntax.

Enums are a way to define a set of named constants. By default, they are number-based, but can be string-based. They improve code readability and provide type safety.

'any' disables type checking and allows any operation, while 'unknown' is a type-safe counterpart that requires type checking or type assertion before performing operations.

Type guards are runtime checks that help narrow down the type of a variable within a conditional block. They include typeof, instanceof, and user-defined type predicates.

Optional properties use the ? symbol, allowing properties to be omitted. Readonly properties use the readonly keyword to prevent modification after initialization.

Interfaces are extensible and can be merged, while types are more flexible and can use unions and intersections. Interfaces are preferred for object shapes, and types for complex types.

Tuple types allow defining an array with a fixed number of elements where each element can have a different type. They provide more strict type checking compared to regular arrays.

Generics allow creating reusable components that can work with multiple types while maintaining type safety. They use angle brackets to define type parameters that are determined at runtime.

Generic constraints use the extends keyword to limit the types that can be used with a generic. They allow specifying required properties or inheritance relationships for type parameters.

Mapped types allow creating new types by transforming properties of existing types. They use a syntax like {[P in keyof T]: NewType} to modify type definitions dynamically.

Complex interfaces can include method signatures, optional properties, inheritance, and index signatures. They provide a comprehensive way to define object structures with type checking.

Conditional types allow creating types that depend on type relationships, using a ternary-like syntax. They enable advanced type manipulations based on type conditions.

Generic functions can infer type parameters automatically based on argument types. This allows writing flexible functions that maintain type safety without explicit type annotations.

Utility types like Partial, Readonly, Pick, and Omit provide ways to transform existing types. They help create new types by modifying property requirements and selections.

Namespaces provide a way to organize code and prevent global namespace pollution. Modules use import/export syntax for code sharing and encapsulation, supporting both internal and external modules.

Ambient declarations use the declare keyword to describe the shape of existing JavaScript libraries or global variables without providing implementation, enabling type checking for external code.

Decorators are special declarations that modify classes, methods, properties, or parameters. They provide a way to add metadata or modify behavior during class definition.

jQuery is a fast, lightweight JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions. It provides a concise syntax and cross-browser compatibility.

jQuery supports CSS-style selectors like element ($('div')), class ($('.classname')), ID ($('#idname')), attribute ($('[attribute]')), and complex selectors combining multiple conditions.

jQuery uses methods like .text(), .html(), .val(), .attr(), .css() to read and modify element content, attributes, and styles. Chaining allows performing multiple operations in a single statement.

.html() returns or sets the HTML content inside an element, while .text() returns or sets only the text content, automatically escaping HTML tags.

Method chaining allows executing multiple jQuery methods on the same selection in a single statement. Each method returns the jQuery object, enabling consecutive method calls without intermediate variables.

jQuery provides .addClass(), .removeClass(), .toggleClass(), and .hasClass() methods to manipulate CSS classes dynamically on selected elements.

jQuery filters allow selecting elements based on their index, content, or state. Examples include :first, :last, :even, :odd, :contains(), and custom filters using .filter() method.

.each() method iterates over jQuery selections, allowing custom processing for each element. It provides access to the current element and index through callback function parameters.

jQuery provides .show(), .hide(), .toggle() methods for changing element visibility. These methods can include optional speed and callback parameters for animations.

.data() method allows storing and retrieving custom data associated with DOM elements. It provides a way to attach metadata without modifying HTML attributes.

jQuery provides .on() method for attaching event handlers, supporting multiple events, delegation, and custom namespaced events. Older methods like .click(), .hover() are also available.

Event delegation allows attaching a single event handler to a parent element that handles events for multiple child elements. It improves performance and works with dynamically added elements.

.bind() attaches events to existing elements, .live() (deprecated) worked for current and future elements, .delegate() provided more efficient event binding, and .on() is the modern, recommended method.

Use event.preventDefault() to stop the default action of an event. In jQuery, return false in the event handler also prevents the default behavior and stops event propagation.

jQuery provides methods like .append(), .prepend(), .after(), .before(), .remove(), .empty() for dynamically modifying the DOM structure and content.

.width() and .height() methods retrieve or set the dimensions of elements. Variants like .innerWidth(), .outerWidth() include padding and border measurements.

.clone() method creates a deep copy of selected elements. It can optionally include event handlers when passed true as an argument.

jQuery provides methods like .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .animate() for creating visual transitions. Custom animations can be defined with specific CSS properties and durations.

.queue() method manages the sequence of function calls, allowing custom animation and effect queuing. It helps create complex, multi-step animations and interactions.

.offset() returns the current coordinates relative to the document, .position() returns coordinates relative to the offset parent, and .scrollTop()/.scrollLeft() handle scroll positions.

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It has three states: pending, fulfilled, or rejected, and provides .then(), .catch(), and .finally() methods.

Async/await is syntactic sugar for Promises, making asynchronous code look and behave more like synchronous code. async functions always return a Promise, and await pauses execution until a Promise is resolved.

Promise.all() waits for all Promises to resolve and returns an array of results, while Promise.race() returns the result of the first resolved or rejected Promise.

Use .catch() method to handle errors in Promises. In async/await, use try/catch blocks to catch and handle Promise rejections and other asynchronous errors.

Promises provide better error handling, avoid callback hell, support chaining, allow parallel execution, and make asynchronous code more readable and manageable.

Promise chaining allows sequential execution of asynchronous operations by returning Promises from .then() methods. Each .then() can transform data or return a new Promise.

The Event Loop is a mechanism that handles asynchronous operations in JavaScript. It manages the call stack, callback queue, and microtask queue, enabling non-blocking I/O and concurrent execution.

Create a Promise using the Promise constructor, which takes a function with resolve and reject parameters. Inside this function, perform asynchronous operations and call resolve or reject accordingly.

Microtasks (Promise callbacks, queueMicrotask()) have higher priority and are processed before macrotasks (setTimeout, setInterval, I/O). This affects the order of execution in asynchronous programming.

The fetch() function returns a Promise that resolves with a Response object. It provides a modern, Promise-based way to make HTTP requests, with methods like .json(), .text() for parsing responses.

JavaScript has several error types: SyntaxError, ReferenceError, TypeError, RangeError, URIError, and EvalError. Each represents a specific kind of runtime or compilation error.

try-catch-finally is used for error handling. The try block contains code that might throw an error, catch block handles the error, and finally block executes regardless of whether an error occurred.

The throw statement allows manually generating errors. You can throw any expression, including custom Error objects, enabling precise error handling and custom error types.

Console methods like .log(), .error(), .warn(), .table(), .trace() help inspect variables, log messages, and track code execution. Browser DevTools provide advanced debugging features.

Source maps provide a mapping between compiled/minified code and original source code. They enable debugging of transpiled or bundled JavaScript by showing original source locations.

Breakpoints pause code execution at specific lines, allowing inspection of variables, call stack, and program state. Browser DevTools support conditional breakpoints and event breakpoints.

window.onerror and window.addEventListener('error') allow capturing unhandled errors globally. In Promise contexts, window.onunhandledrejection handles unhandled Promise rejections.

Create custom error classes by extending the Error class. Add custom properties and methods to provide more context and handling capabilities for specific error scenarios.

Console logging levels include .log() (general), .info() (informational), .warn() (warnings), .error() (errors). Each provides different visual cues in browser DevTools.

Defensive programming involves anticipating potential errors, validating inputs, using type checks, providing default values, and implementing robust error handling to prevent unexpected failures.

Strategies include minimizing DOM manipulation, using efficient selectors, leveraging browser caching, reducing HTTP requests, implementing lazy loading, and using performance profiling tools.

Memoization is an optimization technique that caches function results based on input parameters. It prevents redundant computations by storing and reusing previously calculated results.

Debouncing delays function execution until after a specified wait time, while throttling limits function calls to a maximum frequency. Both techniques improve performance for event-heavy operations.

Optimize memory by avoiding memory leaks, using weak references, minimizing closures, releasing object references, and using efficient data structures and algorithms.

Code splitting breaks application code into smaller chunks, loaded on-demand. Lazy loading defers loading of non-critical resources until they are needed, improving initial load performance.

Web Workers enable running scripts in background threads, preventing long-running tasks from blocking the main UI thread. They improve performance for CPU-intensive operations.

Use browser DevTools Performance tab, console.time() and console.timeEnd(), performance.now(), and external profiling tools to measure and analyze code execution time and memory usage.

Best practices include using strict mode, avoiding global variables, minimizing DOM queries, preferring local variables, using efficient loops, and following SOLID principles.

Virtual DOM is a lightweight copy of the actual DOM, used by libraries like React to minimize direct DOM manipulation. It reduces performance overhead by batching and optimizing updates.

For loops are generally fastest, while forEach() is more readable, and for...of loops are best for iterables. Array methods like .map(), .filter() are convenient but can be less performant for large datasets.