JavaScript PDF - Fundamentals

event JavaScript Which JS array methods change the original array? ​ pop: delete the last element of the array ​ push: adds a new element to the last index ​ shift: delete the first element ​ slice: gives back a shallow copy of the array from [start] to [end]​ What is the easiest way to co...

event JavaScript Which JS array methods change the original array? ​ pop: delete the last element of the array ​ push: adds a new element to the last index ​ shift: delete the first element ​ slice: gives back a shallow copy of the array from [start] to [end]​ What is the easiest way to convert an array to an object?​ -Object.assign() with rest parameter: ​ const res: obj = ​ Object.assign({},...arr); What is the difference between var, let and const? ​ they have different behaviors and scopes: ○​ Var: ​ Global / Function-scoped ​ Can be re-declared but not in the same scope ​ Can be updated ○​ Let: ​ Block-xxf ​ Cannot be redeclared ​ Can be updated ​ Hoisting: Variables declared with let are also hoisted, but unlike var, they are not initialized until the code execution reaches their declaration. This leads to a "temporal dead zone" where the variable exists but cannot be used before its declaration. ○​ Const: ​ Block-scoped ​ Cannot be re-assigned ​ Hoisting: similar to let ​ Cannot be updated or re-declared ​ What is a Temporal Dead Zone? ​ A Temporal Dead Zone (TDZ) is a short period of time in the execution ( region in the code ) where variables and functions declared using let or const are not accessible (until the moment it gets initialized with a value). ​ a variable is inaccessible until the moment the computer completely initializes it with a value. ​ Imagine you're writing a JavaScript program with multiple blocks of code that are executed sequentially. Each block has its own scope, where variables and functions are defined. In some cases, these blocks can overlap, creating a "dead zone" where certain variables or functions are not accessible. What are the ways to create an object in JavaScript? ​ Constructor Functions: ○​ function Person(name, age) { ○​ this.name = name; ○​ this.age = age; ○​ } ○​ ○​ let user = new Person('John', 30); ○​ console.log(user)//Person {name: 'John', age: 30} ○​ console.log(Person) ○​ ​ Object. create(): ○​ const person= Object.create({ ○​ firstName:'john',  ○​ age:30 ○​ }) ○​ console.log(person.age)//30 ​ ES6 Classes: ○​ class Person { ○​ constructor(name, age) { ○​ this.name = name; ○​ this.age = age; ○​ } ○​ } ○​ ○​ const user=new Person('John',30) ○​ console.log(user)//Person {name: 'John', age: 30} ​ Factory Functions: ○​ function createPerson(name, age) { ○​ return { ○​ name: name, ○​ age: age, ○​ }; ○​ } ○​ ○​ const user=createPerson('John',30) ○​ console.log(user) //{name: 'John', age: 30} ​ Object Literal: ○​ const person= { ○​ name: 'John', ○​ age: 30, ○​ }; ○​ console.log(person)//{name: 'John', age: 30}​ ​ ​ ​ ​ ​ ​ How do you copy properties from one object to other? ​ Object.assign(): ○​ const target = {}; ​ const source = { a: 1, b: 2 }; ​ Object.assign(target, source); ​ console.log(target); // { a: 1, b: 2 } ​ Spread Operator (...) ○​ const source = { a: 1, b: 2 }; ​ const target = {...source };​ console.log(target); // { a: 1, b: 2 }​ What do you understand by “this” keyword in JavaScript? ​ the this keyword refers to the context in which a function is executed, or the object on which the function was called. Its value is determined dynamically based on how and where the function is invoked, and it can vary depending on the context. ​ In global context: this refers to the global object (like window in browsers). ​ In methods: this refers to the object that owns the method. ​ In constructor functions: this refers to the new object being created. ​ In event handlers: this refers to the element that triggered the event. ​ In arrow functions: this is lexically bound to the surrounding scope.​ What is currying? ​ Currying is a functional programming technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. ​ What is the difference between regular functions and arrow functions? ​ arguments Object: ○​ Regular Functions: ​ Regular functions have access to the arguments object, which is an array-like object containing the function's parameters. ​ ○​ Arrow Functions: ​ Arrow functions do not have their own arguments object. If you need access to the arguments in an arrow function, you must use rest parameters (...args). ​ ​ Syntax: ○​ Regular Functions: ​ Regular functions use the function keyword and can have either a function declaration or function expression syntax.  ​ ○​ Arrow Functions: ​ Arrow functions use a concise syntax with the => operator. They omit the function keyword and return the result implicitly if written in a single line. ​ ​ this Binding: ○​ Regular Functions: ​ this refers to the object that calls the function. Its value is determined at runtime based on the execution context (global object, object method, etc.). ​  ○​ Arrow Functions: ​ Arrow functions do not have their own this. Instead, they capture the this value from their surrounding lexical context (i.e., where the function is defined, not where it's called). As a result, they cannot be used as methods in objects if this is required to refer to the object itself. ​ What is the difference between "==" and "===" operators? ​ The key difference between == (loose equality) and === (strict equality) operators is in how they compare values (type coercion) ​ == (Loose Equality Operator) ○​ compares two values for equality after performing type coercion ( it converts one or both values to the same type before making the comparison) ​ === (Strict Equality Operator) ○​ compares both the value and type of the operands without performing type coercion.​ ​ ​ ​ ​ ​ ​ ​ ​ Explain Implicit Type Coercion in JavaScript. ​ Implicit type conversion is when JavaScript automatically converts a value to a different data type based on the context in which it is used ​ For instance, when adding a number and a boolean, JavaScript will automatically convert the boolean to number before performing the operation: What are the various statements in error handling? ​ error handling is primarily done using try-catch-finally statements and the throw keyword. These constructs allow you to manage runtime errors, handle exceptional situations gracefully, and define custom error-handling logic. ​ try Statement: ○​ The try block allows you to write code that might throw an error. If an error occurs anywhere inside the try block, control immediately passes to the catch block (if it exists). ○​ ​ catch Statement: ○​ The catch block allows you to handle the error that occurred in the try block. It takes an optional parameter (often called error or e), which is an object representing the error that occurred.  ○​ ○​ The error object contains information about the error, including its message, type, and stack trace. ​ finally Statement: ○​ The finally block contains code that will run regardless of whether an error occurred or not. It is usually used for cleanup tasks, like closing connections, releasing resources, or resetting states. ○​ ​ throw Statement: ○​ The throw statement is used to manually create and throw an error. This allows you to create custom error messages or trigger an error based on certain conditions. ○​  ○​ When the throw statement is executed, control is passed directly to the nearest catch block. What is the purpose of Error object? ​ Error objects are thrown when runtime errors occur. The Error object can also be used as a base object for user-defined exceptions. ​ When a Runtime error occurs a new Error object is being created and thrown.​ What are the 3 states of promise? ​ The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. ​ A Promise is in one of these states: ○​ Pending: initial state, neither fulfilled nor rejected. ○​ Fulfilled: meaning that the operation was completed successfully. ○​ Rejected: meaning that the operation failed.​ ​ What is an async function?​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ What is a prototype? What is the difference between __proto__ and prototype? ​ Prototypes are a fundamental part of inheritance and object creation. They are the mechanism by which objects inherit properties and methods from other objects. ​ __proto__ (property): ○​ is a way to inherit properties from an object in JavaScript. ○​ This __proto__ sets all properties of the object set in its [[Prototype]] to the target object. ○​ it picks the properties in the prototype and set it to the target objects prototype property. ○​ ​ Prototype is an object from which other objects inherit properties. ○​ Every object has a hidden property called [[Prototype]] (which can be accessed using the __proto__ property) that points to another object, called its prototype. ○​ JS automatically adds a prototype property to for example functions upon creation. This prototype object allows attaching methods and properties, facilitating inheritance for all objects created from the function.​ ​ ​ ​ ​ ​ ​ ​ What are the advantages of Getters and Setters? ​ They are special methods that allow controlled access to object properties. They provide a way to define how properties are retrieved (getter) and modified (setter) while keeping the underlying data encapsulated. ​ Getters and setters allow you to encapsulate the internal logic related to getting or setting a property. This gives you control over how properties are accessed and updated. ○​ For example, you can perform validation or transformation of values before setting or retrieving them. ​ Setter: ○​ Setters allow you to add validation before updating a property. This prevents incorrect or inconsistent data from being assigned to the object. ○​ We can check types, ranges, or other conditions before accepting the value. ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ What is an event loop? ​ The event loop is the main part of JavaScript's non-blocking concurrency model, enabling asynchronous programming while keeping the single-threaded nature of JavaScript intact. It allows JavaScript to handle multiple I/O operations efficiently, ensuring that the main thread is never blocked by long-running tasks. ​ ○​  ○​ ○​ What is destructuring assignment (array, object)? ​ It is a way to extract values from arrays or objects and assign them to variables. ​ Array Destructuring: ○​ Array destructuring allows you to extract elements from an array and assign them to variables. ○​ ​ ​ ​ ​ ​ ​  ​ Object Destructuring: ○​ Object destructuring allows you to extract properties from an object and assign them to variables. ○​ ​ ​ ​ ​ What are the differences between cookie, local storage and session storage? ​ Cookies, Local Storage, and Session Storage are all methods of storing data in a web browser, but they differ in terms of capacity, lifespan, accessibility, and security. ​ ​ ​ ​  ​ ​ ​ ​ What are the different ways of adding event listener to an element? ​ Using addEventListener() Method: ○​ ​ Using Inline Event Handlers: ○​ ​ ​  ​ ​ What is the use of stopPropagation method? ​ The stopPropagation() method is typically used within an event handler to stop the event from propagating to parent elements…... This can be useful in various scenarios, such as when you want to prevent parent elements from executing their own event handlers or to isolate the event handling to a specific element. ​ When an event occurs on an element, it can trigger the same event on its parent elements, following the event propagation model, which consists of two phases: capturing and bubbling. ​ ​ What is an event delegation? ​ It is an event-handling pattern that allows you to handle events at a higher level in the DOM tree other than the level where the event was first received. ​ Event Delegation is a useful pattern that allows you to write cleaner code, and create fewer event listeners with similar logic.