JavaScript Notes: Beginner to Pro

I. Beginner/Fundamentals

1. Introduction to JavaScript

JavaScript is a high-level, interpreted programming language that is one of the core technologies
of the World Wide Web, alongside HTML and CSS. It is primarily known as the language for web
page interactivity, but its use has expanded significantly to server-side programming ([Link]),
mobile development (React Native), and desktop applications (Electron).

Key Concepts:

Client-side: Runs in the user’s web browser, manipulating the Document Object Model
(DOM) to create dynamic content.

Server-side: Runs on a server (via [Link]), allowing for full-stack development, file system
access, and database interaction.

Interpreted: Code is executed line-by-line by an interpreter, not compiled beforehand.

Real-World Examples:

Example Description Code Snippet (Conceptual)

Ensuring a user’s input meets

Form specific criteria (e.g., email format, if ([Link]('@') && [Link]

Validation password length) before submitting >= 8) { /* submit */ }

data to a server.

Handling user interactions like

Interactive zooming, panning, and clicking on [Link]('click', (event) => {

Maps markers in a web-based map displayMarkerInfo([Link]); });

application (e.g., Google Maps).

Creating a RESTful API endpoint using

Server-Side [Link] and Express to handle a user [Link]('/login', (req, res) => { /*

API login request and return a JSON web check credentials and send token */ });
token (JWT).
2. Variables and Data Types

Variables are containers for storing data values. JavaScript has three keywords for declaring
variables: var , let , and const , each with different scoping rules.

Variable Declaration Keywords:

Keyword Scope Reassignment Redeclaration Hoisting

Function-
var Yes Yes Yes (initialized with undefined )
scoped

Yes (but uninitialized, causes

let Block-scoped Yes No
ReferenceError )

No (must be Yes (but uninitialized, causes

const Block-scoped No
initialized) ReferenceError )

Primitive Data Types:

Type Description Example

"Hello World" ,
String Textual data, enclosed in quotes.
'JavaScript'

Number Integers and floating-point numbers. 42 , 3.14159

Boolean Logical entity, either true or false . true , false

Null Intentional absence of any object value. let data = null;

Undefined A variable that has been declared but not assigned a value. let x;

A unique and immutable primitive value, often used for

Symbol Symbol('id')
object property keys.

BigInt Integers with arbitrary precision (larger than 2^53 - 1 ). 100n

Real-World Examples:
 Example Description Code Snippet (Conceptual)

Using const for configuration values that

User
should not change, like API keys or base URLs, const API_KEY = "xyz123";
Configuration
ensuring code stability.

Using let to manage a user’s mutable state,

State let cartTotal = 0; cartTotal
such as a shopping cart total or a counter in a
Management += itemPrice;
game.

Using Symbol to create private, non-colliding const USER_ID =

Unique
property keys in an object, preventing Symbol('user_id');
Identifiers
accidental overwrites by other code. user[USER_ID] = 101;

3. Operators and Expressions

Operators are special symbols used to perform operations on operands (values and variables).

Key Operator Categories:

Category Operator Description Example

Basic math
Arithmetic + , - , * , / , % , ** 5 + 3
operations.

Assigns a value to a
Assignment = , += , -= , *= x += 5
variable.

== , === , != , !== , > , Compares two

Comparison a === b
< values.

Combines boolean
Logical && (AND), ` (OR), !` (NOT)
expressions.

condition ? age >= 18 ?

A shorthand for an
Ternary exprIfTrue : "Adult" :
if-else statement.
exprIfFalse "Minor"

The Crucial Distinction: == vs ===

== (Equality): Compares values after performing type coercion (converting operands to a

common type). This can lead to unexpected results (e.g., 0 == false is true ).

=== (Strict Equality): Compares values without type coercion. It checks if both the value
and the type are the same. Always prefer === for predictable code.

Real-World Examples:
 Example Description Code Snippet (Conceptual)

Using the logical AND ( && ) operator to

if ([Link] &&
User check if a user is both authenticated and
[Link] === 'admin') { /* grant
Authentication has the necessary role to access a
access */ }
resource.

Using the ternary operator to quickly

Conditional const status = isOnline ? 'Online'
decide which UI component or message
Rendering : 'Offline';
to display based on a simple condition.

Using strict inequality ( !== ) to ensure a if ([Link] !== '' && typeof
Input
form field is not empty and is of the [Link] === 'string') { /*
Sanitization
expected data type before processing it. process */ }

4. Control Flow

Control flow statements dictate the order in which the program’s instructions are executed.

Conditional Statements:

if...else if...else : Executes a block of code if a specified condition is true.

switch : Evaluates an expression, matching the expression’s value to a case clause, and
executes statements associated with that case.

Loops:

for : Repeats a block of code a specific number of times.

while : Repeats a block of code as long as a specified condition is true.

do...while : Similar to while , but the block of code is executed at least once before the
condition is checked.

for...in : Iterates over the enumerable properties of an object.

for...of : Iterates over the values of an iterable object (like Arrays, Strings, Maps,
NodeLists).

Real-World Examples:
 Example Description Code Snippet (Conceptual)

Using a switch statement to handle different switch (action) { case 'save':

Menu user actions based on which menu item they saveDoc(); break; case 'print':
Navigation clicked, leading to cleaner code than nested printDoc(); break; default:
if/else . showHelp(); }

Using a for...of loop to iterate over an array

Data for (const user of userList) {
of user records and perform a transformation
Processing processUser(user); }
or calculation on each item.

Using a do...while loop to attempt an API

let attempts = 0; do { attempts++;
Retry call or resource loading at least once, and then
const success = tryApiCall(); }
Mechanism continue retrying until a success condition is
while (!success && attempts < 3);
met or a maximum attempt count is reached.

5. Functions

Functions are the fundamental building blocks of JavaScript. A function is a set of statements that
performs a task or calculates a value.

Function Types:

Function Declaration: function greet(name) { return 'Hello, ' + name; } (Hoisted)

Function Expression: const greet = function(name) { return 'Hello, ' + name; };

(Not Hoisted)

Arrow Function (ES6): const greet = (name) => 'Hello, ' + name; (Shorter syntax, no
this binding, not hoisted)

Scope:

Global Scope: Variables declared outside any function or block.

Function Scope ( var ): Variables are accessible anywhere within the function they are
declared in.

Block Scope ( let , const ): Variables are only accessible within the block (e.g., if
statement, for loop) they are declared in.

Real-World Examples:
 Example Description Code Snippet (Conceptual)

Defining a pure function to calculate a

value, like tax or discount, which can be const calculateTax = (price, rate =
Utility Library
reused across different parts of an e- 0.1) => price * rate;
commerce application.

Using an arrow function as a concise

callback for an event listener, which
Event [Link]('click', ()
automatically preserves the this
Handlers => { [Link](); });
context of the surrounding code
(important in class components).

Using default function parameters to

Default provide sensible fallback values, making function fetchUser(id, options = {
Configuration the function more robust and easier to cache: true }) { /* ... */ }
call.

6. Arrays and Objects

Arrays and Objects are the two most common non-primitive data structures in JavaScript.

Arrays: Ordered lists of values, indexed by number (starting at 0).

Common Methods: push() , pop() , shift() , unshift() , splice() , slice() ,

concat() , indexOf() .

Objects: Unordered collections of key-value pairs. Keys are strings (or Symbols), and values can
be any data type.

Property Access: Dot notation ( [Link] ) or bracket notation ( user['age'] ).

Destructuring: A convenient way to extract values from arrays or properties from objects into
distinct variables.

Real-World Examples:
 Example Description Code Snippet (Conceptual)

Using an Array to store a list of tasks

Managing a To- (Objects), and using methods like const todos = []; [Link]({ id: 1,
Do List push to add a new task and splice to task: 'Buy milk' });
remove a completed task.

Using an Object to store application const settings = { theme: 'dark',

Configuration settings, allowing easy access and
lang: 'en' };
Settings modification of parameters like theme,
[Link]([Link]);
language, and user preferences.

Using Object Destructuring to quickly

API Response pull out specific, needed fields from a const { id, username, email } =

Handling large JSON response returned by an [Link];

API, making the code cleaner.

II. Intermediate Concepts

7. The DOM (Document Object Model)

The DOM is a programming interface for web documents. It represents the page so that programs
can change the document structure, style, and content.

Key Operations:

Selection: Finding elements in the document.

Manipulation: Changing the content, attributes, or style of elements.

Event Handling: Responding to user interactions (clicks, key presses, etc.).

Real-World Examples:
 Example Description Code Snippet (Conceptual)

Selecting the <body> element and

Dark Mode toggling a CSS class ( .dark-mode ) when [Link]('dark-

Toggle a button is clicked to change the entire mode');

site’s theme.

Listening for the input event on a

Live search box and dynamically updating the
[Link]('input',
Search textContent or [Link] of list
filterList);
Filtering items to show matching results in real-
time.

Using [Link]() to
Creating dynamically generate new HTML const newDiv =

Custom elements (e.g., a new notification banner) [Link]('div');

Elements and appending them to the DOM using [Link](newDiv);
appendChild() .

8. Higher-Order Functions and Array Methods

A Higher-Order Function (HOF) is a function that either takes one or more functions as
arguments or returns a function as its result. Array methods like map , filter , and reduce are
common HOFs.

Core Array HOFs:

Method Purpose Returns Real-World Use Case

Converting an array of raw data objects

Transforms each A new array of the same
map() into an array of formatted UI
element in an array. length.
components.

Selects elements A new array containing Displaying only “active” users from a
filter()
that pass a test. only the passing elements. list of all users.

Reduces the array to The single, accumulated Calculating the total price of items in a
reduce()
a single value. value. shopping cart.

Real-World Examples:
 Example Description Code Snippet (Conceptual)

Using map to iterate over a list of API results const normalized = [Link](item
Data
and standardize the key names and structure => ({ id: [Link], name:
Normalization
for internal use. item.full_name }));

Using some or every to quickly check if at

Permission const canEdit = [Link](user
least one or all users in a group have a
Check => [Link] === 'editor');
specific permission level.

Chaining filter and map together to first const highValueItems =

Piping
select a subset of data and then transform it, [Link](i => [Link] >
Operations
creating a powerful, readable data pipeline. 100).map(i => [Link]);

9. Closures and Scope Chains

A closure is the combination of a function bundled together (enclosed) with references to its
surrounding state (the lexical environment). In simpler terms, a closure gives you access to an
outer function’s scope from an inner function.

Key Principle: Lexical Scoping JavaScript uses lexical scoping, meaning that the scope of a
variable is determined by where the variable is defined in the source code, not where it is called.

Real-World Examples:

Example Description Code Snippet (Conceptual)

Creating private variables that can function createCounter() { let

only be accessed or modified by a
Data count = 0; return { increment: ()
specific set of public methods (the
Privacy/Encapsulation => count++, getCount: () => count
inner functions), mimicking private
}; }
class fields.

Creating a series of functions that

each take one argument and return const multiply = (a) => (b) => a *

Function Currying a new function until all arguments b; const double = multiply(2);
are collected, often used in double(5); // 10
functional programming libraries.

for (let i = 0; i <

Using a closure to correctly capture [Link]; i++) {
Event Handlers in the value of a loop variable for an
buttons[i].onclick =
Loops asynchronous operation (like an
(function(index) { return () =>
event listener) that executes later.
[Link](index); })(i); }
10. Prototypes and Inheritance

JavaScript is a prototype-based language. Every object has a private property which holds a link
to another object called its prototype. That prototype object has its own prototype, and so on,
until an object with null as its prototype is reached. This chain is used for inheritance.

Key Concepts:

Prototype Chain: The mechanism by which objects inherit features from one another.

[Link] : The root of almost all JavaScript objects.

__proto__ (deprecated): The actual link to the prototype object.

[Link]() : The modern, standard way to get an object’s prototype.

Real-World Examples:

Example Description Code Snippet (Conceptual)

Although generally discouraged,

adding a custom method to
Extending [Link] = function() {
[Link] to make it
Built-in Objects return this[[Link] - 1]; };
available on all arrays (e.g., a custom
last() method).

Using [Link]() to set up a

Creating a
prototype chain for a custom object const car =
Custom Class
type (e.g., a Vehicle prototype for [Link]([Link]);
Hierarchy
Car and Motorcycle objects).

Placing methods on a constructor’s

prototype instead of directly on the function User(name) { [Link] = name;
Performance
object instance. This ensures that all } [Link] = function() { /*
Optimization
instances share a single copy of the ... */ };
method, saving memory.

11. Asynchronous JavaScript

JavaScript is single-threaded, meaning it can only execute one task at a time. Asynchronous
operations (like fetching data from a server) are handled by the Event Loop, which allows non-
blocking execution.

The Event Loop:

1. Call Stack: Where synchronous code is executed.

 2. Web APIs/Node APIs: Where asynchronous operations (like setTimeout , fetch , DOM
events) are handled by the browser/Node environment.

3. Callback Queue (Task Queue): Where callbacks from Web APIs are placed when their
operation is complete.

4. Event Loop: Constantly checks if the Call Stack is empty. If it is, it pushes the first function
from the Callback Queue onto the Call Stack.

Evolution of Async:

Method Description Drawback

Callback Hell (deeply nested,

Callbacks Functions passed as arguments to be executed later.
hard-to-read code).

An object representing the eventual completion (or Still requires chaining with
Promises
failure) of an asynchronous operation and its resulting .then() , which can be
(ES6)
value. verbose.

Real-World Examples:

Example Description Code Snippet (Conceptual)

Using fetch which returns a

fetch('/api/users').then(response =>
Loading Data Promise, to request user data
[Link]()).then(data =>
from API from a remote server and then
[Link](data));
process the response.

Using [Link]() to wait for

Handling [Link]([fetchUsers(),
several independent API calls to
Multiple fetchProducts()]).then(([users,
complete before rendering a page
Dependencies products]) => { /* render */ });
that requires all their data.

Using Promises to ensure that one

animation or visual effect
Animation animateElement(el).then(() =>
completes before the next one
Sequencing showNextStep());
begins, creating a smooth,
sequential user experience.

12. ES6+ Features

ECMAScript 2015 (ES6) introduced major features that fundamentally changed how JavaScript is
written.

Key ES6+ Features:

 Feature Description Example

Template Backticks ( ` ) for string interpolation and

`Hello ${name}`
Literals multi-line strings.

... used to expand an iterable (Spread) or

Spread/Rest [...arr1, ...arr2] , function
gather remaining arguments into an array
Operators sum(...args)
(Rest).

Syntactic sugar over JavaScript’s existing class Car { constructor() { /*

Classes
prototype-based inheritance. ... */ } }

Standardized way to organize code into export const PI = 3.14; import

Modules
separate files using import and export . { PI } from './[Link]';

Real-World Examples:

Code Snippet
Example Description
(Conceptual)

Using the Spread operator ( ... ) to create a new object by const newState = {

State Merging merging an existing state object with new properties, a ...oldState, counter:

common pattern in state management (e.g., Redux). 1 };

Using ES Modules ( import / export ) to separate business

// [Link]: export
Code logic, utility functions, and UI components into distinct
function format(data)
Organization files, improving maintainability and reducing global scope
{ ... }
pollution.

Using Template Literals to construct complex HTML const html =

Dynamic String
strings or SQL queries by embedding variables directly, User: ${[Link]}
Generation
avoiding cumbersome string concatenation. ;

III. Professional/Advanced Topics

13. Async/Await

async/await is a modern syntax built on top of Promises, making asynchronous code look and
behave more like synchronous code, which is easier to read and debug.

async function: Declares a function as asynchronous. It implicitly returns a Promise.

await expression: Can only be used inside an async function. It pauses the execution of
the async function until the Promise it is waiting for is resolved.
Error Handling: Unlike Promise chains where errors are caught with .catch() , async/await
uses the familiar synchronous try...catch block.

Real-World Examples:

Example Description Code Snippet (Conceptual)

Fetching a user’s ID, and then

using that ID to fetch their profile async function getProfile(id) { const user
Sequential
details, ensuring the second call = await fetchUser(id); const profile = await
API Calls
only happens after the first fetchDetails([Link]); return profile; }
succeeds.

Wrapping a critical data fetching

operation in a try...catch block try { const data = await fetchData(); }
Robust Error
to gracefully handle network catch (error) { displayError([Link]);
Handling
failures or server errors and display }
a user-friendly message.

Creating a utility function that

pauses execution for a specified const sleep = (ms) => new Promise(resolve
Simulating
time, often used in testing or for => setTimeout(resolve, ms)); await
Delays
creating controlled visual delays in sleep(1000);
the UI.

14. Error Handling and Debugging

Effective error handling and debugging are crucial for building robust applications.

Error Handling Constructs:

try...catch : Catches synchronous errors. The try block contains the code to monitor,
and the catch block handles any errors thrown.

finally : Executes code after try and catch , regardless of the outcome (e.g., for cleanup).

throw : Used to create and throw a custom error.

Debugging Tools: The most powerful tool is the browser’s Developer Tools (DevTools). Key
features include:

Breakpoints: Pausing code execution at a specific line.

Watch: Monitoring the value of variables.

Call Stack: Seeing the sequence of function calls that led to the current point.

debugger keyword: Acts like a breakpoint in code.

Real-World Examples:

Example Description Code Snippet (Conceptual)

Throwing a custom ValidationError when a

Input
user submits invalid data, allowing a higher-level if (!isValid(data)) { throw
Validation
function to catch it and display a specific error new Error('Invalid input'); }
Error
message.

Using a finally block to ensure that a resource try { openFile();

Resource (like a file handle or a loading spinner) is closed processData(); } catch (e) {

Cleanup or hidden, even if an error occurs during the logError(e); } finally {

main operation. closeFile(); }

Setting a breakpoint in DevTools that only

// DevTools: Right-click
Conditional pauses execution when a specific condition is
breakpoint -> Edit breakpoint -
Breakpoints met (e.g., when a loop counter i equals 100),
> i === 100
saving time during debugging.

15. Advanced Object Features

JavaScript objects have capabilities beyond simple key-value storage, enabling powerful meta-
programming.

Key Advanced Features:

Feature Description Use Case

An object that wraps another object (the target) Creating reactive objects for
Proxy and intercepts fundamental operations (like state management or logging
property lookup, assignment, enumeration). all property access.

A built-in object that provides methods for Performing the default

Reflect interceptable JavaScript operations, often used behavior for an operation that
in conjunction with Proxy . a Proxy has intercepted.

Iterators are objects that define a sequence and

Implementing custom data
a return value upon termination. Generators are
structures (like a linked list) or
Iterators/Generators functions that can be paused and resumed,
handling infinite data streams
producing a sequence of values using the yield
efficiently.
keyword.

Real-World Examples:
 Example Description Code Snippet (Conceptual)

const handler = { set: (target, key,

State Using a Proxy to automatically log a
value) => { [Link](\ Set ${key} to
Change message or trigger a UI update every time
${value}`); target[key] = value; return true; } };
Tracking a property on a state object is set.
const proxy = new Proxy(data, handler);`

Using a Generator function to calculate

and yield values one at a time only when
Lazy Data function* idMaker() { let index = 0;
requested, which is useful for processing
Loading while (true) yield index++; }
very large datasets without consuming
excessive memory.

Intercepting property assignment on a

Input user object to ensure that the assigned
// Proxy handler checks if value is
Validation value meets certain criteria (e.g., age must
valid before setting
Proxy be a number > 0) before the assignment is
allowed.

16. Functional Programming Concepts

Functional Programming (FP) is a programming paradigm that treats computation as the

evaluation of mathematical functions and avoids changing state and mutable data.

Core FP Principles:

Immutability: Data cannot be changed after it is created. Instead of modifying an array, you
create a new one.

Pure Functions: Functions that, given the same input, will always return the same output
and have no side effects (e.g., modifying global state, I/O operations).

Function Composition: Combining simple functions to build more complex ones, where the
output of one function is the input of the next.

Real-World Examples:
 Example Description Code Snippet (Conceptual)

Ensuring that
state updates are
immutable by
using the spread
operator or
State Updates
[Link]() const newState = { ...oldState, value: newValue };
in React/Redux
to create a new
state object
instead of
modifying the old
one directly.

Using a sequence
of pure functions
( filter , map ,
reduce ) to
Data
transform raw const report =
Transformation
data into a final [Link](isValid).map(format).reduce(calculateTotal);
Pipeline
report, making
the logic easy to
test and reason
about.

Creating reusable,
partially applied
functions for
common tasks,
Curried Utility const logError = log('ERROR'); logError('Database
such as a logging
Functions connection failed');
function that is
pre-configured
with a severity
level.

17. Performance and Optimization

Optimizing JavaScript code is essential for fast, responsive web applications.

Key Optimization Techniques:

 Technique Description Benefit

Limits the rate at which a function is called. It

Prevents excessive API calls during
ensures a function is only executed after a
Debouncing rapid user input (e.g., typing in a
specified time has passed without any further
search box).
calls.

Ensures smooth performance

Limits the rate at which a function is called to a
Throttling during continuous events like
maximum of once every X milliseconds.
window resizing or scrolling.

Allows running scripts in background threads, Performing heavy calculations (e.g.,

Web
separate from the main thread, preventing long- image processing) without freezing
Workers
running scripts from blocking the UI. the user interface.

Caching the results of expensive function calls and Speeds up functions that are called
Memoization returning the cached result when the same inputs frequently with the same
occur again. arguments.

Real-World Examples:

Example Description Code Snippet (Conceptual)

Applying debouncing to the onkeyup

Search Input event of a search input field to only fire [Link]('keyup',

Debounce the API request 300ms after the user debounce(fetchResults, 300));
stops typing.

Throttling the scroll event handler to

Scroll Event check the user’s scroll position only [Link]('scroll',
Throttling once every 100ms, preventing throttle(checkScrollPosition, 100));
performance issues on mobile devices.

Offloading a complex, CPU-intensive

task (like calculating a fractal or
Heavy Data const worker = new Worker('[Link]');
processing a large JSON file) to a Web
Calculation [Link](data);
Worker to keep the main thread
responsive for UI updates.

18. Module Bundlers and Tooling

Modern JavaScript development relies heavily on tooling to manage dependencies, optimize

code, and ensure compatibility.

Key Tools:
 Tool Category Description Examples

Module Takes modules with dependencies and merges them into a few Webpack, Rollup,
Bundlers files (bundles) suitable for the browser. Parcel, Vite

Converts modern JavaScript (ES6+) into older, compatible

Transpilers Babel
versions (ES5) for older browsers.

Analyzes code for potential errors, stylistic issues, and

Linters ESLint, JSLint
adherence to coding standards.

Automatically formats code to ensure consistent style across a

Formatters Prettier
project.

Real-World Examples:

Example Description Code Snippet (Conceptual)

Using Babel to transpile modern features like

Legacy
async/await and arrow functions into ES5 // Babel config: presets:
Browser
syntax, ensuring the application works on older ['@babel/preset-env']
Support
browsers.

Configuring a bundler (like Webpack) to split the import('./my-large-

Code application into smaller, on-demand chunks,
[Link]').then(module => { /*
Splitting which significantly reduces the initial load time
use module */ });
of the application.

Integrating ESLint into the development

Enforcing workflow to automatically flag issues like // .[Link]: rules: {

Code unused variables, unsafe equality checks ( == ), 'eqeqeq': 'error', 'no-unused-

Quality and incorrect indentation before code is vars': 'warn' }
committed.

IV. Interview Questions

19. Core JavaScript Concepts

1. Explain Hoisting in JavaScript.

Answer: Hoisting is a JavaScript mechanism where variable and function declarations are
moved to the top of their containing scope during the compilation phase, before code
execution. Only the declaration is hoisted, not the initialization. var variables are initialized
with undefined , while let and const are also hoisted but remain uninitialized, leading to
 a ReferenceError if accessed before the actual declaration (this is known as the
“Temporal Dead Zone”).

2. What is the Event Loop and why is it important?

Answer: The Event Loop is a crucial part of JavaScript’s concurrency model. It

continuously checks the Call Stack and the Callback Queue (Task Queue). If the Call Stack
is empty, it takes the first message/callback from the queue and pushes it onto the stack for
execution. This mechanism allows JavaScript, despite being single-threaded, to perform
non-blocking I/O operations (like network requests and timers) by offloading them to the
browser’s Web APIs and processing their results asynchronously.

3. What is a Closure? Provide a practical example.

Answer: A closure is a function that retains access to its lexical scope (the variables in the
environment where it was declared), even after the outer function has finished executing.
They are essential for creating private variables and maintaining state.

Example: A factory function that creates a private counter:

function createCounter() {
let count = 0; // 'count' is a private variable
return function() {
count += 1;
return count;
};
}
const counter = createCounter();
[Link](counter()); // 1
[Link](counter()); // 2 (The inner function remembers 'count')

20. Advanced Topics

4. Describe the difference between Prototypal and Classical Inheritance.

Answer: Classical Inheritance (used in languages like Java/C++) is based on classes

creating blueprints for objects, and inheritance is achieved by copying behavior from a
parent class to a child class. Prototypal Inheritance (used in JavaScript) is based on objects
inheriting properties and methods directly from other objects (their prototypes). The class
keyword in ES6 is merely syntactic sugar over JavaScript’s existing prototype-based
inheritance model.

5. How does the this keyword work in JavaScript?

 Answer: The value of this is determined by how a function is called, not where it is
defined.
Global Context: this refers to the global object ( window in browsers, global in
[Link]).

Method Call: this refers to the object the method is called on.

Constructor Call: this refers to the newly created instance.

Explicit Binding: Using call() , apply() , or bind() , which explicitly set the value of
this .

Arrow Functions: Arrow functions do not have their own this . They inherit the this
value from their surrounding (lexical) scope.

6. What is the difference between Promises and Async/Await?

Answer: Promises are objects that represent the eventual result of an asynchronous
operation, providing a structured way to handle success ( .then() ) and failure ( .catch() ).
Async/Await is a modern syntax built on top of Promises. It allows asynchronous code to be
written in a way that looks and behaves synchronously, making it much cleaner and easier
to read, especially when dealing with sequential asynchronous operations. async functions
implicitly return a Promise, and await pauses the function execution until the Promise
resolves.

21. Coding Challenges

7. Write a function to flatten a nested array of any depth.

Answer:

function flattenArray(arr) {
let result = [];
for (const element of arr) {
if ([Link](element)) {
result = [Link](flattenArray(element)); // Recursive call
} else {
[Link](element);
}
}
return result;
}
// Modern ES6 solution:
const flattenArrayES6 = (arr) => [Link](Infinity);

8. Implement a simple Debounce function.

 Answer:

function debounce(func, delay) {

let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
[Link](this, args);
}, delay);
};
}

22. Real-World Scenarios

9. How would you prevent a user from submitting a form multiple times?

Answer:
1. Disable the Submit Button: Immediately after the first click, disable the submit
button using JavaScript ( [Link] = true; ).

2. Use a Flag Variable: Set a boolean flag ( isSubmitting = true ) when the submission
starts. Check this flag at the beginning of the submission handler and exit if it’s
already true. Reset the flag in the success or error callback of the API call.

10. What are some common performance pitfalls in JavaScript?

Answer:
1. DOM Manipulation in Loops: Repeatedly accessing or modifying the DOM inside a
loop is slow. Instead, build the changes in memory (e.g., using a Document Fragment
or a single string) and apply them to the DOM once.

2. Global Variables: Excessive use of global variables can lead to namespace collisions
and make code harder to maintain.

3. Inefficient Array/Object Operations: Using methods like unshift() or splice() on

large arrays is slow as it requires re-indexing all subsequent elements. Prefer push()
or creating new arrays with the spread operator for better performance.

4. Lack of Debouncing/Throttling: Not limiting the execution rate of event handlers for
events like scroll , resize , or keyup .

11. Explain the concept of “Temporal Dead Zone” (TDZ).

Answer: The TDZ is the period of time during which let and const variables exist but
cannot be accessed. It starts from the beginning of the variable’s scope and ends when the
variable is declared and initialized. Attempting to access a variable in the TDZ results in a
 ReferenceError . This is a key difference from var , which is initialized with undefined
when hoisted.

End of Document