1. What Is Hoisting in JavaScript?

Hoisting refers to JavaScript's behavior of moving variable and function declarations to the
top of their scope during the compilation phase. While declarations are hoisted, initializations
are not.

[Link](foo); // undefined

var foo = 1;

[Link](foo); // 1

Visualized as:

var foo;

[Link](foo); // undefined

foo = 1;

[Link](foo); // 1

Variables Declared with let, const, and class

These are hoisted but remain uninitialized, leading to a ReferenceError if accessed before
declaration.

[Link](bar); // ReferenceError

let bar = 'value';

Function Declarations vs. Expressions

Function declarations are fully hoisted (both declaration and definition), while function
expressions are only partially hoisted (declaration without initialization).

[Link](declared()); // Works

function declared() {

return 'Declared function';

[Link](expr); // undefined

[Link](expr()); // TypeError: expr is not a function

var expr = function () {

return 'Function expression';

};

Imports

Import statements are hoisted, making imported modules available throughout the file.

import foo from './foo';

[Link](); // Accessible

2. How Do let, var, and const Differ?

1. Scope:

• var**: Function-scoped or globally scoped.

• let and const**: Block-scoped, confined to their nearest enclosing block.

function test() {

var a = 1;

let b = 2;

const c = 3;

[Link](a); // ReferenceError

[Link](b); // ReferenceError

[Link](c); // ReferenceError

2. Initialization:

• var and let**: Can be declared without initialization.

• const**: Must be initialized during declaration.

var a;

let b;

const c; // SyntaxError: Missing initializer

3. Redeclaration:
 • var**: Allows redeclaration in the same scope.

• let and const**: Redeclaration is not allowed.

var x = 1;

var x = 2; // Valid

let y = 1;

let y = 2; // SyntaxError

4. Reassignment:

• var and let**: Reassignment is allowed.

• const**: Reassignment is not allowed.

const z = 1;

z = 2; // TypeError

5. Hoisting:

• var**: Hoisted and initialized to undefined.

• let and const**: Hoisted but not initialized, causing a ReferenceError if accessed before
declaration.

[Link](a); // undefined

var a = 1;

[Link](b); // ReferenceError

let b = 2;

3. What Is the Difference Between == and ===?

Equality Operator (==):

• Converts operands to a common type before comparison.

• May produce unexpected results due to type coercion.

42 == '42'; // true
0 == false; // true

null == undefined; // true

Strict Equality Operator (===):

• No type conversion; checks both value and type.

• Ensures accurate comparisons.

42 === '42'; // false

0 === false; // false

null === undefined; // false

Best Practice:

Prefer === to avoid unexpected behavior caused by type coercion, except when comparing
against null or undefined.

var value = null;

[Link](value == null); // true

[Link](value === null); // true

4. What Is the Event Loop in JavaScript?

The event loop allows JavaScript to handle asynchronous tasks on a single thread, ensuring
smooth execution without blocking.

Components:

1. Call Stack: Tracks function calls in a LIFO order.

2. Web APIs: Handle asynchronous tasks like timers and HTTP requests.

3. Task Queue: Stores tasks like setTimeout and UI events.

4. Microtask Queue: Handles high-priority tasks like Promise callbacks.

Execution Order:

1. Synchronous code executes first (call stack).

2. Microtasks are processed next.

3. Macrotasks are executed afterward.

[Link]('Start');
setTimeout(() => [Link]('Timeout'), 0);

[Link]().then(() => [Link]('Promise'));

[Link]('End');

Output:

Start

End

Promise

Timeout

5. What Is Event Delegation?

Event delegation uses a single event listener on a parent element to manage events on its
child elements. This approach takes advantage of event bubbling, improving efficiency.

• Reduces memory usage by limiting the number of listeners.

• Dynamically handles added or removed child elements.

[Link]('parent').addEventListener('click', (event) => {

if ([Link] === 'BUTTON') {

[Link](`Clicked ${[Link]}`);

});

6. How Does this Work in JavaScript?

The value of this depends on how a function is invoked:

1. Default Binding: Refers to the global object (window in browsers).

2. Implicit Binding: Refers to the object before the dot.

3. Explicit Binding: Defined using call, apply, or bind.

 4. Arrow Functions: Lexically inherit this from the surrounding scope.

const obj = {

name: 'Alice',

greet() {

[Link]([Link]);

},

};

[Link](); // Alice

7. How Do Cookies, localStorage, and sessionStorage Differ?

Cookies:

• Sent with every HTTP request.

• Limited to 4KB per domain.

• Can be set to expire.

[Link] = 'token=abc123; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/';

[Link]([Link]);

localStorage:

• Persistent storage (until manually cleared).

• 5MB limit per origin.

[Link]('key', 'value');

[Link]([Link]('key'));

sessionStorage:

• Data cleared when the tab or browser is closed.

• Limited to 5MB.

[Link]('key', 'value');

[Link]([Link]('key'));

8. What Are <script>, <script async>, and <script defer>?

<script>:

• Blocks HTML parsing until the script loads and executes.

<script async>:

• Loads scripts asynchronously.

• Executes as soon as the script is ready, potentially before HTML parsing completes.

<script defer>:

• Loads scripts asynchronously.

• Executes only after the HTML parsing is complete.

<script src="[Link]"></script>

<script async src="[Link]"></script>

<script defer src="[Link]"></script>

9. How Do null, undefined, and Undeclared Variables Differ?

null:

Explicitly represents no value. Use === to check.

undefined:

Indicates a variable has been declared but not assigned a value.

Undeclared:

Variables not declared will throw a ReferenceError.

let a;

[Link](a); // undefined

let b = null;

[Link](b); // null

10. What Is the Difference Between .call and .apply?

.call:

Accepts arguments as a comma-separated list.

.apply:

Accepts arguments as an array.

function sum(a, b) {

return a + b;

[Link]([Link](null, 1, 2)); // 3

[Link]([Link](null, [1, 2])); // 3

11. What Is [Link] and Why Is It Useful?

The [Link] method allows you to create a new function with a

specific this context and optional preset arguments. It’s particularly useful for ensuring a
function has the correct this context when passed to another function or used as a callback.

const john = {

age: 42,

getAge: function () {

return [Link];

},

};

[Link]([Link]()); // 42

const unboundGetAge = [Link];

[Link](unboundGetAge()); // undefined

const boundGetAge = [Link](john);

[Link](boundGetAge()); // 42

const mary = { age: 21 };

const boundGetAgeMary = [Link](mary);

[Link](boundGetAgeMary()); // 21

Common Uses:

1. **Binding this: bind is often used to fix the this value for a method, ensuring it always
refers to the intended object.

2. Partial Application: You can predefine some arguments for a function using bind.

3. Method Borrowing: bind allows methods from one object to be used on another
object.

12. Why Use Arrow Functions in Constructors?

Arrow functions automatically bind the this value to the surrounding lexical scope, which
eliminates issues with context in methods. This behavior makes code more predictable and
easier to debug.

const Person = function (name) {

[Link] = name;

this.sayName1 = function () {

[Link]([Link]);

};

this.sayName2 = () => {

[Link]([Link]);

};

};

const john = new Person('John');

const dave = new Person('Dave');

john.sayName1(); // John

john.sayName2(); // John

[Link](dave); // Dave

[Link](dave); // John

When to Use:

• In scenarios like React class components, where methods are passed as props and
need to retain their original this context.

13. How Does Prototypal Inheritance Work?

Prototypal inheritance allows objects to inherit properties and methods from other objects
through the prototype chain.

Key Concepts:

1. Prototypes:

Every JavaScript object has a prototype, which is another object from which it inherits
properties.

function Person(name, age) {

[Link] = name;

[Link] = age;

[Link] = function () {

[Link](`Hello, my name is ${[Link]} and I am ${[Link]} years old.`);

};

const john = new Person('John', 30);

[Link](); // Hello, my name is John and I am 30 years old.

2. Prototype Chain:
JavaScript looks for properties and methods on the object and continues up the chain until it
finds the property or reaches null.

3. Constructor Functions:

Used with new to create objects and set their prototype.

function Animal(name) {

[Link] = name;

[Link] = function () {

[Link](`My name is ${[Link]}`);

};

function Dog(name, breed) {

[Link](this, name);

[Link] = breed;

[Link] = [Link]([Link]);

[Link] = function () {

[Link]('Woof!');

};

const fido = new Dog('Fido', 'Labrador');

[Link](); // My name is Fido

[Link](); // Woof!

14. What’s the Difference Between function Person(){}, const person = Person(), and const
person = new Person()?
Function Declaration:

function Person() {} is a standard function declaration. When written in PascalCase, it

conventionally represents a constructor function.

Function Call:

const person = Person() calls the function and executes its code but does not create a new
object.

Constructor Call:

const person = new Person() creates a new object, setting its prototype to [Link].

15. How Do Function Declarations and Expressions Differ?

Function Declarations:

function foo() {

[Link]('Function declaration');

• Hoisted with their body.

• Can be invoked before their definition.

Function Expressions:

const foo = function () {

[Link]('Function expression');

};

• Only the variable is hoisted, not the function body.

• Cannot be invoked before their definition.

16. How Can You Create Objects in JavaScript?

1. Object Literals:

const person = { firstName: 'John', lastName: 'Doe' };

2. Object() Constructor**:

const person = new Object();

[Link] = 'John';
[Link] = 'Doe';

3. [Link]()**:

const proto = {

greet() {

[Link]('Hello!');

},

};

const person = [Link](proto);

[Link](); // Hello!

4. ES2015 Classes:

class Person {

constructor(name, age) {

[Link] = name;

[Link] = age;

17. What Are Higher-Order Functions?

Higher-order functions either:

1. Take other functions as arguments.

2. Return functions.

function multiplier(factor) {

return function (number) {

return number * factor;

};

}
const double = multiplier(2);

[Link](double(5)); // 10

18. Differences Between ES2015 Classes and ES5 Constructors

ES5 Constructor:

function Person(name) {

[Link] = name;

[Link] = function () {

[Link](`Hello, I’m ${[Link]}`);

};

ES2015 Class:

class Person {

constructor(name) {

[Link] = name;

greet() {

[Link](`Hello, I’m ${[Link]}`);

Key Differences:

• Syntax: Classes are easier to read and write.

• Inheritance: Classes use extends and super.

19. What Is Event Bubbling?

Event bubbling is when an event starts at the target element and propagates up through its
ancestors.
[Link]('click', () => [Link]('Parent clicked'));

[Link]('click', () => [Link]('Child clicked'));

Clicking the child triggers both handlers.

20. What Is Event Capturing?

Event capturing is when an event starts at the root and propagates down to the target
element.

Enabling Capturing:

[Link]('click', () => [Link]('Parent capturing'), true);

21. How Do the mouseenter and mouseover Events Differ in JavaScript and Browsers?

mouseenter

• Does not propagate through the DOM tree

• Fires solely when the cursor enters the element itself, excluding its child elements

• Triggers only once upon entering the parent element, regardless of its internal content

mouseover

• Propagates upwards through the DOM hierarchy

• Activates when the cursor enters the element or any of its descendant elements

• May lead to multiple event callbacks if there are nested child elements

22. Can You Differentiate Between Synchronous and Asynchronous Functions?

Synchronous Functions

• Execute operations in a sequential, step-by-step manner

• Block the program's execution until the current task completes

• Adhere to a strict, line-by-line execution order

• Are generally easier to comprehend and debug due to their predictable flow
 • Common use cases include reading files synchronously and iterating over large
datasets

Example:

const fs = require('fs');

const data = [Link]('[Link]', 'utf8');

[Link](data); // Blocks until file is read

[Link]('End of the program');

Asynchronous Functions

• Allow the program to continue running without waiting for the task to finish

• Enable other operations to proceed while waiting for responses or the completion of
time-consuming tasks

• Are non-blocking, facilitating concurrent execution and enhancing performance and

responsiveness

• Commonly used for network requests, file I/O, timers, and animations

Example:

[Link]('Start of the program');

fetch('[Link]

.then((response) => [Link]())

.then((data) => [Link](data)) // Non-blocking

.catch((error) => [Link](error));

[Link]('End of program');

23. Provide a Comprehensive Explanation of AJAX

AJAX (Asynchronous JavaScript and XML) encompasses a collection of web development

techniques that utilize various client-side technologies to build asynchronous web
applications. Unlike traditional web applications where every user interaction results in a
complete page reload, AJAX enables web apps to send and retrieve data from a server
asynchronously. This allows for dynamic updates to specific parts of a web page without
disrupting the overall page display and behavior.

Key Highlights:

• Asynchronous Operations: AJAX allows parts of a web page to update independently

without reloading the entire page.

• Data Formats: Initially utilized XML, but JSON has become more prevalent due to its
seamless compatibility with JavaScript.

• APIs: Traditionally relied on XMLHttpRequest, though fetch() is now the preferred

choice for modern web development.

XMLHttpRequest API

Example:

let xhr = new XMLHttpRequest();

[Link] = function () {

if ([Link] === [Link]) {

if ([Link] === 200) {

[Link]([Link]);

} else {

[Link]('Request failed: ' + [Link]);

};

[Link]('GET', '[Link] true);

[Link]();

• Process: Initiates a new XMLHttpRequest**, assigns a callback to handle state changes,

opens a connection to a specified URL, and sends the request.

fetch() API

Example:
fetch('[Link]

.then((response) => {

if (![Link]) {

throw new Error('Network response was not ok');

return [Link]();

})

.then((data) => [Link](data))

.catch((error) => [Link]('Fetch error:', error));

• Process: Starts a fetch request, processes the response with .then() to parse JSON data,
and handles errors using .catch().

How AJAX Operates with fetch

1. Initiating a Request

• fetch()** starts an asynchronous request to obtain a resource from a given URL.

• Example:

fetch('[Link] {

method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.

headers: {

'Content-Type': 'application/json',

},

});

2. Promise-Based Response

• fetch() returns a Promise that resolves to a Response object representing the server's
reply.

3. Managing the Response

• The Response object provides methods to handle the content, such as .json(), .text(),
and .blob().
 • Example:

fetch('[Link]

.then((response) => [Link]())

.then((data) => [Link](data))

.catch((error) => [Link]('Error:', error));

4. Asynchronous Nature

• fetch()** operates asynchronously, allowing the browser to perform other tasks while
awaiting the server's response.

• Promises (.then(), .catch()) are processed in the microtask queue as part of the event
loop.

5. Configuring Request Options

• The optional second parameter in fetch()** allows configuration of various request

settings, including HTTP method, headers, body, credentials, and caching behavior.

6. Handling Errors

• Errors such as network failures or invalid responses are captured and managed
through the Promise chain using .catch() or try/catch with async/await**.

24. What Are the Pros and Cons of Utilizing AJAX?

AJAX (Asynchronous JavaScript and XML) facilitates the asynchronous exchange of data
between web pages and servers, enabling dynamic content updates without necessitating full
page reloads.

Advantages

• Enhanced User Experience: Updates content seamlessly without refreshing the entire
page.

• Improved Performance: Reduces server load by fetching only the required data.

• Maintains State: Preserves user interactions and client-side states within the page.

Disadvantages

• Dependency on JavaScript: Functionality can break if JavaScript is disabled in the

browser.
 • Bookmarking Issues: Dynamic content updates make it difficult to bookmark specific
states of a page.

• SEO Challenges: Search engines may find it hard to index dynamically loaded content
effectively.

• Performance on Low-End Devices: Processing AJAX data can be resource-intensive,

potentially slowing down performance on less powerful devices.

25. How Do XMLHttpRequest and fetch() Differ?

Both XMLHttpRequest (XHR) and fetch() facilitate asynchronous HTTP requests in JavaScript,
but they vary in syntax, handling mechanisms, and features.

Syntax and Implementation

• XMLHttpRequest: Utilizes an event-driven approach, requiring event listeners to

manage responses and errors.

• fetch(): Employs a Promise-based model, offering a more straightforward and intuitive

syntax.

Setting Request Headers

• XMLHttpRequest: Headers are set using the setRequestHeader method.

• fetch(): Headers are provided as an object within the options parameter.

Sending the Request Body

• XMLHttpRequest: The request body is sent using the send method.

• fetch(): The body property within the options parameter is used to include the request
body.

Handling Responses

• XMLHttpRequest: Uses the responseType property to manage different response

formats.

• fetch(): Offers a unified Response object with .then methods for accessing data.

Managing Errors

• XMLHttpRequest: Errors are handled via the onerror event.

• fetch(): Errors are managed using the .catch method.

Controlling Caching

• XMLHttpRequest: Managing cache can be cumbersome and often requires workaround

strategies.

• fetch(): Directly supports caching options through its configuration.

Canceling Requests

• XMLHttpRequest: Requests can be aborted using the abort() method.

• fetch(): Utilizes AbortController for canceling requests.

Tracking Progress

• XMLHttpRequest: Supports progress tracking with the onprogress event.

• fetch(): Lacks native support for tracking progress.

Choosing Between Them: fetch() is generally favored for its cleaner syntax and Promise-based
handling, though XMLHttpRequest remains useful for specific scenarios like progress tracking.

26. What Are the Different Data Types in JavaScript?

JavaScript encompasses a variety of data types, which are categorized into two main groups:
primitive and non-primitive (reference) types.

Primitive Data Types

• Number: Represents both integer and floating-point numbers.

• String: Denotes sequences of characters, enclosed in single quotes, double quotes, or

backticks.

• Boolean: Logical values with true or false.

• Undefined: A variable that has been declared but not assigned a value.

• Null: Signifies the intentional absence of any object value.

• Symbol: A unique and immutable value used primarily as object property keys.

• BigInt: Allows representation of integers with arbitrary precision, useful for very large
numbers.

Non-Primitive Data Types

• Object: Stores collections of data and more complex entities.

 • Array: An ordered list of values.

• Function: Functions are treated as objects and can be defined using declarations or
expressions.

• Date: Represents dates and times.

• RegExp: Used for defining regular expressions for pattern matching within strings.

• Map: A collection of keyed data items, allowing keys of any type.

• Set: A collection of unique values.

Identifying Data Types: JavaScript is dynamically typed, meaning variables can hold different
types of data at various times. The typeof operator is used to determine a variable's type.

27. What Constructs Do You Use to Iterate Over Object Properties and Array Elements?

Looping through object properties and array items is a fundamental task in JavaScript, and
there are multiple methods to accomplish this. Below are some of the common approaches:

Iterating Over Objects

1. for...in Loop

Iterates over all enumerable properties of an object, including inherited ones.

for (const property in obj) {

if ([Link](obj, property)) {

[Link](property);

2. [Link]()

Returns an array containing the object's own enumerable property names.

[Link](obj).forEach((property) => [Link](property));

3. [Link]()

Provides an array of the object's own enumerable string-keyed [key, value] pairs.

[Link](obj).forEach(([key, value]) => [Link](`${key}: ${value}`));

4. [Link]()
Returns an array of all properties (including non-enumerable ones) directly found on the
object.

[Link](obj).forEach((property) => [Link](property));

Iterating Over Arrays

1. for Loop

A traditional loop for iterating over array elements.

for (let i = 0; i < [Link]; i++) {

[Link](arr[i]);

2. [Link]()

Executes a provided function once for each array element.

[Link]((element, index) => [Link](element, index));

3. for...of Loop

Iterates over iterable objects like arrays.

for (let element of arr) {

[Link](element);

4. [Link]()

Provides both the index and value of each array element within a for...of loop.

for (let [index, elem] of [Link]()) {

[Link](index, ': ', elem);

28. What Are the Advantages of Using Spread Syntax, and How Does It Differ from Rest
Syntax?

Spread Syntax
Introduced in ES2015, the spread syntax (...) is a powerful feature for copying and merging
arrays and objects without altering the originals. It's widely used in functional programming,
Redux, and RxJS.

• Cloning Arrays/Objects: Creates shallow copies.

const array = [1, 2, 3];

const newArray = [...array]; // [1, 2, 3]

const obj = { name: 'John', age: 30 };

const newObj = { ...obj, city: 'New York' }; // { name: 'John', age: 30, city: 'New York' }

• Combining Arrays/Objects: Merges them into a new entity.

const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

const mergedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

const obj1 = { foo: 'bar' };

const obj2 = { qux: 'baz' };

const mergedObj = { ...obj1, ...obj2 }; // { foo: 'bar', qux: 'baz' }

• Passing Function Arguments: Spreads array elements as individual arguments.

const numbers = [1, 2, 3];

[Link](...numbers); // Equivalent to [Link](1, 2, 3)

• Array vs. Object Spreads: Only iterables can be spread into arrays, while arrays can
also be spread into objects.

const array = [1, 2, 3];

const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }

Rest Syntax

The rest syntax (...) collects multiple elements into an array or object, functioning as the
opposite of spread syntax.
 • Function Parameters: Gathers remaining arguments into an array.

function addFiveToNumbers(...numbers) {

return [Link]((x) => x + 5);

const result = addFiveToNumbers(4, 5, 6, 7); // [9, 10, 11, 12]

• Array Destructuring: Collects remaining elements into a new array.

const [first, second, ...remaining] = [1, 2, 3, 4, 5];

// first: 1, second: 2, remaining: [3, 4, 5]

• Object Destructuring: Gathers remaining properties into a new object.

const { e, f, ...others } = { e: 1, f: 2, g: 3, h: 4 };

// e: 1, f: 2, others: { g: 3, h: 4 }

• Rest Parameter Rules: Must be the final parameter in a function.

function addFiveToNumbers(arg1, ...numbers, arg2) {

// Error: Rest element must be last element.

29. How Does a Map Object Differ from a Plain Object in JavaScript?

Map Object

• Key Flexibility: Allows keys of any type, including objects, functions, and primitives.

• Order Preservation: Maintains the order in which keys are inserted.

• Size Property: Includes a size property to easily determine the number of key-value
pairs.

• Iteration: Directly iterable with methods like forEach, keys(), values(), and entries().

• Performance: Typically offers better performance for larger datasets and frequent
modifications.

Plain Object

• Key Types: Primarily uses strings or symbols as keys. Non-string keys are converted to
strings.
 • Order: Does not guarantee the order of key insertion.

• Size Tracking: Lacks a built-in property to determine the number of keys; requires
manual counting.

• Iteration: Not inherently iterable. Requires methods like [Link](), [Link](),

or [Link]() to iterate.

• Performance: Generally faster for small datasets and simple operations.

// Map

const map = new Map();

[Link]('key1', 'value1');

[Link]({ key: 'key2' }, 'value2');

[Link]([Link]); // 2

// Plain Object

const obj = { key1: 'value1' };

obj[{ key: 'key2' }] = 'value2';

[Link]([Link](obj).length); // 1 (keys are strings)

30. What Are the Differences Between Map/Set and WeakMap/WeakSet?

The primary distinctions between Map/Set and WeakMap/WeakSet in JavaScript are outlined
below:

• Key Types:

• Map and Set accept keys of any type, including objects, primitives, and
functions.

• WeakMap and WeakSet exclusively use objects as keys, disallowing primitive

values like strings or numbers.

• Memory Management:

• Map and Set maintain strong references to their keys and values, preventing
their garbage collection.
 • WeakMap and WeakSet use weak references for keys (objects), allowing
garbage collection if there are no other strong references.

• Key Enumeration:

• Map and Set have enumerable keys that can be iterated over.

• WeakMap and WeakSet do not allow enumeration of keys, making it

impossible to retrieve lists of keys or values directly.

• Size Property:

• Map and Set provide a size property indicating the number of elements.

• WeakMap and WeakSet lack a size property since their size can change due to
garbage collection.

• Use Cases:

• Map and Set are suitable for general-purpose data storage and caching.

• WeakMap and WeakSet are ideal for storing metadata or additional object-
related information without preventing the objects from being garbage
collected when they are no longer needed.

31. What is a Practical Scenario for Using the Arrow => Function Syntax?

One effective application of JavaScript's arrow function syntax is streamlining callback

functions, especially when concise, inline function definitions are needed. Consider the
following example:

**Scenario: Doubling Array Elements with map

Imagine you have an array of numbers and you want to double each number using
the map method.

// Traditional function syntax

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = [Link](function (number) {

return number * 2;

});
[Link](doubledNumbers); // Output: [2, 4, 6, 8, 10]

By utilizing arrow function syntax, the same outcome can be achieved more succinctly:

// Arrow function syntax

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = [Link]((number) => number * 2);

[Link](doubledNumbers); // Output: [2, 4, 6, 8, 10]

32. How Do Callback Functions Operate in Asynchronous Tasks?

In the realm of asynchronous programming, a callback function is passed as an argument to

another function and is executed once a particular task completes, such as data retrieval or
handling input/output operations. Here's a straightforward explanation:

function fetchData(callback) {

setTimeout(() => {

const data = { name: 'John', age: 30 };

callback(data);

}, 1000);

fetchData((data) => {

[Link](data); // { name: 'John', age: 30 }

});

33. Can You Describe Debouncing and Throttling Techniques?

Debouncing and throttling are techniques used to control the rate at which functions are
executed, optimizing performance and managing event-driven behaviors in JavaScript
applications.

• Debouncing: Delays the execution of a function until a specified period has elapsed
since its last invocation. This is particularly useful for scenarios like handling search
 input where you want to wait until the user has finished typing before executing a
function.

function debounce(func, delay) {

let timeoutId;

return (...args) => {

clearTimeout(timeoutId);

timeoutId = setTimeout(() => [Link](this, args), delay);

};

• Throttling: Restricts a function to be executed no more than once within a given

timeframe. This is beneficial for handling events that fire frequently, such as window
resizing or scrolling.

function throttle(func, limit) {

let inThrottle;

return (...args) => {

if (!inThrottle) {

[Link](this, args);

inThrottle = true;

setTimeout(() => (inThrottle = false), limit);

};

These strategies help in enhancing application performance by preventing excessive function

calls.

34. How Does Destructuring Assignment Work for Objects and Arrays?

Destructuring assignment in JavaScript provides a concise way to extract values from arrays or
properties from objects into individual variables.
// Array destructuring

const [a, b] = [1, 2];

// Object destructuring

const { name, age } = { name: 'John', age: 30 };

This syntax employs square brackets for arrays and curly braces for objects, allowing for
streamlined variable assignments directly from data structures.

35. What is Hoisting in the Context of Functions?

Hoisting in JavaScript refers to the behavior where function declarations are moved to the top
of their containing scope during the compilation phase. This allows functions to be invoked
before their actual definition in the code. Conversely, function expressions and arrow
functions must be defined prior to their invocation to avoid errors.

// Function declaration

hoistedFunction(); // Works fine

function hoistedFunction() {

[Link]('This function is hoisted');

// Function expression

nonHoistedFunction(); // Throws an error

var nonHoistedFunction = function () {

[Link]('This function is not hoisted');

};

36. How Does Inheritance Work in ES2015 Classes?

In ES2015, JavaScript introduces the class syntax with the extends keyword, enabling one class
to inherit properties and methods from another. The super keyword is used to access the
parent class's constructor and methods.

class Animal {
 constructor(name) {

[Link] = name;

speak() {

[Link](`${[Link]} makes a noise.`);

class Dog extends Animal {

constructor(name, breed) {

super(name);

[Link] = breed;

speak() {

[Link](`${[Link]} barks.`);

const dog = new Dog('Rex', 'German Shepherd');

[Link](); // Output: Rex barks.

In this example, the Dog class inherits from the Animal class, demonstrating how classes
facilitate inheritance and method overriding in JavaScript.

37. What is Lexical Scoping?

Lexical scoping in JavaScript determines how variable names are resolved based on their
location within the source code. Nested functions have access to variables from their parent
scopes, enabling them to utilize and manipulate these variables.

function outerFunction() {

let outerVariable = 'I am outside!';

function innerFunction() {

[Link](outerVariable); // 'I am outside!'

innerFunction();

outerFunction();

In this scenario, innerFunction can access outerVariable because of lexical scoping rules,
which allow inner functions to access variables defined in their outer scope.

38. What is Scope in JavaScript?

Scope in JavaScript defines the accessibility of variables and functions in different parts of the
code. There are three primary types of scope:

1. Global Scope: Variables declared outside any function or block are accessible
throughout the entire code.

2. Function Scope: Variables declared within a function are accessible only within that
function.

3. Block Scope: Introduced in ES6, variables declared with let or const within a block
(e.g., within {}) are accessible only within that block.

// Global scope

var globalVar = 'I am global';

function myFunction() {

// Function scope

var functionVar = 'I am in a function';

if (true) {

// Block scope

let blockVar = 'I am in a block';

[Link](blockVar); // Accessible here

// [Link](blockVar); // Throws an error

[Link](globalVar); // Accessible here

// [Link](functionVar); // Throws an error

In this example, globalVar is accessible globally, functionVar is confined to myFunction,

and blockVar is restricted to the if block.

39. What is the Spread Operator and How is it Used?

The spread operator (...) in JavaScript allows iterable elements (like arrays or objects) to be
expanded into individual elements. It's versatile and can be used for copying, merging, and
passing array elements as function arguments.

// Copying an array

const arr1 = [1, 2, 3];

const arr2 = [...arr1];

// Merging arrays

const arr3 = [4, 5, 6];

const mergedArray = [...arr1, ...arr3];

// Copying an object

const obj1 = { a: 1, b: 2 };

const obj2 = { ...obj1 };

// Merging objects

const obj3 = { c: 3, d: 4 };

const mergedObject = { ...obj1, ...obj3 };

// Passing array elements as function arguments

const sum = (x, y, z) => x + y + z;

const numbers = [1, 2, 3];

[Link](sum(...numbers)); // Output: 6

The spread operator simplifies operations such as copying arrays or objects, merging multiple
arrays or objects into one, and spreading elements of an array as individual arguments to
functions.

40. How Does this Binding Work in Event Handlers?

In JavaScript, the this keyword refers to the object that is executing the current piece of code.
Within event handlers, this typically points to the DOM element that triggered the event.
However, its value can change depending on how the handler is defined and invoked. To
ensure this references the intended context, techniques like using bind(), arrow functions, or
explicitly setting the context are employed.

These methods help maintain the correct reference for this within event handling functions,
ensuring consistent and predictable behavior across various event-driven scenarios in
JavaScript applications.

41. What is a Block Formatting Context (BFC) and How Does It Function?

A Block Formatting Context (BFC) is a pivotal concept in CSS that influences how block-level
elements are rendered and interact on a webpage. It creates an isolated environment where
block boxes are laid out, ensuring that elements like floats, absolutely positioned
elements, inline-blocks, table-cells, table-captions, and those with an overflow value other
than visible (except when propagated to the viewport) establish a new BFC.

Grasping how to initiate a BFC is essential because, without it, the containing box might fail to
encompass floated child elements. This issue is akin to collapsing margins but is often more
deceptive, causing entire boxes to collapse unexpectedly.

A BFC is formed when an HTML box satisfies at least one of the following criteria:

• The float property is set to a value other than none.

• The position property is assigned a value that is neither static nor relative.

• The display property is set to table-cell, table-caption, inline-block, flex, inline-

flex, grid, or inline-grid.

• The overflow property is set to a value other than visible.

Within a BFC, each box's left outer edge aligns with the left edge of its containing block (or the
right edge in right-to-left layouts). Additionally, vertical margins between adjacent block-level
boxes within a BFC collapse into a single margin.

42. What is z-index and How is a Stacking Context Created?

The z-index property in CSS manages the vertical stacking order of overlapping elements. It
only influences positioned elements—those with a position value other than static—and their
descendants or flex items.

In the absence of a z-index value, elements stack based on their order in the Document Object
Model (DOM), with elements appearing later in the HTML markup rendered on top of earlier
ones at the same hierarchy level. Positioned elements (those with non-static positioning) and
their children will always overlay elements with default static positioning, regardless of their
order in the HTML structure.

A stacking context is essentially a group of elements that share a common stacking order.
Within a local stacking context, the z-index values of child elements are relative to that
context rather than the entire document. Elements outside of this context—such as sibling
elements of a local stacking context—cannot interpose between layers within it. For instance,
if element B overlays element A, a child of element A, element C, cannot surpass element B in
the stacking order even if it has a higher z-index than element B.

Each stacking context operates independently; after stacking its child elements, the entire
context is treated as a single entity within the parent stacking context's order. Certain CSS
properties, like an opacity less than 1, a filter that isn't none, or a transform that isn't none,
can trigger the creation of a new stacking context.

43. How Does a Browser Match Elements to a CSS Selector?

This topic relates to writing efficient CSS, specifically how browsers interpret and apply CSS
selectors. Browsers process selectors from right to left, starting with the most specific (the key
selector) and moving outward. They first identify all elements that match the rightmost part
of the selector and then traverse up the DOM tree to verify if those elements meet the
remaining parts of the selector.

For example, consider the selector p span. Browsers will first locate all <span> elements and
then check each span's ancestor chain to determine if it is within a <p> element. Once
a <p> ancestor is found for a given <span>, the browser confirms that the <span> matches the
selector and ceases further traversal for that element.

The efficiency of selector matching is influenced by the length of the selector chain—the
shorter the chain, the quicker the browser can verify matches.

44. What is the Box Model in CSS and How Can You Control Its Rendering?

The CSS box model is a fundamental concept that describes the rectangular boxes generated
for elements in the document tree, determining how they are laid out and displayed. Each
box comprises a content area (such as text or images) surrounded by
optional padding, border, and margin areas.

The box model is responsible for calculating:

• The total space a block element occupies.

• Whether borders and margins overlap or collapse.

• The overall dimensions of a box.

Box Model Rules

• Dimensions Calculation: A block element's size is determined by

its width, height, padding, and border.

• Automatic Height: If no height is specified, a block element's height adjusts to its

content plus padding (unless floats are involved).

• Automatic Width: If no width is set, a non-floated block element expands to fit its
parent's width minus padding, unless a max-width is specified.
 • Certain block-level elements like table, figure, and input have inherent width
values and may not expand fully.

• Inline elements like span do not have a default width and will not expand to fit.

• Content Dimensions: An element's height and width are determined by its content.

• Box-Sizing: By default (box-sizing: content-box), padding and border are not included in
an element's width and height.

Note: Margins do not contribute to the actual size of the box; they affect the space outside
the box. The box's area is confined to the border and does not extend into the margin.

Additional Considerations

Understanding the box-sizing property is crucial as it alters how an

element's height and width are calculated.

• box-sizing: content-box:** The default behavior where only the content size is
considered.

• box-sizing: border-box:** Includes padding and border in the element's

total width and height, excluding margin.

Many CSS frameworks adopt box-sizing: border-box globally for a more intuitive sizing
approach.

45. How Do You Utilize the CSS display Property? Provide Examples.

The display property in CSS dictates how an element is rendered in the document flow.
Common values include none, block, inline, inline-block, flex, grid, table, table-row, table-cell,
and list-item.

Description:

none

Hides the element; it does not occupy any space in the layout. All child elements are also
hidden. The element is treated as if it does not exist in the DOM.

block

The element occupies the full width available, starting on a new line.

inline

The element does not start on a new line and only occupies as much width as necessary.
inline-block

Combines characteristics of both inline and block. The element flows with text but can
have width and height set.

flex

Defines the element as a flex container, enabling the use of flexbox layout for its children.

grid

Defines the element as a grid container, allowing for grid-based layout of its children.

table

Makes the element behave like a <table> element.

table-row

Makes the element behave like a <tr> (table row) element.

table-cell

Makes the element behave like a <td> (table cell) element.

list-item

Makes the element behave like a <li> (list item) element, enabling list-specific styling such
as list-style-type and list-style-position.

46. How Do relative, fixed, absolute, sticky, and static Positioning Differ?

In CSS, an element's positioning is determined by its position property, which can be set
to relative, fixed, absolute, sticky, or static. Here's how each behaves:

• static:** The default positioning. Elements flow naturally within the document.
The top, right, bottom, left, and z-index properties have no effect.

• relative:** The element is positioned relative to its normal position. Adjustments

using top, right, bottom, or left move the element without affecting the layout of
surrounding elements, leaving a gap where it would have been.

• absolute:** The element is removed from the normal document flow and positioned
relative to its nearest positioned ancestor (an ancestor with a position other
than static). If no such ancestor exists, it positions relative to the initial containing
block. Absolutely positioned elements do not affect the position of other elements
and can have width and height specified.
 • fixed:** Similar to absolute, but the element is positioned relative to the viewport,
meaning it stays in the same place even when the page is scrolled.

• sticky:** A hybrid of relative and fixed. The element behaves like relative until it
crosses a specified threshold (e.g., scroll position), after which it behaves like fixed,
sticking to its position within its parent container.

Understanding these positioning schemes is vital for controlling the layout and behavior of
elements, especially in responsive and dynamic designs.

47. What Should You Consider When Designing for Multilingual Websites?

Designing and developing for multilingual websites involves various considerations to ensure
accessibility and usability across different languages and cultures. This process is part of
internationalization (i18n).

Search Engine Optimization (SEO)

• Language Attribute: Use the lang attribute on the <html> tag to specify the page's
language.

• Locale in URLs: Include locale identifiers in URLs (e.g., en_US, zh_CN).

• Alternate Links: Utilize <link rel="alternate" hreflang="other_locale"

href="url_for_other_locale"> to inform search engines about alternate language
versions of the page.

• Fallback Pages: Provide a fallback page for unmatched languages using <link
rel="alternate" href="url_for_fallback" hreflang="x-default" />.

Locale vs. Language

• Locale: Controls regional settings like number formats, dates, and times, which may
vary within a language.

• Language Variations: Recognize that widely spoken languages have different dialects
and regional variations (e.g., en-US vs. en-GB, zh-CN vs. zh-TW).

Locale Prediction and Flexibility

• Automatic Detection: Servers can detect a visitor's locale using HTTP Accept-
Language headers and IP addresses.

• User Control: Allow users to easily change their preferred language and locale settings
to account for inaccuracies in automatic detection.
Text Length and Layout

• Variable Lengths: Be aware that translations can alter text length, potentially affecting
layout and causing overflow issues.

• Design Flexibility: Avoid rigid designs that cannot accommodate varying text lengths,
especially for headings, labels, and buttons.

Reading Direction

• Left-to-Right (LTR) vs. Right-to-Left (RTL): Accommodate different text directions, such
as Hebrew and Arabic, by designing flexible layouts that can adapt to both LTR and RTL
orientations.

Avoid Concatenating Translated Strings

• Dynamic Content: Instead of concatenating strings (e.g., "The date today is " + date),
use template strings with parameter substitution to accommodate different grammar
structures across languages.

Example:

// English

const message = `I will travel on ${date}`;

// Chinese

const message = `我会在${date}出发`;

Formatting Dates and Currencies

• Regional Formats: Adapt date and currency formats to match regional conventions
(e.g., "May 31, 2012" in the U.S. vs. "31 May 2012" in Europe).

Text in Images

• Scalability Issues: Avoid embedding text within images, as it complicates translation

and accessibility. Use text elements styled with CSS instead to allow for easier
localization.

Cultural Perceptions of Color

• Color Sensitivity: Be mindful that colors can carry different meanings and emotions
across cultures. Choose color schemes that are culturally appropriate and inclusive.
 inline-
Property block block inline

Fills up the width of Depends

its parent on
Size container. content. Depends on content.

Flows
along
with
other
content
Start on a new line and
and tolerates no allows
HTML elements other Flows along with other
next to it (except element content and allows
when you s beside other elements beside
Positioning add float) it. it.

Can
specify width and No. Will ignore if being
height Yes Yes set.

Can be aligned
with vertical-align No Yes Yes

Only horizontal sides

respected. Vertical
sides, if specified, do
not affect layout.
Vertical space it takes
All sides
up depends on line-
Margins and respecte
height, even though
paddings All sides respected. d.
the border and padding
 inline-
Property block block inline

appear visually around

the content.

Becomes like
a block element where
you can set vertical
Float - - margins and paddings.

Used for
buttons,
images,
and
form
fields
that
need
custom
sizes but Links <a>, text
Layout elements stay in formatting <span>, text
like <div>, <p>, <se line with styling - bold <b>,
Use Cases ction>. text. italics <i>.

48. How Do block, inline, and inline-block Display Types Differ?

The display property in CSS determines how elements are rendered on the page.
The block, inline, and inline-block values have distinct behaviors and use cases:
49. When Would You Prefer translate() Over Absolute Positioning, or Vice Versa?

The translate() function is a part of the CSS transform property and offers a different approach
to positioning compared to absolute positioning. Here's why you might choose one over the
other:

• Using translate():

• Flow Preservation: Elements remain in their original position within the

document flow, similar to position: relative.

• Performance Benefits: Modifying transform or opacity does not trigger browser

reflows or repaints; instead, it initiates a composition layer. This results in
smoother and more efficient animations, as translate() leverages the GPU for
rendering.

• Layout Stability: The surrounding layout remains unaffected since the

element's space is preserved.

.element {

transform: translateX(50px);

• Using absolute Positioning:

• Flow Removal: The element is taken out of the normal document flow, and its
position is calculated relative to the nearest positioned ancestor or the
viewport.

• Reflow Trigger: Changing an element's absolute position can cause the browser
to recalculate the layout (reflow), which is more CPU-intensive.

• Overlapping Control: Useful for precise placement of elements without

affecting other elements' positions.

.element {

position: absolute;

top: 20px;

left: 30px;

}
Why Choose translate()?

For animations and dynamic movements where performance and smoothness are
critical, translate() is more efficient. It avoids the costly reflows associated with changing
layout-affecting properties like top and left.

Why Choose absolute Positioning?

When you need to position elements precisely without regard to their original place in the
document flow, absolute positioning is the way to go. It's essential for creating overlays,
modals, and tooltips that need to appear in specific locations on the screen.

50. What Does * { box-sizing: border-box; } Do and What Are Its Advantages?

Applying * { box-sizing: border-box; } in your CSS ensures that all elements on the page use
the border-box model for calculating their width and height.

What It Does

By default, elements use box-sizing: content-box, where the width and height only account for
the content area. When you set box-sizing: border-box, the width and height properties
include the element's padding and border, but not the margin.

Comparison Table

Property box-sizing: content-box (default) box-sizing: border-box

content Yes Yes

padding No Yes

border No Yes

margin No No

Advantages
• Intuitive Sizing: Including padding and border within the width and height makes it
easier to calculate the size of elements, aligning more closely with designers'
expectations.

• Simplified Layouts: Prevents unexpected sizing issues, especially when

adding padding or border to elements, as it doesn't alter the total size.

• Consistency Across Frameworks: Many CSS frameworks like Bootstrap, Tailwind, and
Bulma set box-sizing: border-box globally to maintain consistency and predictability in
element sizing.