JavaScript - Advanced Flashcards

1
Q

call()

A

The call() method invokes a function with a specified this value and arguments provided individually.

For Example:

function greet(name) {
console.log(Hello, ${name}!);
}

greet.call(null, ‘John’);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

apply()

A

The apply() method is similar to call(), but it accepts arguments as an array or an array-like object.

For Example:

function greet(name) {
console.log(Hello, ${name}!);
}

greet.apply(null, [‘John’]);

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

bind()

A

The bind() method creates a new function with a specified this value and partially applies arguments.

For Example:

function greet(name) {
console.log(Hello, ${name}!);
}

const greetJohn = greet.bind(null, ‘John’);
greetJohn();

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Lexical Scope

A

Lexical scoping means that the scope of a variable is determined by its location within the source code.

Variables are accessible within their containing functions or blocks.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Dynamic Scope

A

Dynamic scoping, on the other hand, determines the scope of a variable based on the flow of the program during runtime.

The scope depends on the call stack.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Explain the concept of memoization in JavaScript

A

Memoization is a technique to cache the results of expensive function calls and return the cached result when the same inputs occur again.

For Example:

function memoize(fn) {
const cache = {};

return function(…args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
}

const result = fn.apply(this, args);
cache[key] = result;
return result;   }; }

const fibonacci = memoize(function(n) {
if (n <= 1) {
return n;
}
return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(5)); // Returns 5
console.log(fibonacci(10)); // Returns 55

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

How does Memoization improve performance?

A

It improves performance by avoiding unnecessary computations.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the process that JavaScript follows for Memory Management and Garbage Collection?

A

Allocation

Use

Deallocation

Garbage Collection

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Garbage Collection Allocation

A

When objects are created, memory is allocated to store them.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Garbage Collection Use

A

Objects are used and referenced by variables or other objects.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Garbage Collection Deallocation

A

When objects are no longer needed, memory is deallocated to free up resources.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Garbage Collection Step

A

JavaScript’s garbage collector periodically identifies and removes objects that are no longer reachable, i.e., not referenced by any variables or objects.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Different techniques for optimizing JavaScript code

A

Minification

Bundling

Caching

Debouncing

Memoization

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Minification

A

Removing unnecessary characters (whitespace, comments) to reduce file size.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Bundling

A

Combining multiple JavaScript files into a single file to reduce network requests.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Explain the concept of function composition in JavaScript

A

Function composition is the process of combining multiple functions to create a new function that performs multiple operations.

For Example:

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

const pipe = (…fns) => (x) => fns.reduce((y, fn) => fn(y), x);

const addAndMultiply = pipe(add, multiply);
console.log(addAndMultiply(2, 3)); // Returns 10 (2 + 3 = 5, 5 * 2 = 10)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are Web Workers in JavaScript

A

Web Workers are a browser feature that enables JavaScript code to run in the background on separate worker threads, separate from the main UI thread.

18
Q

Explain the concept of the prototype chain in JavaScript’s object-oriented programming model.

A

In JavaScript’s object-oriented programming model, each object has an internal property called the prototype.

The prototype is another object that the current object can inherit properties and methods from.

If a property or method is not found on the current object, JavaScript looks for it in the prototype chain, traversing up the chain until it finds the property or reaches the end (null prototype).

19
Q

What are the different ways to handle authentication and authorization in JavaScript applications?

A

JSON Web Tokens (JWT)

OAuth

Session-based authentication

Role-based access control (RBAC)

20
Q

JSON Web Tokens (JWT)

A

Storing user authentication information as digitally signed tokens.

21
Q

OAuth

A

Delegating user authentication to third-party providers like Google or Facebook.

22
Q

Session-based authentication

A

Storing session data on the server and using cookies or session tokens to identify authenticated users.

23
Q

Role-based access control (RBAC)

A

Assigning roles to users and granting permissions based on those roles.

24
Q

What is functional programming, and how can it be applied in JavaScript?

A

Functional programming is a programming paradigm that emphasizes the use of pure functions, immutability, and higher-order functions.

In JavaScript, functional programming can be applied by using functions as first-class citizens, avoiding side effects, and using higher-order functions for composition and abstraction.

For Example:

// Using map and filter higher-order functions for transformation and filtering
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2); // [2, 4, 6, 8, 10]
const evenNumbers = numbers.filter((n) => n % 2 === 0); // [2, 4]

// Using reduce to calculate the sum of an array
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15

25
Q

Explain the concept of lazy loading in JavaScript

A

Lazy loading is a technique that defers loading non-critical or off-screen resources until they are actually needed.

In web applications, lazy loading can be applied to images, scripts, or other assets that are not immediately visible or required for initial page rendering.

26
Q

What are the benefits of LazyLoading?

A

Benefits of lazy loading include reduced initial page load time, improved performance, and bandwidth savings, especially for larger or media-rich websites.

27
Q

What are the different techniques for handling memory leaks in JavaScript applications?

A

Properly managing event listeners by adding and removing them when necessary.

Clearing intervals and timeouts when they are no longer needed.

Releasing references to objects that are no longer needed.

Using a memory profiling tool to identify potential memory leaks and investigate their causes.

28
Q

How does JavaScript handle data storage and retrieval in the browser?

A

Cookies

Web Storage API

IndexedDB

29
Q

Cookies for data storage and retrieval

A

Small text files that can be used to store limited amounts of data.

30
Q

Web Storage API

A

Consists of the localStorage and sessionStorage objects, allowing key-value pair storage with larger capacity than cookies.

31
Q

IndexedDB

A

A NoSQL database built into the browser for storing larger amounts of structured data.

32
Q

Please describe the JS event loop

A

The JavaScript event loop is a mechanism that enables JavaScript to handle asynchronous operations and event-driven programming.

It manages the execution of code by keeping track of pending tasks, such as timers, network requests, and user interactions, and schedules their execution in an efficient manner.

33
Q

What are the steps taken in how the event loop works?

A

Call Stack

Web API’s

Callback Queue

Event Loop

Task Execution

Execution

Repeat

34
Q

Event Loop: Call Stack

A

The event loop starts with a call stack, which is a data structure that keeps track of the currently executing functions. Any code that needs to be executed is pushed onto the call stack.

35
Q

Event Loop: Web API’s

A

JavaScript provides various APIs like timers (setTimeout, setInterval), network requests (XMLHttpRequest, fetch), and DOM manipulation methods.

When code using these APIs is executed, the corresponding tasks are offloaded to the browser’s Web APIs for execution.

These tasks are handled separately from the main JavaScript thread.

36
Q

Event Loop: Callback Queue

A

When a Web API task completes or an event occurs (e.g., a user clicks a button), a callback associated with that task or event is placed in the callback queue.

37
Q

Event Loop: Event Loop

A

The event loop continuously monitors the call stack and the callback queue. If the call stack is empty, it checks if there are any callbacks in the callback queue.

38
Q

Event Loop: Task Execution

A

If there are callbacks in the callback queue, the event loop takes the oldest callback and pushes it onto the call stack for execution.

The callback is then removed from the callback queue.

39
Q

Event Loop: Execution

A

The callback function is executed, and any synchronous code inside it is processed.

If there are additional asynchronous tasks within the callback, such as timer callbacks or AJAX callbacks, they are registered for future execution.

40
Q

Event Loop: Repeat

A

The event loop repeats this process, continuously monitoring the call stack and the callback queue, ensuring that tasks are executed in the order they were added.