Javascript Flashcards
What is the difference between == and ===?
= is called as assignment operator, == is called as comparison operator whereas It is also called as comparison operator. = does not return true or false, == Return true only if the two operands are equal while === returns true only if both values and data types are the same for the two variables.
what is higher order function?
a function that takes one or more functions as arguments, or returns a function as its result. There are several different types of higher order functions like map and reduce.
What’s the difference between a variable that is: null, undefined or undeclared? How would you go about checking for any of these states?
Undeclared variable is when the variable has not been created.
Undefined variable when the variable is declared, but does not have a value.
a variable is null when the variable is declared, and has a value of nothing, the absence of a value.
let, var, const
var declarations are globally scoped or function/locally scoped. Old syntax.
Let is block scoped. Can be updated but not re-declared.
Const declarations are block scoped. Cannot be updated or re-declared.
What is apply, call and bind?
Call is a function that helps you change the context of the invoking function. In layperson’s terms, it helps you replace the value of this inside a function with whatever value you want.
Apply is very similar to the call function. The only difference is that in apply you can pass an array as an argument list.
Bind is a function that helps you create another function that you can execute later with the new context of this that is provided.
What is hoisting?
Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the compilation phase before the code is executed. This means that you can use a variable or call a function before they are declared in the code, and JavaScript will still correctly find and execute them.
What is asynchronous programming and why is it important in JavaScript?
asynchronous programming allows certain operations to be performed in the background while the rest of the code continues executing without waiting for those operations to complete.
In JavaScript, asynchronous programming is crucial because JavaScript is a single-threaded language, meaning it executes one task at a time in a specific order. If a task takes a long time to complete, it can block the execution of other tasks, making the application slow and unresponsive.
How to compare two objects?
_.isEqual()
How to copy an Array?
Using the Spread Operator (…):
The spread operator allows you to create a shallow copy of an array by expanding its elements into a new array. It creates a new array with the same elements as the original array.
Using the slice() method:
The slice() method returns a shallow copy of a portion of an array specified by its start and end indices. If no arguments are provided, it returns a copy of the entire array.
Using Array.from():
The Array.from() method creates a new array from an iterable object or array-like object. When used with an existing array, it creates a copy of that array.
Using concat() method:
The concat() method is used to merge two or more arrays. When used with a single array, it can be used to create a copy of that array.
What is the DOM?
Document: The “document” in DOM refers to the HTML document itself. It serves as the entry point for accessing and manipulating the content of the web page.
Object: The DOM represents the HTML elements as objects. Each HTML element is treated as an object, and these objects have properties and methods that developers can use to interact with and modify the elements.
Model: The DOM is a “model” because it provides a structured representation of the HTML document, organizing it into a hierarchical tree structure. Each element, attribute, and text node in the HTML is represented as a node in the DOM tree.
The DOM enables developers to perform various actions on a web page, such as:
Accessing and modifying HTML elements and their attributes.
Adding or removing HTML elements dynamically.
Handling events, such as user interactions (clicks, inputs, etc.).
Animating elements and updating their styles and content in real-time.
Reading and writing data to and from the web page.
What is prototypal inheritance?
Inheritance: When an object is created, it inherits properties and methods from its prototype. If you access a property or method on the object, and it doesn’t have it, JavaScript will look for that property/method in its prototype, and so on, until it finds it or reaches the Object.prototype.
What is cookie? cookies vs localStorage vs sessionStorage?
Cookies are mainly used for small data that needs to be sent to the server with each request and can persist across sessions. They have size limitations and are ideal for tasks like user authentication tokens or tracking user activity.
localStorage provides larger storage capacity and persists data across browser sessions. It is suitable for data that needs to be retained across visits, such as user preferences or cached data.
sessionStorage is similar to localStorage but only persists data within a single browser session. It is suitable for temporary data that is needed during the current session and should not be retained beyond that.
Choosing between these storage options depends on the specific use case and requirements of your web application.
What’s the benefit of using async/await?
The async/await feature in JavaScript provides a more concise and readable way to work with asynchronous code, making it easier to write and understand asynchronous operations. It is built on top of Promises and offers the following benefits:
Readability: async/await allows you to write asynchronous code in a more synchronous style, making it easier to understand and reason about the flow of the program. Asynchronous operations are written using familiar try-catch blocks, which can improve code readability, especially when dealing with multiple asynchronous operations.
Error Handling: With async/await, error handling becomes more straightforward. You can use a try-catch block to catch any errors that occur during asynchronous operations. This helps in avoiding deeply nested Promise chains and simplifies error handling.
Chaining: Instead of chaining multiple .then() methods, async/await allows you to write asynchronous operations sequentially using simple control flow constructs like await. This can make the code more linear and easier to follow.
Debugging: Asynchronous code can be challenging to debug due to the nature of Promise chains. async/await makes debugging easier because the code execution stops at the point of an exception, and you can inspect the variables and state in the try-catch block.
Error Propagation: When using async/await, if an error occurs within the asynchronous function, it automatically rejects the returned Promise, allowing you to handle the error in the catch block. This ensures consistent error propagation through the Promise chain.
React context vs Redux
How does React use closures?
Closures play a vital role in React’s implementation of hooks, such as useState, useEffect, and useCallback.
State Management with useState:
Under the hood, useState uses closures to keep track of the current state value and preserve it across re-renders. The state variables and their update functions are created within the scope of the functional component, and they “remember” their values between different renders.
Event Handling with Closures:
React uses closures to manage event handlers effectively. When you define an event handler inside a functional component, it captures the current state and props at the time of its creation. This ensures that the event handler always has access to the latest state and props, even if they change in subsequent renders.
useEffect and Cleanup Functions:
The useEffect hook is used to perform side effects in functional components. It can also return a cleanup function that will be executed when the component unmounts or before the next effect is executed. The cleanup function also relies on closures to access the state and props at the time the effect was defined.
