Interview Questions

In JavaScript, paying attention to uppercase and lowercase letters is crucial because it's case-sensitive. That means even a tiny change, like using a capital letter instead of a lowercase one, can make a big difference. For example, "myVariable" and "myvariable" are seen as two distinct things in JavaScript.

let myVariable;
let myvariable;

Client-side JavaScript works its magic right in a user's web browser. It's all about creating those cool interactive effects and changing what's on the page dynamically.

On the other hand, server-side JavaScript does its job on the server. It takes care of the behind-the-scenes tasks, like managing requests, talking to databases, and getting data ready to send back to the user's browser. Two different places, but both using JavaScript to make things happen!

1. High-Level Language: JavaScript is a high-level language, meaning it's designed to be more human-readable, abstracted from machine code, and easier to understand and write.

2. Garbage Collected: JavaScript has automatic memory management. When objects are no longer needed, the garbage collector kicks in to clean up memory, making it easier for developers by handling memory deallocation.

3. Interpreted Language (JIT): JavaScript is typically interpreted by browsers' engines. Just-in-Time (JIT) compilation optimizes code execution at runtime, translating it into machine code on the fly for faster performance.

4. Multi-Paradigm: JavaScript supports multiple programming paradigms like object-oriented, imperative, and functional programming, allowing developers to choose different approaches as needed.

5. Prototype-Based Functions: JavaScript uses prototypes for object inheritance instead of traditional classes. Objects can inherit properties and behaviors directly from other objects, offering flexibility in object creation.

6. First-Class Functions: Functions in JavaScript are treated as first-class citizens, meaning they can be assigned to variables, passed as arguments to other functions, and returned from functions, enabling higher-order functions and functional programming techniques.

7. Dynamically Typed: JavaScript doesn't require explicit type declarations. Variable types are determined at runtime, allowing flexibility but also potentially introducing errors due to unexpected type conversions.

8. Single Threaded: JavaScript operates on a single thread, meaning it can only execute one operation at a time in a single call stack. This can lead to blocking operations if not managed well.

9. Non-Blocking Event Loop: Despite being single-threaded, JavaScript uses an event-driven, non-blocking I/O model. It handles asynchronous operations through event callbacks and timers, allowing for efficient handling of multiple tasks without blocking the main thread.

10. Platform Independent: JavaScript is supported across various platforms and devices due to its compatibility with web browsers, making it a versatile language for web development that isn't tied to a specific operating system. These features collectively contribute to JavaScript's versatility and functionality across a wide range of applications and development scenarios.

These features collectively contribute to JavaScript's versatility and functionality across a wide range of applications and development scenarios.

JavaScript is indeed a dynamically typed language. In dynamically typed languages like JavaScript, variable types are determined at runtime, allowing for more flexibility but sometimes leading to unexpected behavior if not carefully managed.

A non-blocking event loop is a clever way for software to manage many requests and events at once without slowing down the main operations. It keeps an eye out for new events, handles each one using its callback, and does it all in a loop. This way, the application stays responsive to other things going on while smoothly managing these events asynchronously. It's a technique widely used in web servers, network programming, and graphical user interfaces (GUIs) to keep things running smoothly without getting bogged down by one task.

In JavaScript, a symbol is a primitive data type that is used to create unique values. It is often used as an identifier for object properties to avoid naming conflicts. Symbols are created using the Symbol() function and can be used as keys in object literals or added as properties to objects.

const mySym = Symbol(8);

BigInt is a built-in data type in JavaScript that allows the representation of integers larger than 2^53 - 1, which is the maximum safe integer value in JavaScript. BigInt values are represented by appending the letter "n" to the end of an integer literal or by calling the BigInt() constructor function.

const bigNumber = BigInt(35445565654656);
const anotherBigNumber = 3454354543543543n;

High-level languages are more abstracted and user-friendly, designed to be closer to human language and easier to understand. They offer built-in features and are independent of the machine's architecture.

Low-level languages are preferred for embedded systems, operating systems, device drivers, and performance-critical applications due to their direct hardware control, resource optimization, and high performance.

High-level languages are more abstracted, closer to human language, and offer better readability. They're easier to learn and use, handling complex tasks with simpler syntax. Low-level languages are closer to machine code, offering direct hardware control, but they're less readable and more complex due to their proximity to hardware operations.

Developer tools are essential in web development for debugging, performance optimization, and efficiency. Some widely used tools include:

• 1. Chrome DevTools:
  • Inspect and modify HTML/CSS.
  • Debug JavaScript.
  • Analyze network and performance.
• 2. Visual Studio Code:
  • Intelligent code suggestions.
  • Built-in debugging.
  • Versatile extensions.
• 3. Webpack:
  • Bundles assets for optimization.

Type coercion in JavaScript refers to the automatic or explicit conversion of values from one data type to another. It occurs when values of different types are combined or compared in operations, forcing them to be converted to a common type for the operation to be executed.

Manual type conversion in JavaScript involves explicitly converting data from one type to another using built-in functions or methods provided by the language.

When creating identifiers in JavaScript, certain rules and conventions should be followed to maintain readability and ensure compatibility with the language's syntax. Read More

Reserved keywords in JavaScript are words that have predefined meanings or functionalities within the language. These keywords are reserved for specific purposes and cannot be used as identifiers (such as variable names, function names, or labels) in JavaScript code.

The let keyword in JavaScript is used to declare variables that are block-scoped. It was introduced in ES6 (ECMAScript 2015) and offers some differences compared to var, particularly in terms of scoping and hoisting.

let in JavaScript is for declaring variables with block-level scope. Unlike var, it doesn't hoist variables to the top of their scope. let restricts variable access to the block where it's defined, making code more predictable and preventing hoisting-related bugs compared to var.

The var keyword in JavaScript is used to declare variables. It was the primary way to declare variables in JavaScript before the introduction of let and const in ES6 (ECMAScript 2015). Understanding its behavior regarding scope and hoisting is crucial when using var.

var in JavaScript declares variables with function-level scope. It's hoisted to the top of its scope during compilation, initializing as undefined. This means the variable is accessible throughout the whole function or globally if outside any function. However, it can lead to unexpected behavior due to hoisting and lack of block-level scope. It's best to use let or const for clearer scoping and to avoid potential issues.

The const keyword in JavaScript is used to declare constants, which are variables whose values cannot be reassigned or redeclared once they have been initialized. Constants must be assigned a value at the time of declaration, and this value remains constant throughout the code execution.

It's important to note that while const prevents reassignment, for objects or arrays, their internal elements can still be changed, but you can't assign a completely new object or array to a const variable.

Alert boxes, while handy for displaying immediate messages, come with several limitations that can impact user interaction and customization:

• Limited Interaction: Alert boxes pause code execution and offer only an OK button, limiting user actions and interrupting flow.
• Customization Constraints: They lack styling options and display a standard system dialog, often not fitting the page design.
• No Input Collection: Alert boxes can't receive user input, hindering data collection or interactive tasks.

In JavaScript, the confirm() method is used to display a dialog box with a message and two buttons: "OK" and "Cancel." It's a built-in function that prompts the user to confirm or cancel an action, providing a Boolean response based on the user's choice Read more .

window.alert() displays a message in a dialog box, pausing the script until the user clicks OK. It's used for critical notifications but sparingly because it disrupts user interaction and script execution. Overuse can desensitize users and impact the user experience.

In JavaScript, the prompt() method displays a dialog box with a message prompting the user to input data. It allows users to enter text or data into an input field within the dialog box and returns the entered value as a string Read more .

Arithmetic operators in JavaScript perform mathematical operations on numeric values.

= (Assignment Operator): The = operator is used for assignment in many programming languages. It assigns the value on the right-hand side to the variable on the left-hand side. For example, x = 5; assigns the value 5 to the variable x.

== (Equality Operator): The == operator is used for equality comparison. It checks if the values on both sides are equal after performing type coercion. For instance, 5 == '5' will return true because it coerces the string to a number and then checks equality.

=== (Strict Equality Operator): The === operator is also used for equality comparison. However, unlike ==, it checks for strict equality without performing type coercion. It checks if both the values and their types are identical. For example, 5 === '5' will return false because the types are different (number vs. string).

Operator precedence in JavaScript defines the order in which different operators are evaluated when multiple operators are present in an expression. It determines the grouping of operands and operators based on their precedence levels.

In programming, a control structure refers to the blocks or constructs that enable you to control the flow of execution within a program. These structures determine the order in which individual statements or instructions are executed based on specified conditions.

A loop in programming is a control structure that allows the repeated execution of a block of code as long as a specified condition is true. It's used to automate repetitive tasks or iterate over collections of data, enabling efficient execution of code without the need for writing the same instructions multiple times.

The for...of loop in JavaScript is an iteration statement introduced in ECMAScript 6 (ES6) that simplifies the process of iterating over iterable objects, such as arrays, strings, maps, sets, and other iterable data structures. It provides a more concise and readable syntax compared to traditional for loops when working with collections Read more .

The for...in loop in JavaScript is used to iterate over the enumerable properties of an object. It traverses through all enumerable keys (property names) of an object, allowing you to access the values associated with those keys. It's commonly used for object iteration Read more .

Use a for loop when you know the exact number of iterations or when you are iterating over a collection (like arrays or lists). It's ideal for cases where the loop control is defined by a counter:

for (let i = 0; i < 10; i++) {
  // Executes 10 times
}

Use a while loop when the number of iterations is not known in advance and depends on a condition. It's best when the loop should continue until a particular condition is met:

while (condition) {
  // Executes as long as condition is true
}

break: break is a keyword that interrupts the current loop or switch block execution. When encountered, break immediately exits the loop or switch block, moving to the next statement after the loop or switch. It's commonly used to terminate a loop prematurely based on certain conditions, avoiding unnecessary iterations Read more .

continue: continue is a keyword used in loops to skip the current iteration and proceed to the next iteration. When continue is encountered, the loop execution immediately jumps to the next iteration, bypassing any remaining code within the loop for the current iteration. It's useful for skipping certain iterations based on specific conditions without completely exiting the loop.

The default case within a switch statement serves as a catch-all case, executing when none of the preceding case values match the expression provided to the switch. It's similar to the else statement in an if...else chain, executing when no specific case matches the given expression Read more.

In JavaScript, the switch statement is case sensitive, meaning it differentiates between uppercase and lowercase characters when matching cases. This sensitivity influences how the switch block evaluates and matches cases against the provided expression Read more.

The ECMA-262 specification is the official standard for JavaScript, defining the syntax, semantics, and behaviors of the language.

ISO/IEC 22275 is a standard that specifies the requirements for software engineering tools for the verification and validation of web content accessibility.

The separation of concerns principle is a design principle that advocates for dividing a computer program into distinct sections, each addressing a separate concern, such as presentation, data storage, and business logic.

In non-strict mode, JavaScript allows implicit global variable creation without var/let/const, octal integer literals, assignment to read-only properties without errors, extra function arguments, and use of reserved words as variable names. This can lead to unexpected bugs and is generally not recommended.

let and const have block-level scope while var has function-level scope. const cannot be reassigned after initialization while let and var can. var declarations are hoisted to the top of their scope, while let and const are not hoisted in the same way and will throw an error if accessed before declaration.

A string literal is a fixed sequence of characters enclosed in quotes ('hello' or "hello") and is the preferred approach. A string object is created using the String() constructor (new String('hello')) and is a wrapper object around the primitive. String literals are more efficient and easier to work with, and direct comparison with === may behave differently for string objects.

Implicit type conversion, also known as type coercion, is the automatic conversion of one data type to another by JavaScript during an operation. For example, adding a number to a string converts the number to a string and concatenates them. This can cause unexpected results if not understood.

Explicit type conversion, also known as type casting, is manually converting a value from one data type to another using built-in functions like parseInt(), parseFloat(), Number(), String(), or Boolean(). It gives developers full control over how types are converted.

Scoping defines the rules that determine how variables and functions are accessed during runtime. Variables declared outside any function have global scope and are accessible everywhere. Variables declared inside a function have local scope, accessible only within that function.

JavaScript has global scope (variables accessible anywhere in the code), function/local scope (variables accessible only within the function where declared), and block scope (variables declared with let or const inside a block like if or for, accessible only within that block).

Functional programming is a paradigm that emphasizes pure functions (same input always gives same output), immutability (data is not changed after creation), and higher-order functions (functions that take or return other functions). It leads to more predictable and testable code.

Functions can be created using a function declaration (function foo() {}), a function expression (const foo = function() {}), an arrow function (const foo = () => {}), or the Function constructor (new Function(...)). Function declarations and expressions are most common.

A function expression defines a function as part of an expression, typically by assigning it to a variable. Unlike function declarations, function expressions are not hoisted and can only be called after their definition. They can be anonymous or named.

An anonymous function is a function without a name, used inline or as a callback. It is commonly passed as an argument to other functions like setTimeout, addEventListener, or array methods like map and filter. It is defined and used where it is needed, rather than declared separately.

A function declaration is defined with the function keyword, is hoisted to the top of its scope, and can be called before its declaration. A function expression assigns a function to a variable, is not hoisted, and cannot be called before it is defined.

The main difference is how the this keyword is handled. In a function expression, this is dynamically bound to the calling context. In an arrow function, this is lexically bound and inherits the this value from the surrounding scope where the arrow function is defined.

Callback hell is a situation in asynchronous programming where multiple nested callbacks create deeply indented, hard-to-read code. It arises when operations depend on each other's results, leading to a pyramid of nested functions that are difficult to debug and maintain.

setTimeout() executes a function once after a specified delay in milliseconds. It returns a timer ID that can be passed to clearTimeout(id) to cancel the scheduled execution before it fires. For example: const id = setTimeout(fn, 1000); clearTimeout(id);

setInterval() repeatedly executes a function at a fixed time interval in milliseconds. It returns an interval ID that can be passed to clearInterval(id) to stop the repetition. Use clearInterval inside a setTimeout or an event handler to stop after a certain time or event.

Design patterns are proven, reusable solutions to commonly occurring problems in software design. Famous JavaScript design patterns include Singleton, Factory, Observer, Module, Constructor, Prototype, Adapter, Decorator, Command, and Iterator patterns.

The number type safely represents integers up to 2^53 - 1 (Number.MAX_SAFE_INTEGER). BigInt has no practical size limit and is created by appending n to an integer literal (123n) or using BigInt(). BigInt arithmetic always produces exact results without rounding, unlike number.

toFixed(n) formats a number to n decimal places as a string. toString(base) converts a number to a string in the given base. valueOf() returns the primitive numeric value. parseInt() parses a string to an integer. parseFloat() parses a string to a float. isNaN() checks if a value is NaN.

The Date object represents a specific moment in time and provides methods to work with dates and times. It can be created with new Date() (current time), new Date(milliseconds), new Date(dateString), or new Date(year, month, day, hour, minute, second).

Use the toLocaleString() method with a locale string and options object. For example, number.toLocaleString('fr-FR') formats a number in French style. You can also use Intl.NumberFormat and Intl.DateTimeFormat APIs for more precise control over formatting across different locales.

getElementById returns a single element by id. getElementsByTagName returns all elements with a given tag name. getElementsByClassName returns all elements with a specific class. querySelector returns the first element matching a CSS selector. querySelectorAll returns all matching elements as a NodeList.

A Node is any object in the DOM tree, including elements, text nodes, and comments. HTMLCollection is a live array-like collection of HTML elements returned by DOM methods like getElementsByTagName. An Element is a specific type of Node representing an HTML element with attributes and methods.

Event bubbling is the process where an event triggered on an inner element propagates outward through each parent element up to the document root. Each ancestor's event handlers are triggered in sequence as the event 'bubbles up' the DOM tree. This is the default behavior in JavaScript.

Event capturing is the phase where an event starts at the outermost element (document root) and propagates inward toward the target element. It occurs before the bubbling phase. To listen in the capturing phase, pass true as the third argument to addEventListener.

Event bubbling is a bottom-up approach where events start at the target element and propagate outward to the root. Event capturing is a top-down approach where events start at the root and move inward to the target. By default, JavaScript uses the bubbling phase for event handlers.

event.preventDefault() prevents the browser from executing its default behavior for an event. For example, it can stop a link from navigating to another page, prevent a form from submitting, or stop a checkbox from being checked. It does not stop event propagation.

An event listener is a function attached to a DOM element that waits for a specific event and executes code when it occurs. Add one using element.addEventListener(eventType, handler). Unlike inline event handlers, you can attach multiple listeners to the same element for the same event.

Use element.removeEventListener(eventType, handler) to remove a previously added listener. The exact same function reference used when adding must be passed - anonymous functions cannot be removed this way. For example: element.removeEventListener('click', handleClick).

Use document.createElement(tagName) to create a new element, set its properties (id, className, textContent), then attach it to the DOM with parentElement.appendChild(newElement) or parentElement.insertBefore(newElement, referenceElement).

BOM (Browser Object Model) objects represent the browser environment. Window is the top-level global object. History manages browsing history. Navigator provides browser and OS information. Screen gives display information. Location represents the current URL. LocalStorage provides persistent client-side key-value storage.

A JavaScript engine is a program that reads and executes JavaScript code. Famous engines include V8 (Google Chrome, Node.js), SpiderMonkey (Firefox), JavaScriptCore (Safari), and Chakra (Internet Explorer, early Edge). These engines interpret, compile, and optimize JavaScript at runtime.

The call stack is a data structure that tracks active function calls. When a function is called, its execution context is pushed onto the stack. When it returns, it is popped off. JavaScript is single-threaded, so only one function runs at a time, following the call stack order.

An execution context is the environment in which JavaScript code runs. It includes the variable environment (variables and function declarations), the scope chain, and the value of this. A new execution context is created for each function call and for the global scope.

Heap memory is the region of memory where dynamically allocated objects are stored at runtime. Objects, arrays, and functions are created in the heap. The JavaScript engine's garbage collector manages heap memory by automatically reclaiming memory from objects that are no longer reachable.

A compiler translates the entire source code into an executable before running, resulting in faster execution. An interpreter executes code line by line at runtime, which makes it easier to test and debug. Modern JavaScript engines use JIT (Just-In-Time) compilation, combining both approaches.

The this keyword refers to the object that owns the currently executing code. In a method, this is the object the method belongs to. In a global function, this is the global object (window). In arrow functions, this is inherited from the enclosing lexical scope. It can be set explicitly with call(), apply(), or bind().

In strict mode, the this keyword inside a regular function that is not called as a method is undefined, rather than the global object. This prevents accidental access to global properties and helps catch errors where this is used without a proper object context.

Primitives (numbers, strings, booleans, null, undefined, Symbol, BigInt) are immutable and stored by value - copying a primitive creates an independent copy. Objects (arrays, functions, objects) are mutable and stored by reference - copying an object variable copies the reference, not the data.

A shallow copy creates a new object with the same top-level properties, but nested objects still share the same references. Use the spread operator ({...original} or [...original]) or Object.assign({}, original) for a shallow copy. Changes to nested properties affect both the original and the copy.

A deep copy creates a completely independent clone of an object, including all nested objects. Use JSON.parse(JSON.stringify(obj)) for simple objects (no functions or special types), the spread operator for one-level nesting, or a library like Lodash's cloneDeep() for complex nested structures.

Destructuring is a syntax for extracting values from arrays or properties from objects into distinct variables. For arrays: const [a, b] = [1, 2]. For objects: const { name, age } = person. It makes code more concise and readable when working with complex data structures.

Destructuring cannot directly reverse an entire array, but you can swap two variables in a single line: [a, b] = [b, a]. This is a common use of array destructuring for value swapping. To reverse a full array, use Array.reverse() (mutating) or [...arr].reverse() (non-mutating).

A function can return multiple values by returning an array or an object. Use array destructuring: const [a, b] = getValues(). Use object destructuring: const { a, b } = getValues(). Returning an object is often clearer as the variable names are explicit.

Array destructuring uses square brackets and extracts values by position: const [a, b] = arr. Object destructuring uses curly braces and extracts values by property name: const { x, y } = obj. Both support renaming, default values, and rest patterns.

Use nested square brackets to match the nesting structure: const [a, b, [c, d]] = [1, 2, [3, 4]]. This assigns 1 to a, 2 to b, 3 to c, and 4 to d. The nested pattern must mirror the shape of the array being destructured.

Set default values using the = operator in the destructuring pattern: const [a = 1, b = 2] = arr for arrays and const { foo = 'default', bar = 0 } = obj for objects. The default is used only when the value is undefined.

Object destructuring is a technique to extract specific properties from an object and assign them to variables in a concise way. Using curly braces on the left side of an assignment, you can unpack named properties directly: const { name, age } = person.

Match variable names to property names: const { name, age } = person. Rename with a colon: const { name: fullName } = person. Set defaults: const { age = 25 } = person. Combine these: const { name: n = 'unknown', age: a = 0 } = person.

Use the rest operator (...) in destructuring to collect remaining items: const [first, ...rest] = arr collects all but the first element into rest. For objects: const { a, ...others } = obj. The rest variable must always be the last element in the pattern.

Use the colon syntax in object destructuring to create an alias: const { originalName: aliasName } = object. The property originalName is extracted from the object and assigned to the variable aliasName. This avoids naming conflicts or enables more descriptive variable names.

Use the = operator for each property: const { a = 10, b = 'hello' } = obj. If the property is missing or undefined in the object, the default value is used instead. You can combine renaming and defaults: const { name: n = 'unknown' } = obj.

Nested object destructuring extracts properties from nested objects using a matching nested curly brace syntax: const { name, address: { city } } = person. This accesses city from person.address in one statement, avoiding verbose property chain access.

Use destructuring syntax directly in the function parameter list: function greet({ name, age }) {}. When the function is called with an object, the specified properties are automatically extracted. You can also set defaults: function greet({ name = 'Guest', age = 0 } = {}) {}.

The spread operator (...) expands an iterable such as an array, string, or object into individual elements. It is used to copy arrays/objects, merge multiple arrays, spread array elements as function arguments, and convert iterables to arrays. It provides a clean, concise syntax for these operations.

The rest parameter (...) allows a function to accept an indefinite number of arguments by collecting them into an array. It must be the last parameter in the function signature. For example, function sum(...nums) {} collects all passed arguments into the nums array.

Both use the ... syntax but in opposite contexts. The spread operator is used to expand an iterable into individual elements (in function calls or array/object literals). The rest operator is used to collect multiple individual elements into an array (in function parameters or destructuring).

Define the function with the rest parameter as the last argument: function myFunc(...args) {}. All extra arguments passed to the function are collected into the args array. You can then use any array methods on args to process the variable inputs.

Short circuiting is the behavior where logical operators stop evaluating as soon as the result is determined. With &&, if the first operand is falsy, the second is skipped. With ||, if the first operand is truthy, the second is skipped. This enables concise conditional expressions.

The || (OR) operator returns the first truthy value, treating falsy values like 0, empty string, and false as triggers for the fallback. The ?? (nullish coalescing) operator only falls back when the left side is null or undefined, so it correctly handles 0, false, and empty string as valid values.

The nullish coalescing operator (??) returns the right-hand operand when the left-hand operand is null or undefined, otherwise it returns the left-hand operand. It provides default values specifically for null/undefined, unlike || which also triggers on any falsy value.

Optional chaining (?.) allows safe access to properties of potentially null or undefined objects. Instead of throwing a TypeError, it short-circuits and returns undefined. Benefits include cleaner code with fewer null checks, reduced risk of runtime errors when accessing deeply nested properties.

sort() works on all element types but converts them to strings by default, which can produce unexpected results for numbers (e.g. [10, 9, 2] sorts as [10, 2, 9]). Always provide a comparison function for non-string data, such as (a, b) => a - b for ascending numeric sort.

Pass a comparison function whenever the default lexicographic sorting is not appropriate. For numbers, dates, or objects, provide a custom comparator. For example, arr.sort((a, b) => a - b) for ascending numeric sort and arr.sort((a, b) => b.name.localeCompare(a.name)) for descending string sort on objects.

slice(start, end) returns a new array with elements from start to end (exclusive) without modifying the original array. splice(index, deleteCount, ...items) modifies the original array by removing, replacing, or inserting elements in place, and returns the removed elements.

forEach() is an array method that calls a function for each element but does not support break or continue. The for...of loop works with any iterable (arrays, strings, Maps, Sets) and supports break and continue for controlling iteration flow.

map() creates a new array by transforming each element using a callback. filter() creates a new array with only the elements that pass a test. reduce() accumulates all elements into a single output value. None modify the original array. All three are common tools in functional programming.

some() returns true if at least one element passes the given test, short-circuiting once a truthy result is found. every() returns true only if all elements pass the test, short-circuiting once a falsy result is found. some() is like an array-wide OR check; every() is like an AND check.

flat(depth) creates a new array with nested arrays concatenated up to the specified depth, default is 1. flatMap() first maps each element using a callback, then flattens the result by one level. flatMap(fn) is equivalent to arr.map(fn).flat(1) but more efficient.

An object literal ({}) directly creates an object with a concise syntax and is preferred for simple cases. Using new with a constructor function creates objects programmatically and supports inheritance patterns with prototype chains. ES6 classes provide cleaner syntax for the constructor approach.

Object.keys(obj) returns an array of the object's own enumerable property names. Object.values(obj) returns an array of the property values. Object.entries(obj) returns an array of [key, value] pairs. These methods are useful for iterating over or transforming object data.

A Set is a built-in data structure that stores unique values of any type in insertion order. Unlike arrays, Sets automatically ignore duplicate values. Key methods include add(), delete(), has(), clear(), and the size property. Sets are ideal for deduplication and membership checks.

WeakSet is a collection that stores only objects and holds weak references to them, meaning stored objects can be garbage collected if no other references exist. WeakSets are not iterable, have no size property, and are useful for tracking object presence without preventing garbage collection.

A Map is a built-in data structure that stores key-value pairs where keys can be of any type, not just strings. Maps maintain insertion order, have a size property, and provide set(), get(), has(), and delete() methods. They are more flexible than plain objects for key-value storage.

WeakMap is a collection of key-value pairs where keys must be objects and are held weakly. When a key object has no other references, it can be garbage collected and the WeakMap entry is removed automatically. WeakMaps are not iterable and are useful for private data or caching.

Chaining in Map means calling multiple map.set() calls in a single expression since set() returns the Map itself. For example: new Map().set('a', 1).set('b', 2).set('c', 3) creates a Map with three entries in one statement. This pattern makes initialization more concise.

In a Map, arrays are compared by reference, not by value. Two separate arrays with the same content are treated as different keys because they are different objects. So map.set([1,2], 'x') and map.set([1,2], 'y') create two separate entries. Only the same array object can retrieve its entry.

If the array contains [key, value] pairs, pass it directly to the Map constructor: const map = new Map([[key1, val1], [key2, val2]]). If the array has a different structure, use reduce() to transform it into [key, value] pairs first.

OOP (Object-Oriented Programming) in JavaScript is a paradigm that organizes code around objects that contain both data (properties) and behavior (methods). It promotes code reuse through inheritance, hides implementation details through encapsulation, and models real-world entities as objects.

The 6 OOP principles are: Encapsulation (bundling data and methods, hiding internals), Abstraction (exposing only essential features), Inheritance (child classes reuse parent behavior), Polymorphism (objects of different types used interchangeably), Composition (building from smaller objects), and Interface (defining interaction contracts).

A constructor function is a function used with the new keyword to create and initialize objects. It is named with an uppercase letter by convention. When called with new, a new object is created, this is bound to it, properties are assigned, and the object is returned automatically.

ES6 classes provide a cleaner, more familiar syntax for creating objects and implementing inheritance in JavaScript. They use the class keyword to define blueprints, constructor() for initialization, and the extends keyword with super() for inheritance. Internally, they still use prototypal inheritance.

Object.create(proto) creates a new object with its [[Prototype]] set to the specified proto object. The new object inherits all properties and methods from its prototype. It is a foundational way to implement prototypal inheritance without using constructor functions or classes.

Getters (get keyword) and setters (set keyword) in ES6 classes are special methods that control access to object properties. A getter retrieves a value and a setter updates it. They allow validation, computed values, and encapsulation. Access them like regular properties: obj.name.

If a property and its getter/setter share the same name, accessing the property calls the getter, which tries to access the same property, which calls the getter again, creating infinite recursion. This results in a 'Maximum call stack size exceeded' error. Use a backing property with a different name, often prefixed with an underscore.

A static method is defined with the static keyword inside a class and belongs to the class itself rather than to any instance. It is called directly on the class (MyClass.myMethod()) without needing to create an instance. Static methods are useful for utility functions related to the class.

Synchronous code runs line by line in a single thread, blocking execution until each operation completes. Asynchronous code allows other operations to run while waiting for slow tasks like network requests or timers. Asynchronous patterns include callbacks, Promises, and async/await.

AJAX (Asynchronous JavaScript and XML) is a technique for making asynchronous HTTP requests from a browser to a server without reloading the entire page. It enables dynamic content updates. Modern implementations use JSON rather than XML, and the Fetch API or XMLHttpRequest to make requests.

An API (Application Programming Interface) defines how software components interact. SOAP uses XML with strict contracts. REST uses HTTP methods (GET, POST, PUT, DELETE) for CRUD on resources. A Request is a client message to the server. A Response is the server's reply. Request Body contains payload data. Query Params pass extra info in the URL. JSON and XML are common data formats.

Server-client architecture separates a web app into a server (data storage and logic) and a client (user interface). JavaScript on the client makes HTTP requests to the server, which processes them and returns data. This enables dynamic, data-driven web applications without full page reloads.

A Promise represents the eventual success or failure of an asynchronous operation. The fetch() function makes HTTP requests and returns a Promise that resolves to a Response object. Together, they enable clean asynchronous network requests using .then()/.catch() or async/await.

Use .then(result => {}) on a Promise to handle fulfillment and .catch(error => {}) for rejections. Alternatively, use async/await with a try/catch block for more readable code. Both approaches allow you to work with the resolved value once the asynchronous operation completes.

Use the .catch() method after .then() to handle rejected Promises: promise.then(...).catch(error => {}). With async/await, wrap the await in a try/catch block. Always handle rejections to avoid unhandled promise rejection warnings and to gracefully recover from errors.

Create a Promise using new Promise((resolve, reject) => {}). Call resolve(value) when the asynchronous operation succeeds and reject(error) when it fails. Chain .then() to handle the resolved value and .catch() to handle errors.

async/await is syntax that makes asynchronous code look synchronous. Mark a function with async to make it return a Promise, then use await before a Promise to pause execution until it resolves. Use try/catch to handle errors. It is built on top of Promises and makes async code easier to read.

An async function always returns a Promise. The explicit return value becomes the resolved value of that Promise. Access it using await (inside another async function) or .then(). For example: const result = await myAsyncFn() or myAsyncFn().then(result => {}).

Use Promise.all([p1, p2, p3]) to run multiple Promises concurrently. It returns a new Promise that resolves when all input Promises resolve, providing an array of results. If any Promise rejects, Promise.all() rejects immediately with that error.

Wrap potentially failing code in a try block. If an error is thrown, execution jumps to the catch block where you handle the error. The optional finally block always runs regardless of success or failure, making it ideal for cleanup tasks like closing connections.

Promise.race() resolves or rejects as soon as the first Promise settles. Promise.allSettled() waits for all Promises to settle and returns an array of outcome objects (with status, value or reason) regardless of success or failure. Promise.any() resolves with the first fulfilled Promise, or rejects with AggregateError if all fail.

A module is an independent, reusable piece of code that encapsulates related functionality in its own file scope. ES6 modules use the import and export keywords to share functionality between files, enabling better code organization, avoiding global scope pollution, and explicit dependency management.

Export items using the export keyword: export const name = ... or export default myFunction. Import them with import: import { name } from './module.js' for named exports, or import myFunction from './module.js' for default exports. Use import * as module from './module.js' for all exports.

Polyfilling is adding JavaScript code that emulates newer features in older browsers that don't support them natively. A polyfill detects if a feature is missing and provides a fallback implementation, ensuring cross-browser compatibility without requiring users to update their browsers.

Transpiling converts modern JavaScript code (e.g. ES6+) into an equivalent older version (e.g. ES5) that is compatible with older browsers. Tools like Babel handle this automatically. Transpiling converts syntax like arrow functions and classes, while polyfilling adds missing APIs.

Polyfilling adds new API functionality to older environments by implementing missing features in JavaScript code (e.g. adding Array.from to older browsers). Transpiling converts modern syntax to equivalent older syntax (e.g. arrow functions to regular functions). Polyfilling is about features; transpiling is about syntax.

Cookies are sent to the server automatically with every HTTP request and support an expiry date; they are limited to about 4 KB. localStorage is client-side only (never sent to the server), has a larger capacity of around 5 MB, and has no built-in expiry. Use cookies for server-side authentication and session data; use localStorage for client-only preferences and caching.

Event bubbling means that when an event fires on an element, it propagates upward through the DOM tree to all its ancestor elements. For example, clicking a button inside a div will also trigger any click listeners on that div and on the document. You can stop this with event.stopPropagation() inside the handler.

Event capturing is the opposite of bubbling. The event travels from the document root down to the target element before the target handles it. You opt into capturing by passing true as the third argument to addEventListener. The full event lifecycle is: capturing (top-down), target, then bubbling (bottom-up).

Event delegation is a pattern where a single event listener is attached to a parent element to handle events for all its children, relying on event bubbling. It is useful because it reduces the number of listeners (better performance for large lists), and it automatically handles dynamically added child elements without needing to attach new listeners each time.

onclick is an element property that can only hold one handler at a time — assigning a new function overwrites the previous one. addEventListener can attach multiple independent handlers for the same event without overwriting any of them. addEventListener also supports capturing phase listeners and can be removed with removeEventListener, making it the preferred and more flexible approach.

Call event.stopPropagation() inside an event handler to prevent the event from bubbling up (or capturing down) to ancestor elements. To also prevent any other listeners on the same element from running, use event.stopImmediatePropagation(). To prevent the browser's default action (like following a link), use event.preventDefault(). These methods can be combined as needed.