Vanilla Javascript

• splice method in javascript
• object.freeze in javascript
• findindex method in javascript
• throttling and debouncing in javascript
• difference between call bind apply
• flattening array in js
• Angular vs Angularjs
• javascript debugging tools
• vanilla javascript

splice method in javascript

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

    const months = ['Jan', 'March', 'April', 'June'];
    months.splice(1, 2); // Removes 2 elements starting from index 1 ('March', 'April')
    // months is now ['Jan', 'June']

    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']

    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']

object.freeze in 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' } }

findindex method in javascript

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

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

    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

    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

difference between call bind apply

const person = {
  name: "Alice"
};

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

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

const person = {
  name: "Bob"
};

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

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

const person = {
  name: "Charlie"
};

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

const boundGreet = greet.bind(person, "Hey");
boundGreet("?"); // Output: Hey, Charlie?

flattening array in js

// 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]

Angular vs Angularjs

• 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. 

javascript debugging tools

• 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. 

• 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. 

• 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. 

• 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