Javascript Flashcards
Learn Javascript basics and advance concepts
What is the nullish coalescing operator in JavaScript?
Nullish coalescing is a JavaScript logical operator represented by two question marks (??). Nullish coalescing is an operator that returns the first “defined” value. “defined” here refers to an expression whose value is neither null nor undefined.
What is a spread operator?
Spread operator allows iterables such as arrays, objects, and strings to be expanded into single arguments. The spread operator is denoted by three dots (...) followed by the variable to be expanded.
Explain the “this” keyword.
To access the object, a method can use the this keyword.
In JavaScript, this keyword refers to the object it belongs to. Depending on the context, this might have several meanings. This pertains to the global object in a function and the owner object in a method, respectively.
What is Function Binding? What are the differences between call, apply, and bind?
Function binding:
Function binding refers to the process of associating a function with a specific context (this value). The bind() method creates a new function that, when called, has its this keyword set to the provided value.
const person = {
name: 'GFG',
greet: function() {
console.log('Hello, ' + this.name);
}
};
const greet = person.greet;
greet();
output: Hello, undefined
When greet is called directly (without being bound to the person object), the value of this is not person anymore. Instead, it refers to the global object (in non-strict mode) or is undefined (in strict mode).
call
The call() method immediately invokes a function, allowing you to set the value of this and pass arguments to the function.
const person = {
name: 'GFG',
greet: function(city) {
console.log('Hello, ' + this.name + ' from ' + city);
}
};
person.greet('Delhi');
const greet = person.greet;
greet.call(person, 'Noida');
output:
Hello, GFG from Delhi
Hello, GFG from Noida
This code defines a greet method in the person object, calls it with ‘Delhi’ directly, and then uses call() to invoke the method with ‘Noida’, ensuring the this context is correctly bound to person.
apply
Similar to call(), the apply() method invokes a function and allows you to set the value of this, but the difference is that the arguments are passed as an array (or an array-like object).
const person = {
name: 'GFG',
greet: function(city, country) {
console.log('Hello, ' + this.name + ' from ' + city + ', ' + country);
}
};
person.greet('Delhi', 'India');
const greet = person.greet;
greet.apply(person, ['Noida', 'Delhi']);
output:
Hello, GFG from Delhi, India
Hello, GFG from Noida, Delhi
This code defines a greet() method in the person object, calls it with ‘Delhi’ and ‘India’, then uses apply() to invoke the method with ‘Noida’ and ‘Delhi’ by passing arguments as an array while maintaining the this context.
bind
The bind() method is used to create a new function that, when called, has its this value set to a specified value, regardless of how the function is invoked.
const person = {
name: 'GFG',
greet: function() {
console.log('Hello, ' + this.name);
}
};
const greet = person.greet;
const boundGreet = greet.bind(person);
boundGreet();
output: Hello, GFG
This code defines a person object with a greet method, binds it to the person object using bind(), and then calls the bound function to correctly reference the person’s name when executed.
What are anonymous functions in JavaScript?
An anonymous function is a function that does not have any name associated with it. We usually use the function keyword followed by the function’s name to define a function in JavaScript. Anonymous functions omit the function name, making it not accessible after its creation.
An anonymous function can only be accessed by a variable. The anonymous nature of the function makes it great for passing in functions as arguments to other functions (higher-order functions) and functions that are invoked immediately upon initialization.
What is hoisting in JavaScript?
Hoisting refers to the process where the interpreter moves the declaration of classes, functions, or variables to the top of their scope, before their execution.
Hoisting allows developers to reference variables, functions, and classes before they are declared.
Referencing a variable before its initialization would return the variable’s default value (undefined for variables declared using the var keyword).
console.log(foo); var foo = 'foo';
It might surprise you that this code outputs undefined and doesn’t fail or throw an error – even though foo gets assigned after we console.log it!
This is because the JavaScript interpreter splits the declaration and assignment of functions and variables: it “hoists” your declarations to the top of their containing scope before execution.
This process is called hoisting, and it allows us to use foo before its declaration in our example above.
What is a callback function in JavaScript?
A callback function is a function passed into another function as an argument. The callback function is then invoked inside the callee to complete an action.
What are the different states of a Promise?
-
Pending– Promise’s initial state, waiting for the operation to complete -
Fulfilled– Promise’s operation was completed successfully -
Rejected– Promise’s operation failed -
Settled– Promise is either fulfilled or rejected
How to handle errors using Promises?
Promise chains are great at error handling. When a promise rejects, the control jumps to the closest rejection handler. That’s very convenient in practice.
The .catch doesn’t have to be immediate. It may appear after one or maybe several .then.
Normally, such .catch doesn’t trigger at all. But if any of the promises above rejects (a network problem or invalid json or whatever), then it would catch it.
The code of a promise executor and promise handlers has an “invisible try..catch” around it. If an exception happens, it gets caught and treated as a rejection.
The “invisible try..catch” around the executor automatically catches the error and turns it into rejected promise.
This happens not only in the executor function, but in its handlers as well. If we throw inside a .then handler, that means a rejected promise, so the control jumps to the nearest error handler.
new Promise((resolve, reject) => {
resolve("ok");
}).then((result) => {
throw new Error("Whoops!"); // rejects the promise
}).catch(alert); // Error: Whoops!
What is Promise.all?
Promise.all is a type of Promise that accepts an array of Promises and waits for each Promise to resolve. Promise.all resolves once each of the Promise inputs resolves, emitting an array of results in the then block. A rejected Promise in the input will cause the Promise.all Promise to also get rejected.
Explain async/await in JavaScript.
The async keyword is placed before a function to denote that the function is asynchronous and can be used as a Promise.
The await keyword, on the other hand, tells JavaScript to wait for the async operation to complete before proceeding to the next task in the function. The await keyword can only be used in an async function.
What are rest parameters?
The rest parameter syntax allows a function to accept an indefinite number of arguments as an array. The rest operator puts the contents of the variable after the rest operator into an array (rest parameter can only be used as the last parameter of a function).
Rest operator is represented by three dots (...) followed by the variable name. The variable can then be used to access the array containing the contents of the function’s arguments.
What is a WeakMap and WeakSet in JavaScript?
WeakMap:
The first difference between Map and WeakMap is that keys must be objects, not primitive values.
If we use an object as the key in it, and there are no other references to that object – it will be removed from memory (and from the map) automatically.
let john = { name: "John" };
let weakMap = new WeakMap();
weakMap.set(john, "...");
john = null; // overwrite the reference
// john is removed from memory!
let john = { name: "John" };
let map = new Map();
map.set(john, "...");
john = null; // overwrite the reference
// john is stored inside the map,
// we can get it by using map.keys()
Compare it with the regular Map example above. Now if john only exists as the key of WeakMap – it will be automatically deleted from the map (and memory).
WeakMap does not support iteration and methods keys(), values(), entries(), so there’s no way to get all keys or values from it.
WeakMap has only the following methods:
weakMap.set(key, value)weakMap.get(key)weakMap.delete(key)weakMap.has(key)
Why such a limitation? That’s for technical reasons. If an object has lost all other references (like john in the code above), then it is to be garbage-collected automatically. But technically it’s not exactly specified when the cleanup happens.
WeakSet:
WeakSet behaves similarly:
- It is analogous to
Set, but we may only add objects toWeakSet(not primitives). - An object exists in the set while it is reachable from somewhere else.
- Like
Set, it supportsadd,hasanddelete, but notsize,keys()and no iterations.
let visitedSet = new WeakSet();
let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };
visitedSet.add(john); // John visited us
visitedSet.add(pete); // Then Pete
visitedSet.add(john); // John again
// visitedSet has 2 users now
// check if John visited?
alert(visitedSet.has(john)); // true
// check if Mary visited?
alert(visitedSet.has(mary)); // false
john = null;
// visitedSet will be cleaned automatically
The most notable limitation of WeakMap and WeakSet is the absence of iterations, and the inability to get all current content. That may appear inconvenient, but does not prevent WeakMap/WeakSet from doing their main job – be an “additional” storage of data for objects which are stored/managed at another place.
What is typecasting in JavaScript?
Typecasting or coercion means to change the data type of a value to another data type. For example, a conversion from a string to an integer or vice versa.
Coercion can either be implicit or explicit. Implicit coercion is when the type conversion is automatic, whereas explicit coercion is when a developer explicitly writes code to convert the type of a value. The latter is also known as typecasting.
There are three typecasts provided by JavaScript:
-
Boolean(value)– Casts the input value to a boolean value -
Number(value)– Casts the input value to a float or integer value -
String(value)– Casts the input value to a string
What is event bubbling in JavaScript?
When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
A click on the inner <p> first runs onclick:
- On that
<p>. - Then on the outer
<div>. - Then on the outer
<form>. - And so on upwards till the document object.
Event bubbling is a way of event propagation in the HTML DOM API, where events are handled from starting from the innermost element propagating outwards to its parent elements.
Let’s look at an example where an event occurs in a nested element where both elements have a registered event handler for the triggered event. Event bubbling causes the event to be captured and handled by the innermost element first. It is then propagated to the outer elements.
What is event capturing in JavaScript?
Event capturing is another way of event propagation in the HTML DOM API. Unlike event bubbling, event capturing propagates an event from the outermost element to the target element.
There’s another phase of event processing called “capturing”. It is rarely used in real code, but sometimes can be useful.
The standard DOM Events describes 3 phases of event propagation:
-
Capturing phase– the event goes down to the element. -
Target phase– the event reached the target element. -
Bubbling phase– the event bubbles up from the element.
Capturing phase is rarely used.
In fact, the capturing phase was invisible for us, because handlers added using on<event>-property or using HTML attributes or using two-argument addEventListener(event, handler) don’t know anything about capturing, they only run on the 2nd and 3rd phases.
To catch an event on the capturing phase, we need to set the handler capture option to true:
elem.addEventListener(..., {capture: true})
// or, just "true" is an alias to {capture: true}
elem.addEventListener(..., true)
Note that while formally there are 3 phases, the 2nd phase (“target phase”: the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.
<form>FORM
<div>DIV
<p>P</p>
</div>
</form>
<script>
for(let elem of document.querySelectorAll('*')) {
elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
}
</script>
The code sets click handlers on every element in the document to see which ones are working.
If you click on <p>, then the sequence is:
HTML → BODY → FORM → DIV -> P
P → DIV → FORM → BODY → HTML
P (capturing phase, the first listener):HTML → BODY → FORM → DIV -> P
P → DIV → FORM → BODY → HTML
P (bubbling phase, the second listener).
Please note, the HTML → BODY → FORM → DIV -> P
P → DIV → FORM → BODY → HTML
P shows up twice, because we’ve set two listeners: capturing and bubbling. The target triggers at the end of the first and at the beginning of the second phase.
What is a closure in JavaScript?
A closure is an inner function that has access to the variables in the enclosing/outer function’s scope. The closure has access to variables from three scopes:
- within its own scope
- within the enclosing function’s scope
- global variables
Closures are particularly useful on the web because of the web’s event-based nature. A common pattern in front-end JavaScript is as follows: you define a behavior, then attach it to an event that is triggered by user input.
When a function is defined within another function, it retains access to the variables and parameters of the outer function, even after the outer function has finished executing. That link, between the inner function and its scope inside the outer function is known as closure
You can use them to create private variables that can only be accessed by the inner function, you can even use them to create complex objects with access to a rich context that is only available globally to them.
What does the instanceof operator do?
The instanceof operator checks whether the prototype property of a constructor appears anywhere in the prototype chain of an object. In other words, the instanceof operator checks if the object is an instance of a class or not at run time.
How do you create a shallow copy of an object?
Deep copying means that the value of the new variable is disconnected from the original variable while a shallow copy means that some values are still connected to the original variable.
First of all, a deep copy is a copy of an object completely disconnected from the original variable. A shallow copy on the other hand is a copy of the original variable where some values are still connected to the original variable.
There are two main ways to create a shallow copy of an object in JavaScript:
- Using the
spread operator - Using
Object.assign()
What is the difference between local storage and session storage?
Local storage is a read-only property of the window interface to access a storage object. The stored data is saved indefinitely across browser sessions. Data stored in local storage is only cleared when removed explicitly through the browser’s settings or programmatically by the application.
Session storage is similar to local storage with the key difference being the data stored’s expiration time. Data stored in session storage gets cleared when the page session ends. A page session lasts as long as the tab or browser is open and persists between page reloads and restores.
What is the Temporal Dead Zone in JavaScript?
In ES6, variables declared using let and const are hoisted similar to var, class and function. However, there is a period between the variable’s declaration and when it enters scope where the variable can’t be accessed. This period is called the Temporal dead zone (TDZ).
When the interpreter hoists a variable declared with var, it initializes its value to undefined. The first line of code below will output undefined:
console.log(foo); // undefined var foo = 'bar'; console.log(foo); // "bar"
Variables declared with let and const are hoisted but not initialized with a default value. Accessing a let or const variable before it’s declared will result in a ReferenceError:
{
// Start of foo's TDZ
let bar = 'bar';
console.log(bar); // "bar"
console.log(foo); // ReferenceError because we're in the TDZ
let foo = 'foo'; // End of foo's TDZ
}
What are the differences between mutable and immutable objects?
Mutable Objects:
In JavaScript, the following types are mutable: arrays, objects, and functions.
Using the push() and pop() methods are mutate the original array by adding and removing elements.
Immutability:
JavaScript primitives such as strings and numbers are immutable. Once created, their values cannot be changed.
Benefits:
-
Mutabilitycan lead to unexpected side effects and bugs when multiple parts of your code share and modify the same object. -
Immutabilityhelps prevent such issues by ensuring that once an object is created, it remains unchanged. This simplifies program flow and debugging.
What is the difference between the var and let keywords in JavaScript?
The var and let keywords are both used to declare variables in JavaScript, but they have some key differences.
Scope
The main difference between var and let is the scope of the variables they create. Variables declared with var have function scope, which means they are accessible throughout the function in which they are declared. Variables declared with let have block scope, which means they are only accessible within the block where they are declared.
Hoisting
Another difference between var and let is that var declarations are hoisted, while let declarations are not. Hoisting means that the declaration of a variable is moved to the top of the scope in which it is declared, even though it is not actually executed until later.
Redeclaration
Finally, var declarations can be redeclared, while let declarations cannot. This means that you can declare a variable with the same name twice in the same scope with var, but you will get an error if you try to do the same with let.
What are object prototypes?
Object prototypes in JavaScript are a fundamental concept that enables inheritance and the sharing of properties and method objects.
The prototype object can have its own prototype. Forming a chain known as the prototype chain.
What is the difference between Attributes and Property?
Attributes- provide more details on an element like id, type, value etc.
Property- is the value assigned to the property like type=”text”, value=’Name’ etc.
What are classes in javascript?
Classes provide a clear and structured way of creating an object.
In JavaScript, a class is a kind of function.
What is class inheritance?
Class inheritance is a way for one class to extend another class.
So we can create new functionality on top of the existing.
When overriding a constructor we must call parent constructor as super() in Child constructor before using “this”.
What is encapsulation?
Encapsulation enables programmers to hide the implementation details of one object from other objects and restrict direct access to the internal state of an object.
The variable is hidden from the outside world and can only be accessed through function, which provides a well-defined interface for accessing and modifying the count.
In addition to using closures, another way to achieve encapsulation in JavaScript is by using setters and getters. Setters and getters are methods that allow us to control how properties are set and retrieved from an object.
In encapsulation can be achieved through the use of closures and modules, as well as using setters and getters to control how properties are set and retrieved from an object. it also helps to improve the quality and maintainability of software systems.
What is garbage collection?
JavaScript automatically allocates memory when objects are created and frees it when they are not used anymore. However, the general problem of automatically finding whether some memory “is not needed anymore” is undecidable.
The main concept of garbage collection algorithms rely on the concept of reference. Until the object is pointing to a reference or containing a value within it, the object is treated to be useful. Once all the execution is completed, it is no longer required and that is when the object is said to be “garbage”.
JS engine would free up memory which was pointing to the variable named <variable name>. This is similar to how a ` garbage collector` would work.
What is event loop?
At its core, the JavaScript event loop is responsible for managing the execution of code, collecting and processing events, and executing queued tasks. JavaScript operates in a single-threaded environment, meaning only one piece of code runs at a time. The event loop ensures that tasks are executed in the correct order, enabling asynchronous programming.
-
Call Stack: Keeps track of function calls. When a function is invoked, it is pushed onto the stack. When the function finishes execution, it is popped off. -
Web APIs: Provides browser features like setTimeout, DOM events, and HTTP requests. These APIs handle asynchronous operations. -
Task Queue (Callback Queue): Stores tasks waiting to be executed after the call stack is empty. These tasks are queued by setTimeout, setInterval, or other APIs. -
Microtask Queue: A higher-priority queue for promises and MutationObserver callbacks. Microtasks are executed before tasks in the task queue.
5. Event Loop: Continuously checks if the call stack is empty and pushes tasks from the microtask queue or task queue to the call stack for execution.
Order of Execution:
- Execute all synchronous tasks on the call stack.
- Process all microtasks in the microtask queue.
- Process the first task in the macrotask queue.
- Repeat.
The way it works, is as follows:
-
Call Stack: JavaScript executes your code on a single thread using a call stack, where function calls are added and executed one by one. When a function ends, it’s removed from thestack. -
Async calls: For asynchronous operations, JavaScript uses Web APIs provided by the browser. These operations are offloaded from thecall stackand handled separately. -
Tasks Queue: Once an asynchronous call is done, its callback is placed in thetask queue. -
Event Loop: The event loop constantly checks thecall stackand thetask queue. If thecall stackis empty, it takes the first task from thequeueand pushes it onto thecall stackfor execution. This cycle repeats indefinitely.
What is micro- and macrotasks in event loop?
Microtasks: High-priority asynchronous tasks, such as Promise callbacks and queueMicrotask.
Macrotasks: Lower-priority asynchronous tasks, like setTimeout, setInterval, and DOM events.
What is Polymorphism in JavaScript?
Polymorphism is a concept from Object-Oriented Programming. It is the capability to create a property, a function, or an object that has more than one implementation.
Polymorphism, a fundamental concept in object-oriented programming (OOP), empowers developers to create flexible, extensible, and adaptable software systems. By allowing objects to exhibit multiple forms and behaviors based on their context, polymorphism promotes code reuse, modularity, and maintainability, thereby enhancing the overall quality of software designs.
e.g.
Consider a scenario where we have different types of animals, each capable of making a distinct sound. We’ll create a base class Animal with a method makeSound(), and then we’ll create subclasses for specific types of animals, each overriding the makeSound() method to produce the unique sound of that animal.
// Base class representing an Animal
class Animal {
makeSound() {
console.log("Some generic animal sound");
}
}
// Subclass for Dogs
class Dog extends Animal {
makeSound() {
console.log("Woof! Woof!");
}
}
// Subclass for Cats
class Cat extends Animal {
makeSound() {
console.log("Meow! Meow!");
}
}
// Subclass for Cows
class Cow extends Animal {
makeSound() {
console.log("Moo! Moo!");
}
}
// Create instances of different animals
const dog = new Dog();
const cat = new Cat();
const cow = new Cow();
// Invoke the makeSound() method on each animal
dog.makeSound(); // Outputs: Woof! Woof!
cat.makeSound(); // Outputs: Meow! Meow!
cow.makeSound(); // Outputs: Moo! Moo!
Explanation:
In this example, we have a base class Animal with a generic makeSound() method. Subclasses such as Dog, Cat, and Cow extend the Animal class and override the makeSound() method with their specific sound implementations.
Polymorphic Behavior:
Despite invoking the same method makeSound(), each object (dog, cat, cow) exhibits different behavior based on its type. This is polymorphism in action, where the method behaves differently depending on the object’s actual class.
Flexibility and Extensibility:
With polymorphism, we can seamlessly add new types of animals (subclasses) without modifying the existing code. Each new subclass can define its own behavior for the makeSound() method, enhancing the flexibility and extensibility of our system.
Code Reusability:
By defining a common interface (makeSound() method) in the base class Animal, we promote code reuse across different subclasses. This reduces redundancy and promotes a modular and maintainable codebase.
What is the difference between preventDefault() and stopPropagation() methods in JavaScript?
preventDefault() Method:
It is a method present in the event interface. This method prevents the browser from executing the default behavior of the selected element. This method can cancel the event only if the event is cancelable. For example, there are some events that can not be prevented, such as the scroll and wheel event.
stopPropagation() event method:
This method is used to prevent the parent element from accessing the event. Basically, this method is used to prevent the propagation of the same event from being called. For eg, we have a button element inside a div tag and there is an onclick event on both of them, then whenever we try to activate the event attached to the button element, then the event attached to the div element also gets executed because div is the parent of the button element.
What is Promises chaining?
The idea is that the result is passed through the chain of .then handlers.
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
alert(result); // 1
return result * 2;
}).then(function(result) { // (***)
alert(result); // 2
return result * 2;
}).then(function(result) {
alert(result); // 4
return result * 2;
});
Here the flow is:
- The initial promise resolves in 1 second (*),
- Then the
.thenhandler is called (**), which in turn creates a new promise (resolved with 2 value). - The next
.then(***) gets the result of the previous one, processes it (doubles) and passes it to the next handler. - …and so on.
As the result is passed along the chain of handlers, we can see a sequence of alert calls: 1 → 2 → 4.
The whole thing works, because every call to a .then returns a new promise, so that we can call the next .then on it.
When a handler returns a value, it becomes the result of that promise, so the next .then is called with it.
A classic newbie error: technically we can also add many .then to a single promise. This is not chaining.
What we did here is just adding several handlers to one promise. They don’t pass the result to each other; instead they process it independently.
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000);
});
promise.then(function(result) {
alert(result); // 1
return result * 2;
});
promise.then(function(result) {
alert(result); // 1
return result * 2;
});
promise.then(function(result) {
alert(result); // 1
return result * 2;
});
What is recursion?
Recursion is a programming pattern that is useful in situations when a task can be naturally split into several tasks of the same kind, but simpler. Or when a task can be simplified into an easy action plus a simpler variant of the same task. Or, as we’ll see soon, to deal with certain data structures.
When a function solves a task, in the process it can call many other functions. A partial case of this is when a function calls itself. That’s called recursion.
Recursive solution is usually shorter than an iterative one.
e.g.
multiplies x by itself n times.
What is global object?
The global object provides variables and functions that are available anywhere. By default, those that are built into the language or the environment.
In a browser it is named window, for Node.js it is global, for other environments it may have another name.
The global object holds variables that should be available everywhere.
That includes JavaScript built-ins, such as Array and environment-specific values, such as window.innerHeight – the window height in the browser.
What is Function Object?
Functions are objects.
Here we covered their properties:
name – the function name. Usually taken from the function definition, but if there’s none, JavaScript tries to guess it from the context (e.g. an assignment).
let sayHi = function() {
alert("Hi");
};
alert(sayHi.name); // sayHi (there's a name!)
length – the number of arguments in the function definition. Rest parameters are not counted.
function f1(a) {}
function f2(a, b) {}
function many(a, b, ...more) {}
alert(f1.length); // 1
alert(f2.length); // 2
alert(many.length); // 2
What is Named Function Expression (NFE)?
Named Function Expression, or NFE, is a term for Function Expressions that have a name.
For instance, let’s take an ordinary Function Expression:
let sayHi = function(who) {
alert(`Hello, ${who}`);
};
And add a name to it:
let sayHi = function func(who) {
alert(`Hello, ${who}`);
};
First let’s note, that we still have a Function Expression. Adding the name func after function did not make it a Function Declaration, because it is still created as a part of an assignment expression.
There are two special things about the name func, that are the reasons for it:
- It allows the function to reference itself internally.
- It is not visible outside of the function.
What is Currying Function in JavaScript?
Currying is used in JavaScript to break down complex function calls into smaller, more manageable steps. It transforms a function with multiple arguments into a series of functions, each taking a single argument.
- It converts a function with multiple parameters into a sequence of functions.
- Each function takes a single argument and returns another function until all arguments are received.
- Helps in functional programming by enabling function reusability and composition.
// Normal Function
// function add(a, b) {
// return a + b;
// }
// console.log(add(2, 3));
// Function Currying
function add(a) {
return function(b) {
return a + b;
}
}
const addTwo = add(5); // First function call with 5
console.log(addTwo(4));
output: 9
In this example
- Normal Function: Directly takes two arguments (a and b) and returns their sum.
- Function Currying: Breaks the add function into two steps. First, it takes a, and then, when calling addTwo(4), it takes b and returns the sum.
How Currying Works in JavaScript?
Currying function in the JavaScript can be done manually, but it can also be done using the closure. Below it is shown that how currying function works.
-
Creating the First Function: The first function takes the first argument and gives back a new function to take the next one. -
Returning a New Function: The returned function takes the next argument and keeps going until all the arguments are given. -
Returning the Result: Once all the arguments are provided, the final result is calculated and returned.
What is Map and Set?
Map:
Map is a collection of keyed data items, just like an Object. But the main difference is that Map allows keys of any type. Map can also use objects as keys.
Using objects as keys is one of the most notable and important Map features. The same does not count for Object. String as a key in Object is fine, but we can’t use another Object as a key in Object.
Methods and properties are:
-
new Map()– creates the map. -
map.set(key, value)– stores the value by the key. -
map.get(key)– returns the value by the key, undefined if key doesn’t exist in map. -
map.has(key)– returns true if the key exists, false otherwise. -
map.delete(key)– removes the element (the key/value pair) by the key. -
map.clear()– removes everything from the map. -
map.size– returns the current element count.
For looping over a map, there are 3 methods:
-
map.keys()– returns an iterable for keys, -
map.values()– returns an iterable for values, -
map.entries()– returns an iterable for entries[key, value], it’s used by default in for..of.
The iteration goes in the same order as the values were inserted. Map preserves this order, unlike a regular Object.
Set:
A Set is a special type collection – “set of values” (without keys), where each value may occur only once.
Its main methods are:
-
new Set([iterable])– creates the set, and if an iterable object is provided (usually an array), copies values from it into the set. -
set.add(value)– adds a value, returns the set itself. -
set.delete(value)– removes the value, returns true if value existed at the moment of the call, otherwise false. -
set.has(value)– returns true if the value exists in the - set, otherwise false. -
set.clear()– removes everything from the set. -
set.size– is the elements count.
The main feature is that repeated calls of set.add(value) with the same value don’t do anything. That’s the reason why each value appears in a Set only once.
We can loop over a set either with for..of or using forEach.
What mixins are in Javascript classes?
A mixin is a class containing methods that can be used by other classes without a need to inherit from it.
In other words, a mixin provides methods that implement a certain behavior, but we do not use it alone, we use it to add the behavior to other classes.
Mixin – is a generic object-oriented programming term: a class that contains methods for other classes.
The simplest way to implement a mixin in JavaScript is to make an object with useful methods, so that we can easily merge them into a prototype of any class.
// mixin
let sayHiMixin = {
sayHi() {
alert(`Hello ${this.name}`);
},
sayBye() {
alert(`Bye ${this.name}`);
}
};
// usage:
class User {
constructor(name) {
this.name = name;
}
}
// copy the methods
Object.assign(User.prototype, sayHiMixin);
// now User can say hi
new User("Dude").sayHi(); // Hello Dude!
There’s no inheritance, but a simple method copying. So User may inherit from another class and also include the mixin to “mix-in” the additional methods, like this:
class User extends Person {
// ...
}
Object.assign(User.prototype, sayHiMixin);
What static properties and methods are in Javascript classes?
We can also assign a method to the class as a whole. Such methods are called static.
In a class declaration, they are prepended by static keyword, like this:
class User {
static staticMethod() {
alert(this === User);
}
}
User.staticMethod(); // true
Usually, static methods are used to implement functions that belong to the class as a whole, but not to any particular object of it.
For instance, we have Article objects and need a function to compare them.
A natural solution would be to add Article.compare static method:
class Article {
constructor(title, date) {
this.title = title;
this.date = date;
}
static compare(articleA, articleB) {
return articleA.date - articleB.date;
}
}
// usage
let articles = [
new Article("HTML", new Date(2019, 1, 1)),
new Article("CSS", new Date(2019, 0, 1)),
new Article("JavaScript", new Date(2019, 11, 1))
];
articles.sort(Article.compare);
alert( articles[0].title ); // CSS
Here Article.compare method stands “above” articles, as a means to compare them. It’s not a method of an article, but rather of the whole class.
Static properties are also possible, they look like regular class properties, but prepended by static:
class Article {
static publisher = "Ilya Kantor";
}
alert( Article.publisher ); // Ilya Kantor
Static properties are used when we’d like to store class-level data, also not bound to an instance.
Static properties and methods are inherited.
What private and protected properties and methods are in Javascript?
In JavaScript, there are two types of object fields (properties and methods):
Public: accessible from anywhere. They comprise the external interface. Until now we were only using public properties and methods.
Private: accessible only from inside the class. These are for the internal interface.
In many other languages there also exist “protected” fields: accessible only from inside the class and those extending it (like private, but plus access from inheriting classes). They are also useful for the internal interface. They are in a sense more widespread than private ones, because we usually want inheriting classes to gain access to them.
Protected fields are not implemented in JavaScript on the language level, but in practice they are very convenient, so they are emulated.
Protected properties are usually prefixed with an underscore _.
That is not enforced on the language level, but there’s a well-known convention between programmers that such properties and methods should not be accessed from the outside.
Privates should start with #. They are only accessible from inside the class.
On the language level, # is a special sign that the field is private. We can’t access it from outside or from inheriting classes.
Explain extending built-in classes in Javascript?
Built-in classes like Array, Map and others are extendable also.
For instance, here PowerArray inherits from the native Array:
// add one more method to it (can do more)
class PowerArray extends Array {
isEmpty() {
return this.length === 0;
}
}
let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false
let filteredArr = arr.filter(item => item >= 10);
alert(filteredArr); // 10, 50
alert(filteredArr.isEmpty()); // false
Please note a very interesting thing. Built-in methods like filter, map and others – return new objects of exactly the inherited type PowerArray. Their internal implementation uses the object’s constructor property for that.
When arr.filter() is called, it internally creates the new array of results using exactly arr.constructor, not basic Array. That’s actually very cool, because we can keep using PowerArray methods further on the result.
Normally, when one class extends another, both static and non-static methods are inherited. But built-in classes are an exception. They don’t inherit statics from each other.
What property flags and descriptors are in Javascript?
Property flags
Object properties, besides a value, have three special attributes (so-called “flags”):
-
writable– if true, the value can be changed, otherwise it’s read-only. -
enumerable– if true, then listed in loops, otherwise not listed. -
configurable– if true, the property can be deleted and these attributes can be modified, otherwise not.
When we create a property “the usual way”, all of them are true. But we also can change them anytime.
The method Object.getOwnPropertyDescriptor allows to query the full information about a property.
let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
The returned value is a so-called “property descriptor” object: it contains the value and all the flags.
let user = {
name: "John"
};
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
alert( JSON.stringify(descriptor, null, 2 ) );
/* property descriptor:
{
"value": "John",
"writable": true,
"enumerable": true,
"configurable": true
}
*/
To change the flags, we can use Object.defineProperty.
Object.defineProperty(obj, propertyName, descriptor)
If the property exists, defineProperty updates its flags. Otherwise, it creates the property with the given value and flags; in that case, if a flag is not supplied, it is assumed false.
let user = {};
Object.defineProperty(user, "name", {
value: "John"
});
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
alert( JSON.stringify(descriptor, null, 2 ) );
/*
{
"value": "John",
"writable": false,
"enumerable": false,
"configurable": false
}
*/
Non-writable
Let’s make user.name non-writable (can’t be reassigned) by changing writable flag:
let user = {
name: "John"
};
Object.defineProperty(user, "name", {
writable: false
});
user.name = "Pete"; // Error: Cannot assign to read only property 'name'
Now no one can change the name of our user, unless they apply their own defineProperty to override ours.
Non-enumerable
Now let’s add a custom toString to user.
Normally, a built-in toString for objects is non-enumerable, it does not show up in for..in. But if we add a toString of our own, then by default it shows up in for..in, like this:
let user = {
name: "John",
toString() {
return this.name;
}
};
// By default, both our properties are listed:
for (let key in user) alert(key); // name, toString
If we don’t like it, then we can set enumerable:false. Then it won’t appear in a for..in loop, just like the built-in one:
let user = {
name: "John",
toString() {
return this.name;
}
};
Object.defineProperty(user, "toString", {
enumerable: false
});
// Now our toString disappears:
for (let key in user) alert(key); // name
Non-configurable
The non-configurable flag (configurable:false) is sometimes preset for built-in objects and properties.
A non-configurable property can’t be deleted, its attributes can’t be modified.
For instance, Math.PI is non-writable, non-enumerable and non-configurable:
let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI');
alert( JSON.stringify(descriptor, null, 2 ) );
/*
{
"value": 3.141592653589793,
"writable": false,
"enumerable": false,
"configurable": false
}
*/
So, a programmer is unable to change the value of Math.PI or overwrite it.
What property getters and setters are in Javascript?
There are two kinds of object properties.
The first kind is data properties. We already know how to work with them. All properties that we’ve been using until now were data properties.
The second type of property is something new. It’s an accessor property. They are essentially functions that execute on getting and setting a value, but look like regular properties to an external code.
Accessor properties are represented by “getter” and “setter” methods. In an object literal they are denoted by get and set:
let obj = {
get propName() {
// getter, the code executed on getting obj.propName
},
set propName(value) {
// setter, the code executed on setting obj.propName = value
}
};
The getter works when obj.propName is read, the setter – when it is assigned.
What is abstraction in JavaScript?
The Abstraction in JavaScript can be achieved using the abstract class. In object-oriented programming, the abstraction concept allows you to hide the implementation details and expose features only to the users.
For example, you can execute the Math object methods in JavaScript by accessing the method using its name but cant see how it is implemented. Same way array methods like push(), pop(), etc., can be executed, but you dont know how it is implemented internally.
So, the abstraction makes code cleaner by exposing the required features and hiding the internal implementation details.
In most programming languages, you can achieve abstraction using the abstract class. The abstract class contains only method declaration but not implementation. Furthermore, you need to implement the methods declared in the abstract class into the child class. Also, you cant create an instance of the abstract class.
JavaScript doesn’t allow to create an abstract class like Java or CPP natively, but you can achieve the same functionality using the object constructor function.
In the below example, the fruit() function initializes the name property. When anyone creates an instance of the fruit(), the value of the constructor property becomes equal to the fruit. So, we throw an error to prevent creating an instance of the fruit.
Also, we have added the getName() method to the prototype. After that, we create an instance of the fruit() constructor, and you can observe the error in the output.
try {
// Object constructor
function fruit() {
this.name = "Fruit";
if (this.constructor === fruit) {// Preventing the instance of the object
throw new Error("You can't create the instance of the fruit.");
}
}
// Implementing method in the prototype
fruit.prototype.getName = function () {
return this.name;
}
const apple = new fruit();
} catch (error) {
document.getElementById("output").innerHTML = error;
}
Output: Error: You can't create the instance of the fruit.
What are the different ways to handle asynchronous operations in JavaScript?
There are 4 main ways in which JavaScript allows developers to handle asynchronous calls. In the end, the result is always the same, but the final structure of the code and the way to reason about it is considerably different.
-
Callbacks. They allow you to set up a function to be called directly once the asynchronous operation is done. -
Promises. Promises represent the eventual completion of an asynchronous operation, and they provide a simpler and more intuitive syntax to specify callbacks to be called on success and failure of the operation. -
Async/Await. The final evolution of the promises syntax. It’s mainly syntactic sugar, but it makes asynchronous code look synchronous, which in turn makes it a lot easier to read and reason about. -
Event listeners. Event listeners are callbacks that get triggered when specific events are fired (usually due to user interactions).
What are promises, and how do they work?
Promises are JavaScript objects that represent the eventual completion of an asynchronous call. Through promises you’re able to handle the successful or failed execution of the asynchronous call.
What is the difference between cookies, sessionStorage, and localStorage?
Cookies are small pieces of data stored in web browsers. They are mainly used for keeping information between HTTP requests, such as user authentication, session management, and tracking user behavior
On the other hand, sessionStorage is designed for temporary storage and is accessible only within the same session (i.e.., while the browser window or tab is open). Data stored in sessionStorage is lost when the browser window is closed.
Finally, localStorage is similar to sessionStorage but persists even when the browser window or tab is closed and reopened. It provides long-term storage for web applications. They are very similar to cookies, however, the size limitations on localStorage are quite big compared to cookies, making it a much better alternative when storing large datasets.
What is the difference between null and undefined?
In JavaScript, undefined is the default value new variables take, and it means the variable has been defined but it hasn’t been assigned any value just yet.
And null is actually a value that signals “no value” or “no object”, it is specifically assigned to the variable by the developer.
