Core Concepts & Fundamentals

1. What is JavaScript?

JavaScript is a high-level, just-in-time compiled, multi-paradigm programming language. It's

best known as the scripting language for web pages, but it's used in many non-browser
environments as well, such as [Link] for server-side development.

2. What are the different data types in JavaScript?

JavaScript has 8 data types:

• Primitive Types:
o String: A sequence of characters.
o Number: Numeric values (both integer and floating-point).
o BigInt: For integers of arbitrary length.
o Boolean: true or false.
o undefined: A variable that has been declared but not assigned a value.
o null: Represents the intentional absence of any object value.
o Symbol: A unique and immutable primitive value.
• Non-Primitive Type:
o Object: A collection of key-value pairs. Arrays, Functions, and Dates are also
types of objects.

3. What's the difference between == and ===?

• == (Loose Equality): Compares two values for equality after performing type coercion
(converting values to a common type).
• === (Strict Equality): Compares two values for equality without performing type
coercion. It checks if both the value and the type are the same. It's almost always
recommended to use === to avoid unexpected bugs from type coercion.

JavaScript
[Link](1 == '1'); // true (string '1' is coerced to number 1)
[Link](1 === '1'); // false (number is not the same type as string)

4. What is type coercion?

Type coercion is the automatic conversion of a value from one data type to another. This
happens when using operators like == or when a value is used in a context that expects a different
type (e.g., 2 + '3' results in the string '23').

5. Is JavaScript a statically typed or dynamically typed language?

JavaScript is a dynamically typed language. This means you don't have to declare the type of a
variable in advance. The type of a variable is determined at runtime and can change throughout
the program's execution.

© 2025 [Link]. All Rights Reserved. 1

6. What is NaN? How can you check for it?

NaN stands for "Not a Number". It's a special numeric value that represents an invalid or
unrepresentable number, often the result of a mathematical operation that failed (e.g., 0 / 0). A
tricky part of NaN is that it doesn't equal itself (NaN === NaN is false). To check for it, you must
use the global isNaN() function or the more reliable [Link]() method.

JavaScript
[Link]([Link](0 / 0)); // true
[Link](isNaN("hello")); // true (coerces "hello" to NaN)

7. What is hoisting in JavaScript?

Hoisting is JavaScript's default behavior of moving all declarations (for variables declared with
var and functions) to the top of their current scope before code execution. Initializations are not
hoisted.

• Variables declared with let and const are also hoisted but are not initialized, creating a
"Temporal Dead Zone" until the declaration is encountered.

JavaScript
[Link](myVar); // undefined (declaration is hoisted, but not
initialization)
var myVar = 5;

// For let/const, this would throw a ReferenceError

8. What's the difference between undefined and null?

• undefined: This is the default value of a variable that has been declared but not yet
assigned a value.
• null: This is an intentional assignment. It's used to represent the absence of a value,
explicitly set by a programmer.

9. What are global variables? What are the problems with them? Global variables are
variables declared outside of any function, making them accessible from anywhere in the code.
Problems:

• Name Collisions: Different scripts might accidentally use the same global variable name,
causing conflicts.
• Security Issues: They can be accessed and modified by any script on the page.
• Poor Code Readability: It's hard to track where a global variable is being modified.

10. What is "Strict Mode"? Strict Mode ('use strict';) is a feature in JavaScript that
enforces stricter parsing and error handling. It helps you write cleaner code by preventing certain
actions (like using undeclared variables) and throwing more exceptions.

11. What is the difference between let, const, and var?

• var: Function-scoped. Can be re-declared and updated. Hoisted and initialized with
undefined.

© 2025 [Link]. All Rights Reserved. 2

 • let: Block-scoped ({}). Cannot be re-declared in the same scope, but can be updated.
Hoisted but not initialized (Temporal Dead Zone).
• const: Block-scoped. Cannot be re-declared or updated. Must be initialized at the time of
declaration. Hoisted but not initialized.

12. What are truthy and falsy values?

In a boolean context, every value in JavaScript is either "truthy" or "falsy".

• Falsy Values: There are only eight: false, 0, -0, 0n (BigInt zero), "" (empty string),
null, undefined, and NaN.
• Truthy Values: Everything else.

Functions & Scope

13. What is scope?

Scope determines the accessibility (visibility) of variables. JavaScript has three types of scope:

• Global Scope: Variables declared outside any function are in the global scope.
• Function Scope: Variables declared inside a function are only accessible within that
function.
• Block Scope: Variables declared with let and const inside a block ({...}) are only
accessible within that block.

14. What is a closure? Can you give an example?

A closure is a function that has access to its outer (enclosing) function's variables, even after the
outer function has finished executing. It "remembers" its lexical scope.

JavaScript
function outerFunction() {
let count = 0; // This variable is 'closed over'
return function innerFunction() {
count++;
[Link](count);
};
}

const counter = outerFunction();

counter(); // 1
counter(); // 2

15. What is an Immediately Invoked Function Expression (IIFE)?

An IIFE is a JavaScript function that runs as soon as it is defined. It's a design pattern used to
avoid polluting the global scope.

JavaScript

© 2025 [Link]. All Rights Reserved. 3

(function() {
var privateVar = "I am private";
[Link](privateVar);
})();
// privateVar is not accessible here

16. What is the this keyword?

The this keyword refers to the object it belongs to. Its value is determined by how a function is
called (the "call-site").

• Global Context: It refers to the global object (window in browsers).

• Object Method: It refers to the object the method is called on.
• call, apply, bind: Its value can be explicitly set.
• Arrow Functions: They do not have their own this context; they inherit it from the
parent scope.

17. What is the difference between call(), apply(), and bind()?

All three methods are used to set the this value for a function.

• call(thisArg, arg1, arg2, ...): Invokes the function immediately, with arguments
passed individually.
• apply(thisArg, [argsArray]): Invokes the function immediately, with arguments
passed as an array.
• bind(thisArg): Returns a new function with this bound to thisArg. It does not
invoke the function immediately.

18. What are arrow functions? How are they different from regular functions?

Arrow functions (=>) provide a more concise syntax for writing functions. Key Differences:

• Syntax: Shorter and cleaner.

• this Binding: They do not have their own this. They lexically bind this from their
parent scope.
• arguments object: They do not have their own arguments object.
• Constructor: They cannot be used as constructors (with the new keyword).

19. What are higher-order functions?

A higher-order function is a function that either takes another function as an argument or

returns a function. Examples include map, filter, and reduce.

20. What are pure functions?

A pure function is a function that:

1. Given the same input, will always return the same output.
2. Has no side effects (it doesn't modify any state outside its own scope).

© 2025 [Link]. All Rights Reserved. 4

Data Structures: Objects & Arrays
21. How do you check if a property exists in an object?

You can use the in operator or the hasOwnProperty() method.

JavaScript
const person = { name: 'Alice' };
[Link]('name' in person); // true
[Link]([Link]('age')); // false

hasOwnProperty() is generally safer as it doesn't check the object's prototype chain.

22. What's the difference between dot notation and bracket notation?

• Dot Notation ([Link]): Simpler and more readable. The property name must be a
valid JavaScript identifier.
• Bracket Notation (obj['prop']): More flexible. The property name is a string, so it can
contain spaces, special characters, or be a variable.

JavaScript
const obj = { 'first name': 'John' };
// [Link]([Link] name); // SyntaxError
[Link](obj['first name']); // 'John'

23. Explain map(), filter(), and reduce().

These are array methods for functional programming.

• map(): Creates a new array by applying a function to every element of the original array.
• filter(): Creates a new array with all elements that pass the test implemented by the
provided function.
• reduce(): Executes a "reducer" function on each element of the array, resulting in a
single output value.

24. What's the difference between map() and forEach()?

• forEach(): Executes a function for each array element. It does not return a value
(undefined). It's used when you want to cause a side effect for each element.
• map(): Executes a function for each array element and returns a new array containing
the results. It's used for data transformation.

25. What's the difference between slice() and splice()?

• slice(): Returns a new array containing a shallow copy of a portion of an array. It

does not modify the original array.
• splice(): Changes the contents of an array by removing or replacing existing elements
and/or adding new elements in place. It modifies the original array.

26. How can you empty an array? There are several ways, but the two most common are:

© 2025 [Link]. All Rights Reserved. 5

 1. [Link] = 0; (Fastest)
2. arr = []; (Creates a new array and assigns it to the variable, doesn't modify the original
array if it's referenced elsewhere)

27. How do you create a deep copy of an object?

A deep copy creates a new object and recursively copies all properties, including nested objects
and arrays.

• Using [Link]([Link](obj)): A quick and easy way, but it has

limitations (loses functions, undefined, Symbols, etc.).
• Using a library function: Libraries like Lodash (_.cloneDeep()) provide robust deep
cloning functions.
• Writing a custom recursive function: The most flexible but also the most complex
approach.

28. How can you flatten a nested array?

You can use the flat() method (ES2019) or a recursive function.

JavaScript
const nested = [1, [2, 3], [4, [5]]];
[Link]([Link](2)); // [1, 2, 3, 4, 5]
// The argument specifies the depth to flatten.

Asynchronous JavaScript
29. What is asynchronous programming?

Asynchronous programming allows code to run in the background without blocking the main
execution thread. In JavaScript, this is crucial for tasks like making API requests, reading files, or
setting timeouts, ensuring the user interface remains responsive.

30. What is "Callback Hell"?

Callback Hell (or the "Pyramid of Doom") describes a situation where multiple nested callbacks
make the code hard to read and maintain.

JavaScript
asyncAction1(function(result1) {
asyncAction2(result1, function(result2) {
asyncAction3(result2, function(result3) {
// ...and so on
});
});
});

It is solved using Promises and async/await.

31. What is a Promise?

© 2025 [Link]. All Rights Reserved. 6

A Promise is an object representing the eventual completion (or failure) of an asynchronous
operation and its resulting value. It can be in one of three states:

• Pending: The initial state; not yet fulfilled or rejected.

• Fulfilled: The operation completed successfully.
• Rejected: The operation failed.

32. What is async/await?

async/await is syntactic sugar built on top of Promises, making asynchronous code look and
behave more like synchronous code.

• An async function always returns a Promise.

• The await keyword pauses the execution of the async function until the awaited Promise
is resolved.

JavaScript
async function fetchData() {
try {
const response = await fetch('[Link]
const data = await [Link]();
[Link](data);
} catch (error) {
[Link]('Failed to fetch data:', error);
}
}

33. How do you handle errors in async/await?

You use a standard try...catch block, just like with synchronous code.

34. What is the event loop?

The event loop is a mechanism that allows JavaScript to perform non-blocking operations. It
continuously checks the Message Queue for tasks and pushes them onto the Call Stack to be
executed once the stack is empty. This model enables concurrency in a single-threaded
environment.

35. What's the difference between [Link]() and [Link]()?

• [Link](promises): Waits for all promises in an iterable to be fulfilled. It rejects if

any of the promises reject.
• [Link](promises): Waits for the first promise in an iterable to be settled (either
fulfilled or rejected).

ES6+ Features
36. What is destructuring assignment?

© 2025 [Link]. All Rights Reserved. 7

Destructuring is a syntax that makes it possible to unpack values from arrays, or properties from
objects, into distinct variables.

JavaScript
// Object destructuring
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
[Link](name); // 'Alice'

// Array destructuring
const [first, second] = [1, 2, 3];
[Link](first); // 1

37. What are the spread (...) and rest (...) operators?

They use the same ... syntax but have opposite functions.

• Spread Operator: "Spreads" or expands an iterable (like an array or string) into

individual elements. It's often used for making copies of arrays/objects or combining
them.
• Rest Parameter: Collects multiple elements and "condenses" them into a single element
(an array). It's used in function parameters.

JavaScript
// Spread
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Rest
function sum(...numbers) {
return [Link]((acc, curr) => acc + curr, 0);
}
sum(1, 2, 3, 4); // 10

38. What are JavaScript Modules?

Modules allow you to split your code into separate, reusable files. You can use the export
statement to make variables or functions available to other files and the import statement to use
them.

39. What's the difference between a Set and a Map?

• Set: A collection of unique values. It's useful for storing a list of items where you don't
want duplicates.
• Map: A collection of key-value pairs, similar to an object. However, a Map allows keys
of any data type, maintains insertion order, and is optimized for frequent additions and
removals of key-value pairs.

40. What is optional chaining (?.)?

Optional chaining allows you to safely access deeply nested properties of an object without
having to check if each level of the chain exists. If any part of the chain is null or undefined,
the expression short-circuits and returns undefined.

© 2025 [Link]. All Rights Reserved. 8

JavaScript
const user = { address: { street: '123 Main St' } };
[Link]([Link]?.street); // '123 Main St'
[Link]([Link]?.name); // undefined (no error thrown)

41. What is the nullish coalescing operator (??)?

This logical operator returns its right-hand side operand when its left-hand side operand is null
or undefined, and otherwise returns its left-hand side operand. It's a way to provide a default
value for potentially nullish variables.

JavaScript
const name = null;
const defaultName = 'Guest';
[Link](name ?? defaultName); // 'Guest'

const count = 0;
[Link](count ?? 10); // 0 (unlike || which would return 10)

DOM Manipulation & Events

42. What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It
represents the page so that programs can change the document structure, style, and content. The
DOM represents the document as a tree of nodes.

43. What's the difference between window and document?

• window: The global object that represents the browser window or tab. It contains the
document object, as well as other things like location, history, and global functions
like setTimeout.
• document: Represents the web page itself (the DOM). It's a property of the window object
([Link]).

44. What is event delegation?

Event delegation is a technique where you add a single event listener to a parent element to
manage events for all of its children. This is more efficient than adding an event listener to every
child element, especially for dynamically added elements.

45. Explain event bubbling and capturing.

These are two phases of event propagation in the DOM.

• Capturing Phase: The event "travels down" from the root of the document to the target
element.
• Bubbling Phase: The event "bubbles up" from the target element back to the root of the
document. By default, event listeners operate in the bubbling phase.

© 2025 [Link]. All Rights Reserved. 9

46. What's the difference between [Link]() and
[Link]()?

• [Link](): Prevents the default action of an element. For example,

preventing a form from submitting or a link from navigating.
• [Link](): Stops the event from propagating further up or down the
DOM tree (i.e., it stops bubbling or capturing).

Prototypes, Classes & OOP

47. What is prototypal inheritance?

Prototypal inheritance is a core concept in JavaScript where objects can inherit properties and
methods from other objects. Every JavaScript object has a private property which holds a link to
another object called its prototype. That prototype object has a prototype of its own, and so on,
until an object is reached with null as its prototype. This is called the prototype chain.

48. What's the difference between __proto__ and prototype?

• prototype: A property that exists on constructor functions and points to an object. This
object is what will become the prototype of all instances created by that constructor.
• __proto__: A property that exists on object instances and points to the object's
prototype (the prototype object of the constructor that created it). It's the actual link in
the prototype chain.

49. What is the class keyword in ES6?

The class keyword is syntactic sugar over JavaScript's existing prototype-based inheritance. It
provides a cleaner and more familiar syntax for creating objects and dealing with inheritance, but
it doesn't fundamentally change how JavaScript's object model works.

50. What is the super() keyword used for?

In a child class constructor, super() is used to call the constructor of its parent class. It must be
called before the this keyword can be used in the constructor. It can also be used to call methods
on the parent class.

Web APIs & Browser

51. What's the difference between localStorage, sessionStorage, and cookies?

• Cookies: Small strings of data stored by the browser. Sent with every HTTP request, have
a small capacity (~4KB), and can have an expiration date.

© 2025 [Link]. All Rights Reserved. 10

 • sessionStorage: Stores key-value pairs for the duration of a session (until the tab is
closed). Data is not sent to the server. Larger capacity (~5-10MB).
• localStorage: Same as sessionStorage, but the data persists even after the browser is
closed and reopened. Data is not sent to the server. Larger capacity (~5-10MB).

52. What is the Same-Origin Policy? It's a critical security mechanism that restricts how a
document or script loaded from one origin can interact with a resource from another origin. An
origin is defined by the combination of protocol, hostname, and port.

53. What is CORS (Cross-Origin Resource Sharing)? CORS is a mechanism that uses
additional HTTP headers to tell browsers to give a web application running at one origin, access
to selected resources from a different origin. It's a way to safely relax the Same-Origin Policy.

54. What is the Fetch API? The Fetch API provides a modern, Promise-based interface for
fetching resources across the network (e.g., making HTTP requests). It's a more powerful and
flexible replacement for XMLHttpRequest.

55. What is JSON? Explain [Link]() and [Link](). JSON (JavaScript

Object Notation) is a lightweight data-interchange format.

• [Link](object): Converts a JavaScript object into a JSON string.

• [Link](string): Parses a JSON string, constructing the JavaScript value or object
it describes.

Code Snippets & Tricky Questions

56. What will be the output of [Link](0.1 + 0.2 === 0.3)? Why?

It will output false. This is because floating-point numbers in JavaScript (and most
programming languages) are stored in binary format (IEEE 754) and cannot represent some
decimal fractions with perfect precision. 0.1 + 0.2 results in something like
0.30000000000000004.

57. What is the output of the following code?

JavaScript
for (var i = 0; i < 5; i++) {
setTimeout(function() { [Link](i); }, 1000);
}

It will print the number 5 five times. This is because setTimeout is asynchronous. By the time
the callbacks execute, the loop has already finished, and the variable i (which is in the
global/function scope because of var) holds its final value, 5.

How to fix it? Use let for block scope, or use a closure.

JavaScript
// Fix using let

© 2025 [Link]. All Rights Reserved. 11

for (let i = 0; i < 5; i++) {
setTimeout(function() { [Link](i); }, 1000);
} // Prints 0, 1, 2, 3, 4

58. What will this code log to the console?

JavaScript
(function(){
var a = b = 3;
})();

[Link]("a defined? " + (typeof a !== 'undefined'));

[Link]("b defined? " + (typeof b !== 'undefined'));

Output:

a defined? false
b defined? true

Why? The line var a = b = 3; is interpreted as var a = (b = 3);. The assignment b = 3

happens first. Since b was never declared, it becomes a global variable. a is declared with var
and remains local to the IIFE.

59. What would ['1', '7', '11'].map(parseInt) return? Why?

It returns [1, NaN, 3]. Why? map passes three arguments to its callback: (element, index,
array). parseInt accepts two arguments: (string, radix).

• parseInt('1', 0) -> 1 (radix 0 defaults to 10)

• parseInt('7', 1) -> NaN (radix 1 is not a valid radix)
• parseInt('11', 2) -> 3 (interprets '11' as a binary number)

60. Write a function sum that can be called like sum(2)(3)(5)() and returns 10.

This requires using closures and currying.

JavaScript
function sum(a) {
return function(b) {
if (b) {
return sum(a + b);
}
return a;
};
}

// Or as a one-liner arrow function

const sum = a => b => b ? sum(a + b) : a;

[Link](sum(2)(3)(5)()); // 10

© 2025 [Link]. All Rights Reserved. 12

Error Handling & Debugging

61. What is the purpose of the finally block in a try...catch...finally statement?

The finally block contains code that will execute after the try and catch blocks, regardless of
whether an exception was thrown or caught. It's typically used for cleanup tasks, like closing a
file or disconnecting from a database.

62. What's the difference between a SyntaxError and a ReferenceError?

• SyntaxError: This error is thrown when the JavaScript engine encounters code that
violates the syntax rules of the language. It happens during the parsing phase, before the
code is executed. For example, a missing parenthesis [Link]("hello" would
cause a SyntaxError.
• ReferenceError: This error is thrown when you try to access a variable that has not been
declared. It happens during the execution phase. For example, [Link](myVar)
without declaring myVar first.

63. How can you create a custom error in JavaScript?

You can create a custom error by extending the built-in Error class. This allows you to create
more specific and descriptive error types in your application.

JavaScript
class ValidationError extends Error {
constructor(message) {
super(message); // Call the parent constructor
[Link] = "ValidationError";
}
}

// How to use it:

try {
throw new ValidationError("Invalid email address");
} catch (error) {
[Link](`${[Link]}: ${[Link]}`); // ValidationError:
Invalid email address
}

64. What does the debugger keyword do?

The debugger keyword acts as a breakpoint in your code. When the browser's developer tools
are open, the JavaScript execution will pause at the line where debugger is placed, allowing you
to inspect variables and the call stack at that specific point.

65. How do you handle errors in Promises?

You handle errors in Promises by chaining a .catch() block. It will be executed if any
preceding Promise in the chain is rejected. With async/await, you use a standard try...catch
block.

© 2025 [Link]. All Rights Reserved. 13

JavaScript
// Using .catch()
fetch('invalid-url')
.then(response => [Link]())
.catch(error => [Link]('Fetch failed:', error));

Performance & Optimization

66. What is tree shaking?

Tree shaking is a process used by modern module bundlers (like Webpack or Rollup) to
eliminate dead code. It analyzes your import and export statements and includes only the code
that is actually used in your final bundle, which helps reduce the file size.

67. Explain the concept of "lazy loading" in JavaScript.

Lazy loading is a performance optimization technique where you defer the loading of non-critical
resources (like images, scripts, or modules) until they are actually needed. For example, loading
an image only when the user scrolls it into the viewport. This improves initial page load time and
saves bandwidth.

68. What is the difference between debouncing and throttling?

Both are techniques to control how often a function is executed.

• Debouncing: Groups a burst of events into a single one. It ensures a function is not called
again until a certain amount of time has passed without it being called. A common use
case is a search bar that only triggers the API call after the user stops typing for 300ms.
• Throttling: Ensures a function is called at most once in a specified time interval, no
matter how many times the event fires. A common use case is preventing a function tied
to a scroll event from firing hundreds of times per second.

69. How can you optimize DOM manipulation performance?

Frequent, direct DOM manipulation is slow because it can trigger browser reflows and repaints.
To optimize it:

• Batch DOM updates: Make changes to a detached DOM element (a

DocumentFragment) and then append it to the live DOM in a single operation.
• Use requestAnimationFrame(): For animations, this ensures your DOM changes are
synchronized with the browser's repaint cycle.
• Event Delegation: Use a single event listener on a parent element instead of multiple
listeners on child elements.

70. What is memoization?

Memoization is an optimization technique where you cache the results of expensive function
calls and return the cached result when the same inputs occur again. It's a way to trade memory
for speed.

© 2025 [Link]. All Rights Reserved. 14

JavaScript
function memoizedFib(n, cache = {}) {
if (n in cache) return cache[n];
if (n <= 1) return n;
cache[n] = memoizedFib(n - 1, cache) + memoizedFib(n - 2, cache);
return cache[n];
}

Advanced Concepts & Modern JS

71. What is the difference between a Map and a WeakMap?

• Map: Can have keys of any type. It keeps strong references to its keys, meaning that as
long as the Map exists, the key objects cannot be garbage collected.
• WeakMap: Can only have objects as keys. It holds weak references to its keys. This means
if an object used as a key has no other references in the code, it can be garbage collected,
and its entry will be automatically removed from the WeakMap. This is useful for
preventing memory leaks.

72. What is a generator function?

A generator function is a special type of function that can be paused and resumed, allowing it to
produce a sequence of values over time. It is defined using the function* syntax and uses the
yield keyword to return a value and pause its execution.

73. How can you make a custom object iterable?

You can make an object iterable by implementing the iterable protocol. This means the object
must have a property with a [Link] key, which is a function that returns an iterator
object. The iterator object must have a next() method.

JavaScript
const myIterable = {
from: 1,
to: 3,
[[Link]]() {
let current = [Link];
const last = [Link];
return {
next() {
if (current <= last) {
return { done: false, value: current++ };
} else {
return { done: true };
}
}
};
}
};

for (const num of myIterable) {

[Link](num); // 1, 2, 3
}

© 2025 [Link]. All Rights Reserved. 15

74. What is a transpiler? Give an example.

A transpiler is a tool that reads source code written in one programming language and produces
equivalent code in another language. In the JavaScript world, it's used to convert modern
JavaScript (ES6+) into an older, more widely supported version (like ES5).

• Example: Babel is the most popular JavaScript transpiler.

75. What is the difference between npm and npx?

• npm (Node Package Manager): It is used to install, manage, and publish packages to the
npm registry. You use it to manage the dependencies in your [Link] file.
• npx (Node Package Execute): It is a package runner that comes with npm. It allows you
to execute a command from an npm package without having to install it globally or
locally in your project's dependencies.

76. What is Shadow DOM?

Shadow DOM is a web standard that allows for encapsulation in web components. It lets you
keep the markup structure, style, and behavior of a component hidden and separate from other
code on the page so it doesn't clash. This is a key part of the Web Components suite.

77. What is the difference between attributes and properties on a DOM element?

• Attributes: Are defined by the HTML markup. They are the initial values in the HTML
file (e.g., <input id="my-input" value="hello">). You access them with
[Link]().
• Properties: Belong to the DOM object. They are live values that can change. For
example, if a user types into the input box, [Link] (the property) will change, but
[Link]('value') (the attribute) will still be "hello".

78. What does the defer attribute on a <script> tag do? How is it different from async?
Both async and defer allow the HTML parser to continue while the script is being downloaded.

• async: The script will execute as soon as it's downloaded, which can be at any point and
might interrupt HTML parsing. The order of execution for multiple async scripts is not
guaranteed.
• defer: The script will execute only after the HTML document has been fully parsed, but
before the DOMContentLoaded event. defer scripts also execute in the order they appear
in the document. defer is generally safer for scripts that need to interact with the DOM.

79. What is the Critical Rendering Path?

The Critical Rendering Path is the sequence of steps the browser goes through to convert HTML,
CSS, and JavaScript into pixels on the screen. The main steps are:

1. Construct the DOM (Document Object Model).

2. Construct the CSSOM (CSS Object Model).
3. Combine DOM and CSSOM to form the Render Tree.
4. Perform Layout (calculate the size and position of each element).

© 2025 [Link]. All Rights Reserved. 16

 5. Paint the pixels to the screen. Optimizing this path is key to fast page loads.

80. What is a Service Worker?

A Service Worker is a script that your browser runs in the background, separate from a web page.
It acts as a network proxy, intercepting network requests. This enables features like offline
capabilities, push notifications, and background data synchronization.

Tricky "What's the output?" & Conceptual Questions

81. What is the output of typeof []? What about typeof null?

• typeof [] returns "object". In JavaScript, arrays are a special type of object.

• typeof null returns "object". This is a well-known, long-standing bug in the language
that can't be fixed due to backward compatibility concerns.

82. How can you check if an object is empty? The most robust way is to use [Link]()
and check its length.

JavaScript
const obj = {};
[Link]([Link](obj).length === 0); // true

83. What is the difference between [Link]() and [Link]()?

• [Link](obj): Prevents new properties from being added and marks all existing
properties as non-configurable. However, the values of existing properties can still be
changed.
• [Link](obj): Does everything [Link]() does, but it also makes all
existing properties read-only (immutable). It's the highest level of immutability for an
object.

84. What will be the output of [Link](!!"Hello")?

The output will be true. The first ! (NOT operator) coerces the truthy string "Hello" into
false. The second ! then negates false, resulting in true. It's a quick way to convert any value
to its boolean equivalent.

85. What is function composition?

Function composition is the process of combining two or more functions to produce a new
function. The output of one function becomes the input of the next.

JavaScript
const add5 = x => x + 5;
const multiplyBy2 = x => x * 2;

const composedFunc = x => multiplyBy2(add5(x));

© 2025 [Link]. All Rights Reserved. 17

[Link](composedFunc(10)); // 30 (10 + 5 = 15, 15 * 2 = 30)

86. What does [Link] do? [Link] is a meta-property that is available inside
functions. If a function is called with the new keyword (as a constructor), [Link] will be a
reference to the constructor. If it's called as a regular function, [Link] will be undefined.
It's useful for determining if a function was called as a constructor.

87. What is the output of [1, 2, 3] + [4, 5, 6]? Why? The output will be the string
"1,2,34,5,6". When the + operator is used with an array, the array is first converted to a string
by calling its toString() method, which is equivalent to join(','). So, [1, 2, 3] becomes
"1,2,3" and [4, 5, 6] becomes "4,5,6". Then, the two strings are concatenated.

88. What is the Temporal Dead Zone (TDZ)? The Temporal Dead Zone is a term to describe
the state where variables declared with let and const are un-initialized. They are hoisted, but
you cannot access them before the line of declaration. Trying to access a variable in the TDZ
results in a ReferenceError.

89. What is the difference between imperative and declarative programming?

• Imperative Programming: Focuses on how to achieve a result. You write explicit, step-
by-step instructions for the computer to follow. A for loop is a classic imperative
approach.
• Declarative Programming: Focuses on what you want to achieve, without specifying
the step-by-step flow. Array methods like .map() and .filter() are declarative—you
describe the desired outcome, not the loop mechanism.

90. What is the output? [Link](1 < 2 < 3); and [Link](3 > 2 > 1);

• [Link](1 < 2 < 3); outputs true. The expression is evaluated left-to-right. 1 <
2 is true. Then, true < 3 coerces true to the number 1, so 1 < 3 is true.
• [Link](3 > 2 > 1); outputs false. 3 > 2 is true. Then, true > 1 coerces
true to 1, so 1 > 1 is false.

91. What is the purpose of the Proxy object in JavaScript? A Proxy object allows you to
create a wrapper around another object (the "target") and intercept fundamental operations, such
as property lookups, assignments, and function invocations. It's a form of metaprogramming that
enables you to add custom behavior to objects, like validation, logging, or formatting.

92. How can you create a truly private variable in a JavaScript class? The standard way is to
use the # prefix for class fields. This makes the field private to the class, and it cannot be
accessed from outside the class instance.

JavaScript
class MyClass {
#privateField = 'secret';

getPrivateField() {
return this.#privateField;
}
}

const instance = new MyClass();

© 2025 [Link]. All Rights Reserved. 18

[Link]([Link]()); // 'secret'
// [Link](instance.#privateField); // SyntaxError

93. What is "lifting state up"? This is a pattern commonly used in component-based
frameworks like React. When several components need to share and reflect the same changing
data, it's recommended to lift the shared state up to their closest common ancestor. The ancestor
then passes the state down to the children via props, keeping the data flow unidirectional and
predictable.

94. Explain what [Link]() is for and why it's necessary. [Link](value)
returns true if the value is an array and false otherwise. It's necessary because typeof []
returns "object", which doesn't reliably distinguish an array from a plain object. It's the safest
way to check if a variable is an array.

95. What is the difference between a shallow copy and a deep copy?

• Shallow Copy: Creates a new object or array, but for nested objects or arrays, it only
copies the references, not the values. If you change a nested object in the copy, it will
also change in the original. ([Link]() and the spread syntax ... create shallow
copies).
• Deep Copy: Creates a new object or array and recursively copies all nested objects and
arrays, creating new copies of them as well. The copy is completely independent of the
original.

96. What is the bind method primarily used for? The bind() method creates a new function
that, when called, has its this keyword set to a provided value. Its primary use case is to
preserve the this context when passing a method as a callback, especially in event handlers or
asynchronous operations.

97. What is CORS? CORS (Cross-Origin Resource Sharing) is a browser security mechanism
that allows a server to indicate any origins (domain, scheme, or port) other than its own from
which a browser should permit loading resources. It's a way to relax the Same-Origin Policy. If a
web application at [Link] tries to make a fetch request to [Link], the browser will block it unless
the server at [Link] sends back the appropriate CORS headers (like Access-Control-Allow-
Origin: *).

98. What is the difference between [Link] and [Link]?

• [Link]: The element that triggered the event (the actual element that was
clicked, for example).
• [Link]: The element that the event listener is attached to. In event
delegation, these can be different. [Link] will always be the parent
element where the listener was added.

99. Can you describe the Singleton design pattern? The Singleton pattern is a design pattern
that ensures a class has only one instance and provides a global point of access to it. In
JavaScript, this can be achieved using a module or a class that manages its own instance.

JavaScript
const Singleton = (function () {
let instance;

© 2025 [Link]. All Rights Reserved. 19

 function createInstance() {
const object = new Object("I am the instance");
return object;
}

return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();

const instanceA = [Link]();

const instanceB = [Link]();

[Link](instanceA === instanceB); // true

100. What is an API (Application Programming Interface)? In the context of web

development, an API is a set of rules and protocols that allows different software applications to
communicate with each other. For example, the DOM API allows JavaScript to interact with an
HTML document, and a REST API on a server allows a front-end application to request and
manipulate data.

© 2025 [Link]. All Rights Reserved. 20