Vanilla Javascript

splice method in javascript
The  splice()  method in JavaScript is a powerful array method used to change the contents of an array by removing, replacing, or adding elements at a specified position.  It directly modifies the original array and returns an array containing the removed elements (if any).   

 

 

 

 

 

 

 

 

 Syntax: 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 array.splice(startIndex, deleteCount, item1, item2, ..., itemN); 

 

 Parameters: 

 

 

 

 

 

 

 

 startIndex  (Required):  

 The index at which to start changing the array. 

 

 If  startIndex  is negative, it's treated as an offset from the end of the array (e.g., -1 refers to the last element). 

 

 

 

 

 

 

 

 If  startIndex  is greater than the array's length, it's treated as the array's length. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 deleteCount  (Optional):  

 The number of elements to remove from the array, starting from  startIndex .   

 

 

 

 

 

 

 If  deleteCount  is 0, no elements are removed. 

 If  deleteCount  is omitted or greater than the number of elements remaining after  startIndex , all elements from  startIndex  to the end of the array are removed. 

 

 

 

 

 

 

 

 

 

 

 item1, item2, ..., itemN  (Optional):  

 The elements to add to the array, starting from  startIndex , after any elements have been removed. 

 

 

 

 

 

 

 

 Return Value: 

 

 

 

 

 The  splice()  method returns an array containing the removed elements.  If no elements are removed, it returns an empty array.   

 

 

 

 

 

 

 

 

 

 

 Common Use Cases: 

 

 

 

 

 removing elements. 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 const months = ['Jan', 'March', 'April', 'June'];

 months.splice(1, 2); // Removes 2 elements starting from index 1 ('March', 'April')

 // months is now ['Jan', 'June'] 

 

 

 adding elements. 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 const fruits = ['apple', 'banana', 'cherry'];

 fruits.splice(2, 0, 'grape', 'lemon'); // At index 2, remove 0 elements, then add 'grape' and 'lemon'

 // fruits is now ['apple', 'banana', 'grape', 'lemon', 'cherry'] 

 

 

 replacing elements. 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 const colors = ['red', 'green', 'blue'];

 colors.splice(1, 1, 'yellow'); // At index 1, remove 1 element ('green'), then add 'yellow'

 // colors is now ['red', 'yellow', 'blue'] 

 

 

 Important Note: The  splice()  method modifies the original array directly.  If you need to manipulate a portion of an array without changing the original, consider using the  slice()  method instead, which returns a new array with the selected elements

object.freeze in javascript
Object.freeze()  in JavaScript is a static method that freezes an object, making it immutable.  This means that once an object is frozen: 

 

 

 

 

 

 

 

 New properties cannot be added.   

 Attempts to add new properties will fail silently in non-strict mode and throw a  TypeError  in strict mode. 

 

 

 

 

 

 

 

 

 Existing properties cannot be removed.   

 Deleting properties will also fail silently or throw an error in strict mode.   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 Existing properties cannot be modified.   

 The values of existing properties cannot be changed, and their attributes (enumerability, configurability, writability) cannot be altered. 

 

 

 

 

 

 

 

 

 The object's prototype cannot be re-assigned. 

 

 

 

 

 

 

 

 

 How to use  Object.freeze() : 

 

 

 

 

 You simply pass the object you want to freeze as an argument to the method.  It returns the same object, not a frozen copy.   

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 const myObject = {

 name: 'Alice',

 age: 30,

 address: {

 city: 'New York',

 zip: '10001'

 }

};

Object.freeze(myObject);

// Attempts to modify the frozen object:

myObject.age = 31; // Fails silently (or throws TypeError in strict mode)

myObject.newProperty = 'value'; // Fails silently (or throws TypeError in strict mode)

delete myObject.name; // Fails silently (or throws TypeError in strict mode)

console.log(myObject); // { name: 'Alice', age: 30, address: { city: 'New York', zip: '10001' } } 

 

 

 Important Considerations: 

 

 

 

 

 

 

 

 

 Shallow Freeze:   

 Object.freeze()  performs a shallow freeze.  This means it only freezes the immediate properties of the object.  If an object contains other objects or arrays as properties, those nested objects/arrays are not frozen and can still be modified.  To achieve a "deep freeze," you would need to recursively freeze all nested objects. 

 

 

 

 

 

 

 

 

 Immutability:   

 Object.freeze()  is a powerful tool for enforcing immutability, which can be beneficial for data integrity, preventing unintended side effects, and creating constant-like objects. 

 

 

 

 

 

 

 

 

 Strict Mode:   

 In strict mode, attempts to modify a frozen object will throw a  TypeError , which can help in identifying and debugging code that inadvertently tries to alter frozen objects.  

findindex method in javascript
The  findIndex()  method in JavaScript is an  Array  method that returns the index of the first element in an array that satisfies a provided testing function.  If no element in the array satisfies the condition, it returns -1.   

 

 

 

 

 

 

 

 

 Syntax: 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 arr.findIndex(callback(element, index, array), thisArg) 

 

 Parameters: 

 

 

 

 callback :  A function that is executed for each element in the array.  It takes up to three arguments: 

 

 element :  The current element being processed in the array. 

 index  (optional):  The index of the current element being processed. 

 

 

 

 array  (optional):  The array  findIndex()  was called upon. 

 

 

 

 

 thisArg  (optional):  A value to be used as  this  when executing the  callback  function. 

 

 

 

 Return Value: 

 

 

 

 

 The index of the first element in the array that satisfies the provided test function. 

 -1 if no element satisfies the condition.   

 

 

 

 

 

 

 

 

 

 

 Example: 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 const numbers = [2, 8, 1, 3, 4];

// Find the index of the first odd number

const firstOddIndex = numbers.findIndex(function(element) {

 return element % 2 !== 0;

});

console.log(firstOddIndex); // Output: 2 (because 1 is at index 2)

// Find the index of a number greater than 5

const greaterThanFiveIndex = numbers.findIndex(element => element > 5);

console.log(greaterThanFiveIndex); // Output: 1 (because 8 is at index 1)

// Find the index of an element that doesn't exist

const nonExistentIndex = numbers.findIndex(element => element === 10);

console.log(nonExistentIndex); // Output: -1

throttling and debouncing in javascript
Debouncing and throttling are techniques in JavaScript used to optimize performance by controlling how often a function executes, particularly in response to high-frequency events.   

 

 

 

 

 

 

 

 

 Debouncing 

 

 

 Debouncing ensures that a function is executed only after a specified period of inactivity following a series of events.  If a new event occurs within that period, the previous timer is reset, and the function's execution is delayed again.  This means the function only fires once, after the user has stopped triggering the event for a certain duration. 

 

 

 

 Use Cases:   Search bar input (making an API call only after the user stops typing), window resize events (updating layout only after resizing is complete). 

 Example Implementation: 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 function debounce(func, delay) {

 let timeout;

 return function(...args) {

 const context = this;

 clearTimeout(timeout);

 timeout = setTimeout(() => func.apply(context, args), delay);

 };

 }

 const debouncedSearch = debounce(() => console.log("Performing search..."), 500);

 // Attach debouncedSearch to an input's 'keyup' event 

 

 

 Throttling 

 

 

 

 

 Throttling limits the rate at which a function can be executed.  It ensures that a function is called at most once within a specified time interval, regardless of how many times the event is triggered within that interval. 

 

 

 

 

 Use Cases:   Scroll events (updating UI elements periodically during scrolling), mouse movement tracking, button clicks with rate limits. 

 Example Implementation: 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 function throttle(func, limit) {

 let inThrottle;

 return function(...args) {

 const context = this;

 if (!inThrottle) {

 func.apply(context, args);

 inThrottle = true;

 setTimeout(() => (inThrottle = false), limit);

 }

 };

 }

 const throttledScrollHandler = throttle(() => console.log("Scrolling..."), 200);

 // Attach throttledScrollHandler to a 'scroll' event 

 

 

 Key Differences 

 

 

 

 

 

 

 

 

 Execution Timing:   

 Debouncing executes once after a period of inactivity, while throttling executes at a fixed rate within an interval. 

 

 

 

 

 

 

 

 

 Purpose:   

 Debouncing consolidates multiple rapid events into a single action, while throttling ensures a function doesn't execute too frequently.

difference between call bind apply
In JavaScript,  call ,  apply , and  bind  are methods used to control the  this  context within a function and to pass arguments to that function. 

 

 

 1.  call() 

 

 

 

 Execution:   Invokes the function immediately. 

 Arguments:   Takes the  this  value as the first argument, followed by arguments for the function passed individually (comma-separated). 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 const person = {

 name: "Alice"

};

function greet(greeting, punctuation) {

 console.log(`${greeting}, ${this.name}${punctuation}`);

}

greet.call(person, "Hello", "!"); // Output: Hello, Alice! 

 

 2.  apply() 

 

 

 

 Execution:   Invokes the function immediately. 

 

 Arguments:   Takes the  this  value as the first argument, followed by an array (or array-like object) of arguments for the function. 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 const person = {

 name: "Bob"

};

function greet(greeting, punctuation) {

 console.log(`${greeting}, ${this.name}${punctuation}`);

}

greet.apply(person, ["Hi", "."]); // Output: Hi, Bob. 

 

 

 3.  bind() 

 

 

 

 

 

 

 

 

 Execution:   

 Does not invoke the function immediately.  Instead, it returns a new function with the specified  this  context permanently bound. 

 

 

 

 

 

 

 

 

 Arguments:   

 Takes the  this  value as the first argument, optionally followed by arguments to be pre-filled (curried) into the new function.  These pre-filled arguments will be used when the new function is eventually called. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 

 const person = {

 name: "Charlie"

};

function greet(greeting, punctuation) {

 console.log(`${greeting}, ${this.name}${punctuation}`);

}

const boundGreet = greet.bind(person, "Hey");

boundGreet("?"); // Output: Hey, Charlie? 

 

 

 Summary of Differences: 

 

 

 

 

 

 

 

 

 Execution:   

 call  and  apply  execute the function immediately;  bind  returns a new function to be executed later. 

 

 

 

 

 

 

 

 

 Argument Handling:   

 call  takes arguments individually;  apply  takes an array of arguments;  bind  can take initial arguments that are pre-filled into the new function. 

 

 

 

 

 

 

 

 

 Return Value:   

 call  and  apply  return the result of the function execution;  bind  returns a new function.

flattening array in js
In JavaScript, flattening an array means converting a nested array (an array containing other arrays) into a single-level array.  The primary method for this is the  flat()  method, introduced in ES2019. 

 

 

 Using  Array.prototype.flat() : 

 

 

 The  flat()  method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.   

 

 

 

 

 

 

 

 

 

 

 

 

 

 JavaScript 

 

 

 

 

 

 

 

 

 

 

 // Example 1: Flattening to a default depth (1)

const nestedArray1 = [1, 2, [3, 4]];

const flattenedArray1 = nestedArray1.flat();

console.log(flattenedArray1); // Output: [1, 2, 3, 4]

// Example 2: Flattening to a specific depth

const nestedArray2 = [1, 2, [3, 4, [5, 6]]];

const flattenedArray2 = nestedArray2.flat(2); // Flatten two levels deep

console.log(flattenedArray2); // Output: [1, 2, 3, 4, 5, 6]

// Example 3: Flattening all levels using Infinity

const deeplyNestedArray = [1, [2, [3, [4, 5]]], 6];

const flattenedDeeply = deeplyNestedArray.flat(Infinity);

console.log(flattenedDeeply); // Output: [1, 2, 3, 4, 5, 6]

// Example 4: `flat()` also removes empty slots (holes) in an array

const arrayWithHoles = [1, , 3];

const flattenedWithHoles = arrayWithHoles.flat();

console.log(flattenedWithHoles); // Output: [1, 3] 

 

 Explanation: 

 

 

 

 When called without an argument,  flat()  defaults to a depth of 1, flattening only the first level of nested arrays. 

 You can pass a number as an argument to  flat()  to specify the desired depth of flattening. 

 To flatten an array to any depth (i.e., remove all levels of nesting), you can pass  Infinity  as the argument to  flat() . 

 

 

 

 

 While other methods like using  reduce()  with  concat()  or recursive functions can also flatten arrays,  Array.prototype.flat()  is the most straightforward and recommended approach for modern JavaScript development due to its simplicity and direct purpose

Angular vs Angularjs
AngularJS (or Angular 1.x) and Angular (versions 2 and above) are both Google-developed front-end frameworks, but  Angular is a complete rewrite of AngularJS . The key differences lie in their fundamental architecture, the language they use, and their performance capabilities.   

 

 

 

 

 

 Feature   

 AngularJS 

 Angular 

 

 

 Language 

 JavaScript 

 TypeScript (a superset of JavaScript) 

 

 

 Architecture 

 MVC (Model-View-Controller) 

 Component-based architecture 

 

 

 Performance 

 Slower (due to the "digest cycle" for change detection) 

 Faster (uses a more efficient unidirectional data flow and Ahead-of-Time (AOT) compilation) 

 

 

 Data Binding 

 Two-way data binding by default 

 One-way data binding primarily, with explicit syntax for two-way binding 

 

 

 Mobile Support 

 Limited; not optimized for mobile devices 

 Built with mobile support, including the ability to build native mobile apps 

 

 

 Tooling 

 Relied on third-party tools (e.g., WebStorm) 

 Includes an official powerful CLI (Command Line Interface) for scaffolding, building, and testing 

 

 

 Support Status 

 End-of-Life (reached EOL in December 2021, though third-party support is available) 

 Actively maintained with regular updates and long-term support 

 

 

 

 

 

 Summary of Differences 

 

 Fundamentally Different:  Angular is not an incremental upgrade to AngularJS; it is an entirely new framework built to address the limitations of its predecessor and align with modern web development practices. 

 Modern Language:  The shift from JavaScript to TypeScript in Angular offers benefits like static typing, which helps catch errors during development and improves code maintainability and scalability for large applications. 

 Improved Performance:  Angular's component-based architecture and efficient data flow provide significantly better performance than AngularJS's MVC architecture and digest cycle mechanism. 

 Better Tooling:  The Angular CLI streamlines the development process, making it easier to manage large projects, run tests, and deploy applications, a feature lacking in AngularJS.   

 

 For any new projects, it is highly recommended to use the latest version of  Angular , while AngularJS is primarily relevant for maintaining legacy systems

javascript debugging tools
The primary JavaScript debugging tools are the  built-in browser developer tools , which include a robust  debugger panel  and the  console.log()  method. Other essential tools include IDE-integrated debuggers and third-party error monitoring services.   

 

 Built-in Browser Developer Tools   

 All modern browsers come with powerful built-in debuggers, typically accessed by pressing  F12  or right-clicking and selecting  Inspect .   

 

 Chrome DevTools : The most widely used set of tools, offering panels for sources (debugging), console (logging), network monitoring, performance analysis, and memory tracking. You can learn more on the Chrome for Developers site. 

 Firefox Developer Tools : Provides features similar to Chrome DevTools, with some unique options for debugging. 

 Edge Developer Tools : Built on the same Chromium base as Chrome, offering an identical debugging experience. 

 Safari Web Inspector : The go-to tool for debugging on Apple devices.   

 

 Key features of these tools include: 

 

 Breakpoints : Pauses code execution at a specific line, allowing you to inspect the program's state at that moment. 

 Step-through debugging : Allows you to execute code line by line, stepping into, over, or out of functions to track flow and variable changes. 

 Scope and Watch Panels : Displays the values of local, closure, and global variables while the code is paused. 

 Console : Used to log messages and variable values using  console.log() ,  console.error() , etc., and to evaluate arbitrary JavaScript expressions in the current scope.   

 

 

 Integrated Development Environment (IDE) Debuggers   

 IDEs and code editors often provide integrated debuggers that work seamlessly with your source code.   

 

 Visual Studio Code (VS Code) : A highly popular, free code editor with a powerful, integrated debugger that works for both client-side and Node.js code via extensions. 

 WebStorm : A commercial IDE designed specifically for JavaScript development that includes a robust debugger and strong framework support. 

 Node.js Inspector : A built-in command-line utility for debugging server-side Node.js applications.   

 

 

 Third-Party and Specialized Tools 

 For advanced scenarios, such as session replay or API debugging, specialized tools are valuable.   

 

 Postman : Primarily for API testing, it helps debug interactions between frontend and backend services by verifying requests, headers, and responses. 

 LogRocket : A session replay tool that records user actions and automatically tracks errors, allowing developers to see bugs exactly as the user experienced them. 

 ESLint : A static analysis tool (linter) that identifies problematic patterns and potential errors in your code  before  it runs.  

vanilla javascript
Vanilla JavaScript refers to the use of core JavaScript language features and browser APIs without relying on external libraries or frameworks like jQuery, React, Angular, or Vue.js.  It is essentially plain, unadulterated JavaScript. 

 

 

 Key characteristics of Vanilla JavaScript: 

 

 

 

 

 

 

 

 Pure JavaScript:   

 It involves writing code using only the native capabilities of the JavaScript language. 

 

 

 

 

 

 

 

 

 

 Direct DOM manipulation:   

 Interactions with the Document Object Model (DOM) are handled directly using built-in browser APIs (e.g.,  document.getElementById ,  document.querySelector ,  element.addEventListener ). 

 

 

 

 

 

 

 

 

 No external dependencies:   

 There are no additional files or packages to include, resulting in a lighter footprint and potentially faster loading times. 

 

 

 

 

 

 

 

 

 Fundamental understanding:   

 Working with Vanilla JavaScript helps developers gain a deeper understanding of how the language and the browser environment function at a fundamental level. 

 

 

 

 

 

 

 

 Why use Vanilla JavaScript? 

 

 

 

 

 

 

 

 

 Performance:   

 Eliminating the overhead of libraries can lead to faster execution and smaller file sizes. 

 

 

 

 

 

 

 

 

 Control and flexibility:   

 Developers have complete control over the implementation, allowing for highly customized solutions. 

 

 

 

 

 

 

 

 

 Learning and understanding:   

 It provides a strong foundation for understanding JavaScript's core principles and how web applications are built. 

 

 

 

 

 

 

 

 

 Reduced complexity:   

 For simpler projects, it can avoid the need for build tools and complex setup processes often associated with frameworks. 

 

 

 

 

 

 

 

 

 Leveraging modern browser APIs:   

 Modern browsers offer powerful native APIs that can often replace the functionality of many libraries. 

 

 

 

 

 

 

 

 

 While frameworks and libraries offer significant advantages for large-scale or complex projects, understanding and utilizing Vanilla JavaScript remains crucial for any web developer