Questions I Flashcards
Which JS array methods change the original array?
pop(): Removes the last element from the array.
shift(): Removes the first element from the array.
unshift(): Adds one or more elements to the beginning of the array.
splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements.
sort(): Sorts the elements of the array in place.
reverse(): Reverses the order of the elements in the array.
fill(): Fills all the elements of the array with a static value.
copyWithin(): Shallow copies part of an array to another location in the same array.
What is the easiest way to convert an array to an object?
The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.
Object.assign({}, [‘a’,’b’,’c’]); // {0:”a”, 1:”b”, 2:”c”}
What is the difference between var, let and const?
var:
Scope: Function-scoped or globally scoped.
Re-declaration: Allowed within the same scope.
Initialization: Can be declared without initialization (undefined).
Hoisting: Hoisted and initialized as undefined.
Global Object: Creates a property on the global object.
let:
Scope: Block-scoped.
Re-declaration: Not allowed in the same scope.
Initialization: Can be declared without initialization (undefined).
Hoisting: NOT Hoisted but not initialized (temporal dead zone).
Global Object: Does not create a property on the global object.
const:
Scope: Block-scoped.
Re-declaration: Not allowed in the same scope.
Initialization: Must be initialized at the time of declaration.
Hoisting: NOT Hoisted but not initialized (temporal dead zone).
Global Object: Does not create a property on the global object and cannot be reassigned.
What is a Temporal Dead Zone?
The Temporal Dead Zone (TDZ) is a concept in JavaScript that refers to the time period during which a variable is in scope but cannot be accessed. This occurs when a variable is declared using let or const but has not yet been initialized. Here’s a breakdown of the key aspects:
THROWS REFERENCE ERROR VARIABLE IS NOT INITIALIZED
What are the ways to create object in JavaScript?
1. Object Literal Syntax
This is the simplest and most straightforward way to create an object. You define the object using curly braces, {}, and specify key-value pairs.
const obj = {
key1: value1,
key2: value2,
};
2. Using the new Object() Syntax
const obj = new Object();
obj.key1 = value1;
obj.key2 = value2;
**3. Constructor Functions
- Object.create()
- JSON Parsing**
How do you copy properties from one object to other?
-
Object.assign()
The Object.assign() method copies the values of all enumerable own properties from one or more source objects to a target object. It returns the target object. -
Spread Syntax
The spread syntax (…) allows you to create a new object by copying properties from existing objects. This method is concise and commonly used in modern JavaScript. - For…in Loop
You can use a for…in loop to iterate over the properties of the source object and copy them to the target object. -
JSON Methods
You can use JSON.stringify() and JSON.parse() to create a deep copy of an object. This method works for simple objects but does not handle functions, dates, or undefined values. - Object.entries() and Object.fromEntries()
You can use Object.entries() to convert an object into an array of key-value pairs, and then use Object.fromEntries() to create a new object. -
Lodash Library
If you are using the Lodash library, you can use the _.assign() method, which is similar to Object.assign() but may have additional functionality.
What do you understand by “this” keyword in JavaScript?
The this keyword in JavaScript is a special identifier that refers to the context in which a function is executed. Its value can change depending on how a function is called, and understanding its behavior is crucial for effective JavaScript programming. Here are the key points about this:
Key Points about this in JavaScript
Global Context:
In the global scope (outside of any function), this refers to the global object.
In browsers, this is typically the window object.
Function Context:
In a regular function (non-strict mode), this refers to the global object if the function is called without an object context.
Method Context:
When a function is called as a method of an object, this refers to the object through which the method is called.
Constructor Function Context:
When a function is called with the new keyword, this refers to the newly created object.
Event Handlers:
In event handler functions, this refers to the element that fired the event.
Explicit Binding:
You can control the value of this using call(), apply(), and bind().
call() and apply() invoke the function with a specific this value, while** bind() returns a new function** with this permanently set to a specified value.
What is currying?
Currying is a functional programming technique in which a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. Instead of accepting all parameters at once, a curried function takes the first argument and returns another function that takes the second argument, and so on, until all arguments have been supplied.
function add(a) {
return function(b) {
return a + b;
};
}
const addFive = add(5); // returns a function that adds 5 to its argument
console.log(addFive(3)); // Output: 8
console.log(add(10)(20)); // Output: 30
What is the difference between regular functions and arrow functions?
Syntax: Regular functions use the function keyword, while arrow functions have a shorter syntax using the => operator.
this Binding: Regular functions have their own this context, which depends on how they are called. In contrast, arrow functions lexically bind this from the surrounding context, meaning they inherit this from where they are defined.
Arguments Object: Regular functions have access to the arguments object, which contains all arguments passed to the function. Arrow functions do not have their own arguments object; instead, you can use rest parameters (…args) to gather arguments.
Constructor: Regular functions can be used as constructors with the new keyword, while arrow functions cannot be used as constructors and will throw an error if you try to invoke them with new.
Method Definition: Regular functions are suitable for defining methods on objects, whereas arrow functions are not ideal for this purpose due to their handling of this.
Function Hoisting: Regular functions are hoisted, meaning they can be called before their definition in the code. Arrow functions are not hoisted and must be defined before they can be used.
Return Statement: If a regular function does not explicitly return a value, it returns undefined. Arrow functions implicitly return the result of a single expression without needing a return statement.
What is the difference between “==” and “===” operators?
The difference between the == (equality) operator and the === (strict equality) operator in JavaScript lies in how they compare values.
Type Coercion:
== (Equality): Performs type coercion, meaning it converts the operands to the same type before making the comparison. This can lead to unexpected results.
Example: 0 == ‘0’ evaluates to true because the string ‘0’ is converted to the number 0 for the comparison.
=== (Strict Equality): Does not perform type coercion. Both the value and the type must be the same for the comparison to be true.
Example: 0 === ‘0’ evaluates to false because the types (number vs. string) are different.
Explain Implicit Type Coercion in JavaScript
Implicit type coercion in JavaScript refers to the automatic conversion of values from one type to another when performing operations. This behavior occurs when operators or functions encounter operands of different types. JavaScript tries to convert the values to a compatible type before executing the operation. While this feature can make code more flexible, it can also lead to unexpected results or bugs if not properly understood.
Using Operators:
Certain operators, like the arithmetic operators (+, -, *, /), can trigger coercion.
For example, when using the + operator, if one of the operands is a string, JavaScript will convert the other operand to a string:
console.log(‘5’ + 2); // “52” (number 2 is coerced to string)
console.log(5 + 2); // 7 (both operands are numbers)
Comparison Operators:
When using the equality operator (==), JavaScript performs coercion to compare different types:
console.log(0 == ‘0’); // true (string ‘0’ is converted to number 0)
console.log(false == 0); // true (false is coerced to number 0)
Logical Operators:
Logical operators (&&, ||, !) also perform type coercion:
console.log(true || 0); // true (0 is coerced to false)
console.log(false && ‘hello’); // false (short-circuit evaluation)
What are the various statements in error handling?
- try Statement
The try statement is used to wrap code that may potentially throw an error. If an error occurs within the try block, the control is transferred to the corresponding catch block. - catch Statement
The catch statement is used to define a block of code that executes if an error occurs in the associated try block. It can also capture the error object for further processing. - finally Statement
The finally statement is used to define a block of code that executes after the try and catch blocks, regardless of whether an error occurred or not. This is useful for cleanup activities, such as closing files or releasing resources. - throw Statement
The throw statement is used to create a custom error. When an error is thrown, the control is transferred to the nearest catch block, if present. You can throw built-in errors or create your own error objects. - Error Object
JavaScript provides built-in error objects, such as Error, TypeError, ReferenceError, and others. You can instantiate these error objects and throw them for more specific error handling.
What are the various statements in error handling- key differences
try: Wraps code that may throw an error.
catch: Handles errors thrown in the try block.
finally: Executes cleanup code regardless of error occurrence.
throw: Creates a custom error to be caught by catch.
Error Object: Built-in objects representing different types of errors for better specificity.
What is the purpose of Error object?
-> Error Representation
-> Debugging
-> Custom Errors
-> Error Propagation
-> Information Sharing
Built-in Error Types:
-> TypeError: Represents an error when a value is not of the expected type.
-> ReferenceError: Thrown when trying to access a variable that is not declared.
-> SyntaxError: Occurs when the code does not conform to the syntax rules.
-> RangeError: Indicates a number is outside a valid range.
What are the 3 states of promise?
A Promise in JavaScript represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises have three distinct states:
-
Pending
Definition: The initial state of a Promise. It indicates that the asynchronous operation has not yet completed; the outcome is still unknown. -
Fulfilled
Definition: The state of a Promise when the asynchronous operation has completed successfully.
Characteristics: When a Promise is fulfilled, it means that the operation completed without any errors, and it has a resolved value. The then method can be used to handle the successful outcome. -
Rejected
Definition: The state of a Promise when the asynchronous operation has failed.
Characteristics: When a Promise is rejected, it indicates that an error occurred during the operation, and it has a reason for the failure (often an error object). The catch method can be used to handle the error.
What is an async function?
An async function in JavaScript is a special type of function that allows you to work with asynchronous code more easily and intuitively. It is defined using the async keyword before the function declaration. Here’s a detailed overview of what async functions are and how they work:
Key Features of Async Functions
Simplified Syntax for Asynchronous Operations:
Async functions enable you to write asynchronous code that looks and behaves like synchronous code, making it easier to read and maintain.
Return Value:
An async function always returns a Promise. If the function returns a value, that value is automatically wrapped in a resolved Promise. If it throws an error, the returned Promise will be rejected.
What is a prototype? What is the difference between __proto__ and prototype?
A prototype is an object from which other objects inherit properties and methods. Every JavaScript object has an internal property called [[Prototype]], which can be accessed through the __proto__ property (more on this below). This prototype chain allows for inheritance, enabling objects to share methods and properties without needing to define them repeatedly.
prototype:
The prototype property is found on constructor functions (and classes). It is an object that is used as a template for instances created from that constructor. Any properties or methods defined on prototype will be available to all instances of that constructor.
__proto__:
The __proto__ property is an accessor property (a property that can be read or written to) on all objects. It refers to the object’s prototype (the [[Prototype]] internal property). When you access object.__proto__, you get the prototype object from which the object was constructed.
Prototype vs __proto__
Prototype: Refers to the object that serves as a template for instances of a constructor. It is used for inheritance and is a property of constructor functions (or classes).
__proto__: An internal property of all objects that points to the prototype from which the object was instantiated. It allows you to access the prototype chain at runtime.
What is an event loop?
It is inifinite loop that constantyl checks call stack.
What is destructuring assignment (array, object)?
Destructuring assignment is a convenient syntax in JavaScript that allows unpacking values from arrays or properties from objects into distinct variables. This feature improves code readability and reduces the need for repetitive code when accessing multiple properties or elements. Let’s explore both array and object destructuring assignments.
Array destructuring allows you to extract values from an array and assign them to individual variables. The syntax uses square brackets ([]).
const fruits = [‘apple’, ‘banana’, ‘cherry’];
// Destructuring assignment
const [firstFruit, secondFruit] = fruits;
console.log(firstFruit); // Output: “apple”
console.log(secondFruit); // Output: “banana”
Destructuring Assignment for Objects
Object destructuring allows you to extract properties from an object and assign them to variables. The syntax uses curly braces ({}).
const person = {
name: ‘Alice’,
age: 30,
city: ‘New York’
};
// Destructuring assignment
const { name, age } = person;
What are the differences between cookie, local storage and session storage?
Cookies:
Purpose: Mainly for server-side session management and tracking.
Capacity: About 4 KB per cookie.
Expiration: Can be set with specific expiration; deleted when the session ends if not set.
Accessibility: Accessible by both server and client; sent with every HTTP request.
Local Storage:
Purpose: For long-term client-side data storage.
Capacity: 5-10 MB per origin.
Expiration: Data persists until explicitly deleted.
Accessibility: Accessible only through JavaScript; not sent with HTTP requests.
Session Storage:
Purpose: For short-term storage within a single browser session.
Capacity: Similar to local storage (about 5-10 MB per origin).
Expiration: Data is cleared when the tab or window is closed.
Accessibility: Accessible only through JavaScript; not sent with HTTP requests.
What are the different ways of adding event listener to an element?
Using addEventListener Method
This is the most common and modern way to attach an event listener to an element.
const button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, function() {
console.log(‘Button clicked!’);
});
Using HTML Attributes
You can directly add event handlers in HTML using attributes.
<button>Click me!</button>
What is an event delegation?
Event delegation is a technique in JavaScript that allows you to manage events efficiently by attaching a single event listener to a parent element instead of multiple listeners to individual child elements. This approach takes advantage of event bubbling, where an event triggered on a child element propagates (bubbles) up to its parent elements in the DOM hierarchy.
Event Bubbling:
When an event occurs on an element, it first triggers the event on that element and then propagates up to its parent elements (and their ancestors) until it reaches the root of the DOM. This bubbling mechanism allows parent elements to listen for events that occur on their children.
Single Event Listener:
**Instead of adding separate event listeners to multiple child elements, **you can add one listener to a common parent. This reduces memory usage and improves performance, especially when dealing with a large number of child elements.
Dynamic Elements:
Event delegation is particularly useful when working with dynamically generated elements. If new child elements are added to the DOM after the event listener is set up, they will still be able to trigger the parent’s event listener.
What are the possible ways to create objects in JavaScript
Object literal syntax:
Object constructor:
Object’s create method:
Function constructor:
Function constructor with prototype
Object’s assign method:
