JS Flashcards
What are polyfills?
Polyfills in JavaScript are pieces of code that provide modern functionality in older browsers or environments that do not natively support it. They act as “fillers” for missing features, enabling developers to use new JavaScript methods, APIs, or standards while maintaining compatibility with outdated browsers
How polyfills works?
Feature Detection: Polyfills first check if a feature is supported in the browser. If not, they provide a custom implementation using existing JavaScript capabilities.
Implementation: They can be written manually or included through libraries like core-js or services like Polyfill.io4.
Examples:
Adding Array.prototype.includes() for older browsers.
Providing fetch() support where it’s unavailable.
What is AbortController
AbortController is a JavaScript interface used to cancel asynchronous operations, such as fetch requests, before they complete. It provides a standardized way to manage cancellations, improving resource efficiency and user experience
What is Abort Signal
Javascript is a single-threaded non-blocking asynchronous concurrent language. How do you understand that statement?
Single-threaded: JavaScript executes on a single thread, meaning it processes one task at a time. This is managed by the event loop.
Non-blocking: JavaScript uses asynchronous operations to avoid blocking the main thread. This allows other tasks to be processed while waiting for I/O operations to complete.
Asynchronous: JavaScript supports asynchronous programming, which enables tasks to be executed without blocking the main thread.
Concurrent: Although JavaScript is single-threaded, it achieves concurrency through asynchronous operations and the event loop, allowing multiple tasks to be processed in a seemingly concurrent manner.
What is EventLoop in JS?
The Event Loop in JavaScript is a mechanism that enables non-blocking I/O operations by managing asynchronous tasks. It consists of two main components: the call stack and the message queue (or task queue). The call stack executes synchronous code, while the message queue handles asynchronous tasks like setTimeout callbacks and promise resolutions. The Event Loop continuously checks the call stack; when it’s empty, it executes tasks from the message queue, ensuring efficient handling of asynchronous operations without blocking the main thread.
In more detail, tasks are categorized into macrotasks (e.g., setTimeout) and microtasks (e.g., promise callbacks), with microtasks prioritized over macrotasks. This allows for responsive and efficient execution of JavaScript code in both browsers and Node.js environments.
What is namespacing in JavaScript?
Namespacing is the act of wrapping a set of entities, variables, functions, and objects under a single umbrella term to avoid name collisions and prevent polluting the global object
Why are namespaces important in JavaScript?
Namespaces help prevent naming conflicts, encapsulate code from other code, and avoid polluting the global scope with too many variables, which is especially important when building feature-rich applications or using third-party components
What happens when you declare the same variable multiple times in JavaScript without namespacing?
JavaScript allows redeclaration of variables using var without errors, with the latest value overwriting previous ones. For example: var x = 10; var x = 20; results in x being 20
What is the simplest way to create a namespace in JavaScript?
The simplest way is using an object literal:
const car = {
start: () => { console.log(‘start’) },
stop: () => { console.log(‘stop’) }
};
What is the Temporal Dead Zone?
The Temporal Dead Zone is the area of a block where a variable is inaccessible until the moment the computer completely initializes it with a value. It starts at the beginning of the block’s local scope and ends when the variable is fully initialized
Which variable declarations in JavaScript are affected by the Temporal Dead Zone?
Variables declared with let, const, and class are affected by the Temporal Dead Zone
What error is thrown when accessing a variable in its Temporal Dead Zone?
A ReferenceError is thrown when attempting to access a variable that is in its Temporal Dead Zone
How does the Temporal Dead Zone behavior differ between var and let/const variables?
var variables are hoisted and automatically initialized with undefined, so their TDZ ends immediately after hoisting. let and const variables are hoisted but remain uninitialized in the TDZ until their declaration is reached in the code execution
What happens in this code and why?
let a = f();
const b = 2;
function f() { return b; }
This code throws a ReferenceError. When f() is called, it tries to access b which is still in the TDZ because its declaration hasn’t been reached yet
What happens in this code and why?
let x = 10;
if (true) {
console.log(x);
let x = 20;
}
This code throws a ReferenceError. Even though there’s an x variable in the outer scope, the inner x is in the TDZ at the point of the console.log() call. Due to lexical scoping, the inner x shadows the outer one
var variables in JS are hoisted and set to undefined when having no value. What about let/const, are their hoisted as well?
Yes, but their values are not defined before initialization so they land in Temporal Dead Zone until then. If we try to access them before value assignment it will throw an ReferenceError.
Generators in JS
The Generator object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.
Generator is a subclass of the hidden Iterator class.
function* generator() {
yield 1;
yield 2;
yield 3;
}
const gen = generator(); // “Generator { }”
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
Is it possible to create Infinite iterator in JS?
With a generator function, values are not evaluated until they are needed. Therefore a generator allows us to define a potentially infinite data structure.
function* infinite() {
let index = 0;
while (true) {
yield index++;
}
}
const generator = infinite(); // “Generator { }”
console.log(generator.next().value); // 0
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
// …
What is Iterator in JS?
An Iterator object is an object that conforms to the iterator protocol by providing a next() method that returns an iterator result object. All built-in iterators inherit from the Iterator class. The Iterator class provides a Symbol.iterator method that returns the iterator object itself, making the iterator also iterable. It also provides some helper methods for working with iterators.
What is Iteration protocols in JS?
Iteration protocols aren’t new built-ins or syntax, but protocols. These protocols can be implemented by any object by following some conventions.
There are two protocols: The iterable protocol and the iterator protocol.
The iterable protocol allows JavaScript objects to define or customize their iteration behavior, such as what values are looped over in a for…of construct. Some built-in types are built-in iterables with a default iteration behavior, such as Array or Map, while other types (such as Object) are not.
The iterator protocol defines a standard way to produce a sequence of values (either finite or infinite), and potentially a return value when all values have been generated.
An object is an iterator when it implements a next() method
What is a Map in JavaScript?
A Map is a collection of key-value pairs where keys and values can be of any type (primitive or objects). Unlike objects, Map preserves insertion order of elements and provides methods like set(), get(), has(), and delete() for manipulating data. Maps are optimized for frequent additions and removals of key-value pairs
What is a WeakMap in JavaScript?
A WeakMap is a collection of key-value pairs where keys must be objects (or non-registered symbols), and references to these keys are weakly held. This means if there are no other references to a key object, it can be garbage collected (removed) even if it exists in the WeakMap. WeakMap doesn’t prevent keys from being garbage collected
so weakmap works this way if we have fe:
const memoizationCache = new WeakMap();
function memoizedFunction(obj) {
if (!memoizationCache.has(obj)) {
const result = /* expensive computation using obj */;
memoizationCache.set(obj, result);
}
return memoizationCache.get(obj);
}
const memo = { data: {/* some data */} };
console.log(memoizedFunction(memo.data)); // Performs expensive computation
console.log(memoizedFunction(memo.data)); // Returns cached result
delete memo.data
then memoizationCache doesnt have memo.data key in it, and is deleted automatically.
What methods are available on WeakMap instances?
WeakMap has a limited API compared to Map, with just four methods:
set(key, value): Adds a new key-value pair
get(key): Retrieves a value by its key
has(key): Checks if a key exists
delete(key): Removes a key-value pair
WeakMap intentionally lacks any methods for enumeration (like keys(), values(), or entries())
Why can’t you iterate over a WeakMap’s contents?
WeakMap doesn’t allow enumeration of its keys or values because the contents depend on garbage collection, which would introduce non-determinism. If a WeakMap exposed methods to obtain a list of its keys, the list would depend on the state of garbage collection at any given moment, making results unpredictable
What is a common use case for WeakMap?
WeakMap is commonly used for:
Storing private data associated with objects
Implementing caching/memoization where results are associated with objects
Storing metadata about DOM nodes without causing memory leaks
Associating data with objects that should not affect their lifecycle
WeakMap allows the garbage collector to clean up object data when the object itself is no longer needed
Differences between useRef & useState.
How does useRef work inside?
Controlled vs uncontrolled React component
“controlled” (driven by props) or “uncontrolled” (driven by state)
What are microfrontends?
Main reasons to use microfrontends
Why switch(true) is wrong?
Why switch(true) should not be used:
- one of the advantages of switch-case is typing. When one of the conditions is not handled, you will get an error. When we use switch(true), this advantage is lost
- the occurrence of conditions will be important, but it is not visible. When using, if otherwise the conditions are well available. In the case of switch there is one of the conditions, but it is not necessary. If there is switch(true), it can be, but it will not be visible. There may be a change of conditions, when the application operation changes
- possibility of no return/break statement, it may happen that there is more than one condition met.
What can be used instead of switch(true)?
- if-else. This is the simplest solution
- the Strategy pattern. The pattern can also be used after help to get a uniform interface that provides action.
