DEV Community: bugudiramu

JavaScript Arrays & HashMaps: Mastering the Most Asked LeetCode Problems in Coding Interviews

bugudiramu — Sun, 17 Dec 2023 06:46:02 +0000

A Brief Introduction

🚀 Your Roadmap to Tech Interview Success

Embark on a journey through common array and hashmap problems on LeetCode with this guide. Whether you're a beginner or a seasoned developer, it focuses on essential problem-solving and algorithmic skills.

Explore challenges like checking for duplicates, validating anagrams, finding sums, and identifying frequent elements. Each problem comes with straightforward solutions and explanations, using techniques like sets, maps, sorting, and iterations.

Clear code snippets and simple algorithm breakdowns ensure understanding. Time and space complexities provided offer insights into solution efficiency. Whether you're starting out or refining your skills, this guide equips you with a versatile toolkit for LeetCode's challenges. Happy coding! 🌐👩‍💻

217. Contains Duplicate

function containsDuplicate(nums) {
  if (!nums.length) return false;
  const uniqueNums = new Set();

  for (const num of nums) {
    if (uniqueNums.has(num)) {
      return true;
    }
    uniqueNums.add(num);
  }
  return false;
}

const result = containsDuplicate([1, 2, 3, 1]);
console.log(result); // true

Time complexity: O(n)
Space complexity: O(n)

Algorithm:

Check if the array 'nums' is empty. If it is, return false since an empty array cannot have duplicates.
Create a Set called 'uniqueNums' to store unique elements encountered while iterating through the array.
Iterate through each element 'num' in the array 'nums' using a for...of loop. a. Check if 'uniqueNums' already has the current element 'num'.
- If true, it means the array contains a duplicate, so return true.
- If false, add the current element 'num' to 'uniqueNums'.
If the loop completes without returning true, it indicates that no duplicates were found, so return false.

242. Valid Anagram

function isAnagram(str1, str2) {
  if (str1.length !== str2.length) {
    return false;
  }

  const charCountMap = new Map();

  for (const char of str1) {
    charCountMap.set(char, (charCountMap.get(char) || 0) + 1);
  }

  for (const char of str2) {
    if (charCountMap.get(char)) {
      charCountMap.delete(char);
    }
  }

  return charCountMap.size === 0;
}

const result = isAnagram("ramu", "umar");
console.log(result); // true

Time complexity: O(n)
Space complexity: O(n)

Algorithm:

Check if the lengths of str1 and str2 are not equal. If they are not equal, return false since they cannot be anagrams.
Create a Map called charCountMap to store the count of each character in str1.
Iterate over each character (char) in str1:
a. If char is already in charCountMap, increment its count.
b. If char is not in charCountMap, set its count to 1.
Iterate over each character (char) in str2:
a. Check if char is in charCountMap and its count is greater than 0.
b. If true, decrement the count of char in charCountMap.
c. If false, return false since char is not present in str1 or its count is exhausted.
After both iterations, check if charCountMap is empty (size is 0).
a. If true, return true, indicating that str1 and str2 are anagrams.
b. If false, return false.

1. Two Sum

function twoSum(nums, target) {
  const indexMap = new Map();

  for (let i = 0; i < nums.length; i++) {
    const currentNumber = nums[i];
    const complement = target - currentNumber;

    if (indexMap.has(complement)) {
      return [indexMap.get(complement), i];
    }

    indexMap.set(currentNumber, i);
  }

  return [];
}

const result = twoSum([3, 2, 4], 6);
console.log(result);

Time complexity: O(n)
Space complexity: O(n)

Algorithm Steps:

Create an empty Map called indexMap to store numbers and their corresponding indices.
Iterate through the nums array using a for loop with index variable i.
Inside the loop:

Get the currentNumber at index i.
Calculate the complement as target minus currentNumber.
Check if the complement exists in the indexMap.
If yes, return an array containing the indices of complement and currentNumber.
If not, store the currentNumber and its index in the indexMap.

If the loop completes without finding a pair, return an empty array.

49. Group Anagrams

function groupAnagrams(strs) {
  const anagramMap = new Map();

  for (const str of strs) {
    const sortedStr = str.split("").sort().join("");

    if (anagramMap.has(sortedStr)) {
      anagramMap.get(sortedStr).push(str);
    } else {
      anagramMap.set(sortedStr, [str]);
    }
  }

  return [...anagramMap.values()];
}

const result = groupAnagrams(["eat", "tea", "tan", "ate", "nat", "bat"]);
console.log(result);

Time complexity: O(n log n)
Space complexity: O(n)

Algorithm:

Initialize an empty Map called anagramMap to store anagrams.
Iterate through each string (str) in the input array (strs). a. Convert the string into an array of characters, sort the array, and then join the characters back into a string. b. Check if the sorted string exists as a key in anagramMap.
- If yes, push the original string (str) to the corresponding array value.
- If no, create a new entry in the map with the sorted string as the key and an array containing the original string as the value.
After processing all strings, return an array containing all the values from anagramMap.
- Each value in the array represents a group of anagrams.

347. Top K Frequent Elements

function topKFrequent(nums, k) {
  const frequencyMap = new Map();

  for (const num of nums) {
    frequencyMap.set(num, (frequencyMap.get(num) || 0) + 1);
  }

  const result = [];
  for (const [num, frequency] of frequencyMap) {
    if (frequency >= k) {
      result.push(num);
    }
  }

  return result;
}

const result = topKFrequent([1, 1, 1, 2, 2, 3], 2);
console.log(result);

Time complexity: O(n)
Space complexity: O(n)

Algorithm:

Create a frequency map using a Map to count the occurrences of each unique number in the input array 'nums'.
Iterate through each element 'num' in the 'nums' array. a. If 'num' is already a key in the frequency map, increment its value by 1. b. If 'num' is not a key, set its value to 1.
Initialize an empty array 'result' to store the numbers with a frequency greater than or equal to 'k'.
Iterate through each entry [num, frequency] in the frequency map. a. If the frequency is greater than or equal to 'k', push 'num' to the 'result' array.
Return the 'result' array containing numbers with frequencies greater than or equal to 'k'.

238. Product of Array Except Self

function productExceptSelf(nums) {
  const n = nums.length;

  const result = new Array(n).fill(1);

  let leftProduct = 1;
  for (let i = 0; i < n; i++) {
    result[i] *= Math.abs(leftProduct);
    leftProduct *= nums[i];
  }

  let rightProduct = 1;
  for (let i = n - 1; i >= 0; i--) {
    result[i] *= Math.abs(rightProduct);
    rightProduct *= nums[i];
  }

  return result;
}

const result = productExceptSelf([1, -1]);
console.log(result);

Time complexity: O(n)
Space complexity: O(n)

Algorithm:

Initialize an array 'result' of length 'n' with all elements set to 1.
Initialize a variable 'leftProduct' to 1 to keep track of the product of elements to the left.
Iterate through the array from left to right: a. Update result[i] by multiplying it with the absolute value of 'leftProduct'. b. Update 'leftProduct' by multiplying it with the current element 'nums[i]'.
Initialize a variable 'rightProduct' to 1 to keep track of the product of elements to the right.
Iterate through the array from right to left: a. Update result[i] by multiplying it with the absolute value of 'rightProduct'. b. Update 'rightProduct' by multiplying it with the current element 'nums[i]'.
The 'result' array now contains the product of all elements except self for each index.
Return the 'result' array.

128. Longest Consecutive Sequence

If the given input array is sorted:

function longestConsecutive(nums) {
  if (nums.length === 0) {
    return 0;
  }

  let max = 1;
  let currMax = 1;

  for (let i = 1; i < nums.length; i++) {
    if (nums[i] === nums[i - 1] + 1) {
      currMax++;
    } else if (nums[i] !== nums[i - 1]) {
      currMax = 1;
    }

    max = Math.max(max, currMax);
  }

  return max;
}

const result = longestConsecutive([1, 2, 3, 4, 100, 200]);
console.log(result);

Time complexity: O(n)
Space complexity: O(1)

Algorithm:

If the input array is empty, return 0 as there are no consecutive elements.
Initialize two variables, max and currMax, to keep track of the overall maximum and the current maximum consecutive sequence length.
Iterate through the array starting from index 1. a. Check if the current element is one more than the previous element. If true, increment currMax. b. If the current element is not equal to the previous element (handling duplicates), reset currMax to 1. c. Update the overall maximum (max) by taking the maximum of max and currMax.
Return the final maximum consecutive sequence length (max).

If the given input array is not sorted:

function longestConsecutive(nums) {
  const set = new Set(nums);
  let max = 0;

  for (const num of nums) {
    if (set.has(num - 1)) continue;

    let currNum = num;
    let currMax = 1;

    while (set.has(currNum + 1)) {
      currMax++;
      currNum++;
    }
    max = Math.max(currMax, max);
  }
  return max;
}

const result = longestConsecutive([100, 4, 200, 1, 3, 2]);
console.log(result);

Time complexity: O(n)
Space complexity: O(n)

Algorithm:

Create a Set 'set' from the given array 'nums' to allow constant-time lookup.
Initialize a variable 'max' to 0 to keep track of the maximum length of consecutive sequence.
Iterate through each 'num' in the 'nums' array using a for...of loop. a. Check if 'num - 1' exists in the set. If yes, continue to the next iteration. b. If 'num - 1' does not exist, it means 'num' is the start of a potential consecutive sequence. c. Initialize variables 'currNum' to 'num' and 'currMax' to 1 to track the current sequence length. d. Use a while loop to iterate as long as 'currNum + 1' exists in the set.
- Increment 'currMax' and 'currNum' in each iteration to extend the consecutive sequence. e. Update 'max' by taking the maximum of 'currMax' and the previous 'max'.
Return the final 'max' representing the length of the longest consecutive sequence.

Thank you for reading this far; your support means a lot! If you have any questions, please don't hesitate to ask in the comments. Don't forget to like and share the article – your appreciation is highly valued. Your feedback and suggestions are also more than welcome. 🙏👍😊

Data Structures Implementation in JavaScript or TypeScript

bugudiramu — Mon, 11 Dec 2023 18:38:22 +0000

Introduction

This article is your guide to understanding and implementing Data Structures & Algorithms (DSA) using JavaScript and TypeScript. Whether you're a seasoned developer or a beginner, we'll cover practical examples of arrays, linked lists, stacks, queues, trees, and graphs. What's more, all TypeScript examples are available, and if you're a JavaScript enthusiast, the code is right there in my GitHub repository Code Samples. Get ready to strengthen your coding skills, as we unravel the power of DSA in the friendly world of JavaScript and TypeScript.

Note: This article excludes explanations and implementations of Heap and Trie. We'll cover these topics in detail when we delve into problem-solving associated with these concepts. Stay tuned for their inclusion!

Stack

Definition:

A Stack is a data structure that follows the Last In, First Out (LIFO) principle, where the last element added is the first one to be removed. It supports fundamental operations such as pushing (adding) an element to the top, popping (removing) the top element, checking if it's empty, obtaining the size, and peeking (viewing) the top element without removal.

Algorithmic Steps:

/**
 * Stack Class Definition:
 * - Initialize an empty array to store items and a variable to track size.
 * - Push: Add an element to the front of the array and increment size.
 * - Pop: Remove the first element if the stack is not empty and decrement size.
 * - isEmpty: Check if the size is zero to determine if the stack is empty.
 * - getSize: Return the current size of the stack.
 * - Peek: Return the first element if the stack is not empty.
 * - Clear: Reset the array and size if the stack is not empty.
 * - Contains: Check if the stack includes a specific value.
 * - ToString: Return a string representation of the stack.
 * - Clone: Perform a shallow clone of the stack's items.
 */

Complexity Analysis:

Insertion (Push): O(1)
- Adding an element to the top of the stack takes constant time.
Removal (Pop): O(1)
- Removing the top element from the stack also takes constant time.
Searching (Contains): O(n)
- Checking if a specific value is present involves a linear search through the stack.
Access (Peek, Get Size, Is Empty): O(1)
- Accessing the top element, getting the size, and checking for emptiness are constant-time operations.

Implementation:

class Stack<T> {
  private size: number;
  private items: T[];

  constructor() {
    this.size = 0;
    this.items = [];
  }

  push(value: T): void {
    this.items.push(value);
    this.size++;
  }

  pop(): void {
    if (this.isEmpty()) {
      throw new Error("Stack underflow: cannot pop from an empty stack");
    }
    this.items.pop();
    this.size--;
  }

  isEmpty(): boolean {
    return this.size === 0;
  }

  getSize(): number {
    return this.size;
  }

  peek(): T | undefined {
    if (this.isEmpty()) {
      return undefined;
    }
    return this.items[this.items.length - 1];
  }

  clear(): void {
    if (this.isEmpty()) {
      throw new Error("Stack empty: Can not clear empty stack");
    }
    this.items = [];
    this.size = 0;
  }

  contains(value: T): boolean {
    if (this.isEmpty()) {
      return false;
    }
    return this.items.includes(value);
  }

  toString(): string {
    return JSON.stringify(this.items);
  }

  clone(): T[] {
    return [...this.items]; // shallow cloning
  }
}

const stack = new Stack<number>(); // Generic type in this case it is number type

stack.push(1);
stack.push(2);
console.log("Stack Size:", stack.getSize());
console.log("Stack Peek:", stack.peek());
console.log("Stack Contains 2:", stack.contains(2));
console.log("Stack Contents:", stack.toString());

stack.pop();
console.log("Stack Size after Pop:", stack.getSize());
console.log("Is Stack Empty:", stack.isEmpty());

stack.clear();
console.log("Stack Size after Clear:", stack.getSize());

Queue

Definition:

A Queue is a data structure that follows the First In, First Out (FIFO) principle, where the first element added is the first one to be removed. It supports essential operations such as enqueue (adding) an element to the back, dequeue (removing) the front element, checking if it's empty, obtaining the size, and peeking (viewing) the front element without removal.

Algorithmic Steps:

/**
 * Queue Class Definition:
 * - Initialize an empty array to store items and a variable to track size.
 * - Enqueue: Add an element to the end of the array and increment size.
 * - Dequeue: Remove the first element if the queue is not empty and decrement size.
 * - isEmpty: Check if the size is zero to determine if the queue is empty.
 * - getSize: Return the current size of the queue.
 * - Peek: Return the first element if the queue is not empty.
 */

Complexity Analysis:

Insertion (Enqueue): O(1)
- Adding an element to the back of the queue takes constant time.
Removal (Dequeue): O(1)
- Removing the front element from the queue also takes constant time.
Searching (N/A): N/A
- Queues typically do not support searching for specific values.
Access (Peek, Get Size, Is Empty): O(1)
- Accessing the front element, getting the size, and checking for emptiness are constant-time operations.

Implementation:

class Queue<T> {
  private items: T[];
  private size: number;

  constructor() {
    this.items = [];
    this.size = 0;
  }

  enqueue(value: T): void {
    this.items.push(value);
    this.size++;
  }

  dequeue(): void {
    if (this.isEmpty()) {
      throw new Error("Dequeue operation on an empty queue");
    }
    this.items.shift();
    this.size--;
  }

  isEmpty(): boolean {
    return this.size === 0;
  }

  getSize(): number {
    return this.size;
  }

  peek(): T | undefined {
    return this.isEmpty() ? undefined : this.items[0];
  }
}

const queue = new Queue<number>(); // Generic type in this case it is number type

queue.enqueue(1);
queue.enqueue(2);
console.log("Front of the queue:", queue.peek());
console.log("Queue size:", queue.getSize());

queue.dequeue();
console.log("Front of the queue after dequeue:", queue.peek());
console.log("Is the queue empty?", queue.isEmpty());

Priority Queue

Definition:

A Priority Queue is a data structure that maintains a collection of elements, each associated with a priority. The element with the highest priority is served before others. It supports operations such as enqueueing (adding) an element with a priority, dequeueing (removing) the element with the highest priority, checking if it's empty, obtaining the size, and peeking (viewing) the element with the highest priority without removal.

Algorithmic Steps:

/**
 * Priority Queue Class Definition:
 * - Initialize an empty array to store items as priority-value pairs and a variable to track size.
 * - Enqueue: Add an element with a priority, maintaining order based on priorities.
 * - Dequeue: Remove the element with the highest priority if the queue is not empty and decrement size.
 * - isEmpty: Check if the size is zero to determine if the priority queue is empty.
 * - getSize: Return the current size of the priority queue.
 * - Peek: Return the element with the highest priority without removal if the priority queue is not empty.
 */

Complexity Analysis:

Insertion (Enqueue): O(n) in the worst case
- Enqueueing involves finding the correct position based on priorities, which may require traversing the entire queue.
Removal (Dequeue): O(1)
- Dequeueing the element with the highest priority is a constant-time operation.
Searching (Contains): O(n)
- Checking if a specific value is present involves a linear search through the priority queue.
Access (Peek, Get Size, Is Empty): O(1)
- Accessing the element with the highest priority, getting the size, and checking for emptiness are constant-time operations.

Implementation

type PriorityQueueItem<T> = [number, T];

class PriorityQueue<T> {
  private items: PriorityQueueItem<T>[];
  private size: number;

  constructor() {
    this.items = [];
    this.size = 0;
  }

  enqueue(item: PriorityQueueItem<T>) {
    if (this.isEmpty()) {
      this.items.push(item);
    } else {
      let added = false;
      for (let i = 0; i < this.items.length; i++) {
        if (item[0] < this.items[i][0]) {
          this.items.splice(i, 0, item);
          added = true;
          break;
        }
      }
      if (!added) {
        this.items.push(item);
      }
    }
    this.size++;
  }

  dequeue() {
    if (this.isEmpty()) {
      throw new Error("Dequeue operation on an empty queue");
    }
    this.items.shift();
    this.size--;
  }

  isEmpty() {
    return this.size === 0;
  }

  getSize() {
    return this.size;
  }

  peek(): T | undefined {
    return this.isEmpty() ? undefined : this.items[0][1];
  }
}

const priorityQueue = new PriorityQueue<string>(); // Generic type in this case it is string type

priorityQueue.enqueue([1, "Ramu"]);
priorityQueue.enqueue([2, "Kumar"]);
console.log("Front of the priorityQueue:", priorityQueue.peek());
console.log("Queue size:", priorityQueue.getSize());

priorityQueue.dequeue();
console.log("Front of the priorityQueue after dequeue:", priorityQueue.peek());
console.log("Is the priorityQueue empty?", priorityQueue.isEmpty());

Linked List

Definition:

A Linked List is a linear data structure consisting of nodes, where each node points to the next one in the sequence. It provides dynamic memory allocation and efficient insertion and deletion operations compared to arrays. The linked list can be singly or doubly linked, and in our case, it is a singly linked list.

Algorithmic Steps:

/**
 * LNode Class Definition:
 * - Represents a node with a value and a reference to the next node.
 *
 * LinkedList Class Definition:
 * - Initialize the head as null.
 * - Push: Add a new node with the given value to the end of the list.
 * - Pop: Remove and return the value of the last node in the list.
 * - ToArray: Convert the linked list to an array.
 * - Delete: Remove the first occurrence of a node with the given value.
 * - Print: Output the values of all nodes in the list.
 * - Find: Check if a node with the given value exists in the list.
 * - Reverse: Reverse the order of nodes in the list.
 * - Size: Return the number of nodes in the list.
 */

Complexity Analysis:

Insertion (Push): O(n)
- Adding a new node to the end of the linked list requires traversing the entire list, resulting in a linear time complexity.
Deletion (Pop, Delete): O(n)
- Removing the last node or a specific value involves traversing the list, leading to a linear time complexity.
Searching (Find): O(n)
- Checking for the existence of a specific value requires a linear search through the list.
Access (ToArray, Print): O(n)
- Converting the linked list to an array or printing its values involves traversing the entire list, resulting in linear time complexity.
Size: O(n)
- Calculating the size of the linked list requires traversing all nodes, resulting in linear time complexity.
Reversal (Reverse): O(n)
- Reversing the linked list involves traversing it once, resulting in linear time complexity.

Implementation:

class LNode<T> {
  value: T;
  next: LNode<T> | null;

  constructor(value: T) {
    this.value = value;
    this.next = null;
  }
}

class LinkedList<T> {
  head: LNode<T> | null;

  constructor() {
    this.head = null;
  }

  push(value: T): void {
    const newLNode = new LNode(value);
    if (!this.head) {
      this.head = newLNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newLNode;
    }
  }

  pop(): T | null {
    let current = this.head;
    let prev: LNode<T> | null = null;

    if (!current) {
      return null;
    }

    while (current.next) {
      prev = current;
      current = current.next;
    }

    if (!prev) {
      this.head = null;
    } else {
      prev.next = null;
    }

    return current.value;
  }

  toArray(): T[] {
    let current = this.head;
    const result: T[] = [];

    while (current) {
      result.push(current.value);
      current = current.next;
    }

    return result;
  }

  delete(value: T): T | null {
    let current = this.head;
    let prev: LNode<T> | null = null;

    while (current && current.value !== value) {
      prev = current;
      current = current.next;
    }

    if (current) {
      if (!prev) {
        this.head = current.next;
      } else {
        prev.next = current.next;
      }

      return current.value;
    }

    return null;
  }

  print(): void {
    let current = this.head;

    while (current) {
      console.log(current.value);
      current = current.next;
    }
  }

  find(value: T): boolean {
    let current = this.head;

    while (current) {
      if (current.value === value) {
        return true;
      }
      current = current.next;
    }

    return false;
  }

  reverse(): void {
    let current = this.head;
    let prev: LNode<T> | null = null;

    while (current) {
      const next = current.next;
      current.next = prev;
      prev = current;
      current = next;
    }

    this.head = prev;
  }

  size(): number {
    let count = 0;
    let current = this.head;

    while (current) {
      count++;
      current = current.next;
    }

    return count;
  }
}

const linkedList = new LinkedList<number>();

linkedList.push(1);
linkedList.push(2);
linkedList.push(3);

console.log("Original Linked List:");
linkedList.print();

const poppedValue = linkedList.pop();
console.log(`Popped Value: ${poppedValue}`);

console.log("\nLinked List After Pop:");
linkedList.print();

const arrayRepresentation = linkedList.toArray();
console.log("\nArray Representation of Linked List:", arrayRepresentation);

Binary Search Tree

Definition:

A Binary Search Tree (BST) is a hierarchical data structure that follows the binary tree property: for each node, all elements in its left subtree are less than the node, and all elements in its right subtree are greater. It allows for efficient search, insertion, and deletion operations.

Algorithmic Steps:

/**
 * TreeNode Class Definition:
 * - Define a class for tree nodes with left, right, and value properties.
 *
 * BinarySearchTree Class Definition:
 * - Initialize the tree with a null root.
 * - Insert: Add a new node with the given value while maintaining the BST property.
 * - Find: Search for a node with the given value and return the value if found, else -1.
 * - GetMin: Find and return the minimum value in the BST.
 * - GetMax: Find and return the maximum value in the BST.
 * - Remove: Remove a node with the given value while maintaining the BST property.
 * - BreadthFirstSearch: Traverse the tree in breadth-first order and return an array of values.
 * - DepthFirstSearchPreOrder: Traverse the tree in pre-order and return an array of values.
 * - DepthFirstSearchInOrder: Traverse the tree in in-order and return an array of values.
 * - DepthFirstSearchPostOrder: Traverse the tree in post-order and return an array of values.
 */

Complexity Analysis:

Insertion: O(log n) on average, O(n) in the worst case
- Adding a node involves traversing the height of the tree, which is logarithmic on average, but in the worst case (unbalanced tree), it becomes linear.
Search (Find): O(log n) on average, O(n) in the worst case
- Searching for a value involves traversing the height of the tree, which is logarithmic on average, but becomes linear in the worst case.
GetMin and GetMax: O(log n) on average, O(n) in the worst case
- Finding the minimum or maximum value involves traversing the left or right subtree, respectively, which is logarithmic on average, but becomes linear in the worst case.
Removal: O(log n) on average, O(n) in the worst case
- Removing a node involves traversing the height of the tree, which is logarithmic on average, but becomes linear in the worst case.
Traversal (BFS, DFS): O(n)
- Traversing the entire tree requires visiting each node once, resulting in linear time complexity.

Implementation:

class TreeNode<T> {
  left: TreeNode<T> | null;
  right: TreeNode<T> | null;
  value: T;

  constructor(value: T) {
    this.left = null;
    this.right = null;
    this.value = value;
  }
}

class BinarySearchTree<T> {
  root: TreeNode<T> | null;

  constructor() {
    this.root = null;
  }

  insert(value: T): BinarySearchTree<T> | undefined {
    const newNode = new TreeNode(value);
    if (!this.root) {
      this.root = newNode;
      return this;
    }
    let current: TreeNode<T> | null = this.root;

    while (true) {
      if (value === current.value) return undefined;
      if (value < current.value) {
        if (!current.left) {
          current.left = newNode;
          return this;
        }
        current = current.left;
      } else {
        if (!current.right) {
          current.right = newNode;
          return this;
        }
        current = current.right;
      }
    }
  }

  find(value: T): T | -1 {
    let current: TreeNode<T> | null = this.root;
    if (!current) return -1;

    while (current) {
      if (value === current.value) return current.value;
      if (value < current.value) {
        current = current.left;
      } else {
        current = current.right;
      }
    }
    return -1;
  }

  getMin(): T | undefined {
    let current: TreeNode<T> | null = this.root;

    while (current?.left) {
      current = current.left;
    }
    return current?.value;
  }

  getMax(): T | undefined {
    let current: TreeNode<T> | null = this.root;

    while (current?.right) {
      current = current.right;
    }
    return current?.value;
  }

  remove(value: T): void {
    let current: TreeNode<T> | null = this.root;
    this.root = this.removeNode(current, value) as TreeNode<T>;
  }

  removeNode(node: TreeNode<T> | null, value: T): TreeNode<T> | null {
    if (!node) return null;

    if (value < node.value) {
      node.left = this.removeNode(node.left, value);
    } else if (value > node.value) {
      node.right = this.removeNode(node.right, value);
    } else {
      if (!node.left) {
        return node.right;
      } else if (!node.right) {
        return node.left;
      }

      node.value = this.getMinValue(node.right) as T;

      node.right = this.removeNode(node.right, node.value);
    }
    return node;
  }

  private getMinValue(node: TreeNode<T>): T | undefined {
    let current: TreeNode<T> = node;
    while (current.left) {
      current = current.left;
    }
    return current.value;
  }

  breadthFirstSearch(): T[] {
    const queue: TreeNode<T>[] = [];
    const visited: T[] = [];
    let current: TreeNode<T> | null = this.root;

    if (!current) return visited;

    queue.push(current);

    while (queue.length) {
      current = queue.shift() as TreeNode<T>;
      visited.push(current.value);

      if (current.left) queue.push(current.left);
      if (current.right) queue.push(current.right);
    }
    return visited;
  }

  depthFirstSearchPreOrder(): T[] {
    const visited: T[] = [];
    this.traversePreOrder(this.root, visited);
    return visited;
  }

  private traversePreOrder(node: TreeNode<T> | null, visited: T[]): void {
    if (node) {
      visited.push(node.value);
      this.traversePreOrder(node.left, visited);
      this.traversePreOrder(node.right, visited);
    }
  }

  depthFirstSearchInOrder(): T[] {
    const visited: T[] = [];
    this.traverseInOrder(this.root, visited);
    return visited;
  }

  private traverseInOrder(node: TreeNode<T> | null, visited: T[]): void {
    if (node) {
      this.traverseInOrder(node.left, visited);
      visited.push(node.value);
      this.traverseInOrder(node.right, visited);
    }
  }

  depthFirstSearchPostOrder(): T[] {
    const visited: T[] = [];
    this.traversePostOrder(this.root, visited);
    return visited;
  }

  private traversePostOrder(node: TreeNode<T> | null, visited: T[]): void {
    if (node) {
      this.traversePostOrder(node.left, visited);
      this.traversePostOrder(node.right, visited);
      visited.push(node.value);
    }
  }
}

const tree = new BinarySearchTree<number>(); // Generic type in this case it is number type
tree.insert(5);
tree.insert(3);
tree.insert(1);
tree.insert(7);
tree.insert(2);

tree.breadthFirstSearch(); // [ 5, 3, 7, 1, 2 ]
tree.depthFirstSearchPreOrder(); // [ 5, 3, 1, 2, 7 ]
tree.depthFirstSearchInOrder(); // [ 1, 2, 3, 5, 7 ]
tree.depthFirstSearchPostOrder(); // [ 2, 1, 3, 7, 5 ]

tree.getMin(); // 1
tree.getMax(); // 7

// Tree representation
/*
            5
        3       7
    2
1
*/

Graph

Definition:

A Graph is a data structure that consists of a set of vertices and edges, where each edge connects two vertices. It models relationships and connections between entities. Graphs can be directed (edges have a specific direction) or undirected, and they may include weighted edges.

Algorithmic Steps:

/**
 * Graph Class Definition:
 * - Initialize an adjacency list using a Map to store vertices and their neighbors.
 * - Add Vertex: Add a new vertex to the graph.
 * - Add Edge: Connect two vertices by adding edges.
 * - Remove Vertex: Remove a vertex and its associated edges.
 * - Remove Edge: Remove an edge between two vertices.
 * - Get Vertices: Return an array of all vertices in the graph.
 * - Get Edges: Return an array of all edges in the graph.
 * - Has Vertex: Check if a vertex exists in the graph.
 * - Has Edge: Check if an edge exists between two vertices.
 * - Get Neighbors: Return an array of neighbors for a given vertex.
 * - Is Empty: Check if the graph is empty.
 * - Clear: Remove all vertices and edges from the graph.
 * - Size: Return the number of vertices in the graph.
 * - Depth-First Search: Traverse the graph using depth-first search.
 * - Breadth-First Search: Traverse the graph using breadth-first search.
 */

Complexity Analysis:

Add Vertex (AddVertex): O(1)
- Adding a vertex to the graph takes constant time.
Add Edge (AddEdge): O(1)
- Connecting two vertices with an edge takes constant time.
Remove Vertex (RemoveVertex): O(V + E)
- Removing a vertex involves removing its associated edges. The time complexity is proportional to the number of vertices (V) and edges (E) in the graph.
Remove Edge (RemoveEdge): O(1)
- Removing an edge between two vertices takes constant time.
Get Vertices (GetVertices): O(V)
- Obtaining an array of all vertices takes linear time.
Get Edges (GetEdges): O(V + E)
- Obtaining an array of all edges takes time proportional to the number of vertices (V) and edges (E) in the graph.
Has Vertex (HasVertex): O(1)
- Checking if a vertex exists in the graph takes constant time.
Has Edge (HasEdge): O(1)
- Checking if an edge exists between two vertices takes constant time.
Get Neighbors (GetNeighbors): O(1)
- Obtaining the neighbors of a vertex takes constant time.
Is Empty (IsEmpty): O(1)
- Checking if the graph is empty takes constant time.
Clear (Clear): O(1)
- Clearing the graph (removing all vertices and edges) takes constant time.
Size (Size): O(1)
- Obtaining the number of vertices in the graph takes constant time.
Depth-First Search (DepthFirstSearch): O(V + E)
- Traversing the graph using depth-first search takes time proportional to the number of vertices (V) and edges (E) in the graph.
Breadth-First Search (BreadthFirstSearch): O(V + E)
- Traversing the graph using breadth-first search takes time proportional to the number of vertices (V) and edges (E) in the graph.

Implementation:

class Graph<T> {
  private adjacencyList: Map<T, Set<T>>;

  constructor() {
    this.adjacencyList = new Map();
  }

  addVertex(vertex: T): this {
    if (!this.adjacencyList.has(vertex)) {
      this.adjacencyList.set(vertex, new Set());
    }
    return this;
  }

  addEdge(vertex1: T, vertex2: T): this {
    this.addVertex(vertex1).addVertex(vertex2);

    this.adjacencyList.get(vertex1)!.add(vertex2);
    this.adjacencyList.get(vertex2)!.add(vertex1);
    return this;
  }

  removeVertex(vertex: T): this {
    if (this.adjacencyList.has(vertex)) {
      for (const adjacentVertex of this.adjacencyList.get(vertex)!) {
        this.removeEdge(vertex, adjacentVertex);
      }
      this.adjacencyList.delete(vertex);
    }
    return this;
  }

  removeEdge(vertex1: T, vertex2: T): this {
    if (this.adjacencyList.has(vertex1) && this.adjacencyList.has(vertex2)) {
      this.adjacencyList.get(vertex1)!.delete(vertex2);
      this.adjacencyList.get(vertex2)!.delete(vertex1);
    }
    return this;
  }

  getVertices(): T[] {
    return [...this.adjacencyList.keys()];
  }

  getEdges(): [T, T][] {
    const edges: [T, T][] = [];
    for (const [vertex, neighbors] of this.adjacencyList) {
      for (const neighbor of neighbors) {
        edges.push([vertex, neighbor]);
      }
    }
    return edges;
  }

  hasVertex(vertex: T): boolean {
    return this.adjacencyList.has(vertex);
  }

  hasEdge(vertex1: T, vertex2: T): boolean {
    return (
      this.adjacencyList.has(vertex1) &&
      this.adjacencyList.get(vertex1)!.has(vertex2)
    );
  }

  getNeighbors(vertex: T): T[] {
    return [...this.adjacencyList.get(vertex)!];
  }

  isEmpty(): boolean {
    return this.adjacencyList.size === 0;
  }

  clear(): this {
    this.adjacencyList.clear();
    return this;
  }

  size(): number {
    return this.adjacencyList.size;
  }

  depthFirstSearch(startVertex: T, callback: (vertex: T) => void): this {
    const visited = new Set<T>();

    function traverse(vertex: T): void {
      visited.add(vertex);
      callback(vertex);

      for (const neighbor of this.adjacencyList.get(vertex)!) {
        if (!visited.has(neighbor)) {
          traverse.call(this, neighbor);
        }
      }
    }

    traverse.call(this, startVertex);
    return this;
  }

  breadthFirstSearch(startVertex: T, callback: (vertex: T) => void): this {
    const visited = new Set<T>();
    const queue: T[] = [startVertex];
    visited.add(startVertex);

    while (queue.length > 0) {
      const currentVertex = queue.shift()!;
      callback(currentVertex);

      for (const neighbor of this.adjacencyList.get(currentVertex)!) {
        if (!visited.has(neighbor)) {
          visited.add(neighbor);
          queue.push(neighbor);
        }
      }
    }

    return this;
  }
}

const graph = new Graph<string>(); // Generic type in this case it is number type

graph
  .addVertex("A")
  .addVertex("B")
  .addVertex("C")
  .addEdge("A", "B")
  .addEdge("B", "C")
  .depthFirstSearch("A", (vertex) => console.log(`Visited ${vertex} in DFS`))
  .breadthFirstSearch("A", (vertex) => console.log(`Visited ${vertex} in BFS`));

🚀 JavaScript Array, Object, and Map Methods Cheat sheet 🚀

bugudiramu — Sat, 09 Dec 2023 03:30:51 +0000

Introduction 🌐

🌟 Welcome to this article, your go-to cheat sheet for essential array and object methods frequently applied in your work or personal projects. This guide ensures you're well-prepared for upcoming articles on implementing JavaScript data structures. Don't hesitate to comment if you spot any crucial methods I might have overlooked. Let's dive right in without any delay!

JavaScript Array Methods:

const nums = [1, 5, 11, 2, 55, 6];

at(): Retrieves the element at the specified index in the array.

const element = nums.at(2); // Returns the element at index 2: 11

concat(): Combines two or more arrays.

const newArray = nums.concat([7, 8, 9]); // Returns a new array: [1, 5, 11, 2, 55, 6, 7, 8, 9]

copyWithin(): Copies a sequence of elements within the array.

nums.copyWithin(0, 3, 5); // Copies elements from index 3 to 4 to the beginning: [2, 55, 11, 2, 55, 6]

entries(): Returns an iterator object for key/value pairs of the array.

const iterator = nums.entries();
for (const [index, value] of iterator) {
  console.log(index, value);
}
// Outputs:
// 0 1
// 1 5
// 2 11
// 3 2
// 4 55
// 5 6

every(): Checks if all elements in the array pass a certain condition.

const allGreaterThanZero = nums.every((num) => num > 0); // Returns true

fill(): Fills all elements of the array with a static value.

const filledArray = nums.fill(0); // Fills the array with 0: [0, 0, 0, 0, 0, 0]

filter(): Creates a new array with elements that pass a certain condition.

const evenNumbers = nums.filter((num) => num % 2 === 0); // Returns a new array: [2, 6]

find(): Returns the first element in the array that satisfies a given condition.

const greaterThanTen = nums.find((num) => num > 10); // Returns 11

findIndex(): Returns the index of the first element in the array that satisfies a given condition.

const indexGreaterThanTen = nums.findIndex((num) => num > 10); // Returns the index of 11: 2

flat(): Flattens nested arrays.

const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flattenedArray = nestedArray.flat(); // Returns a new array: [1, 2, 3, 4, [5, 6]]

flatMap(): Maps each element using a function and flattens the result.

const doubledAndFlattened = nums.flatMap((num) => [num * 2]); // Returns a new array: [2, 10, 22, 4, 110, 12]

forEach(): Executes a provided function once for each array element.

nums.forEach((num) => console.log(num)); // Outputs each element in the array

from(): Creates a new array from an array-like or iterable object.

const newArrayFromSet = Array.from(new Set([1, 2, 2, 3])); // Returns a new array: [1, 2, 3]

includes(): Checks if an array includes a certain element.

const includesFive = nums.includes(5); // Returns true

indexOf(): Returns the first index at which a given element is found.

const indexofFive = nums.indexOf(5); // Returns the index of 5: 1

isArray(): Checks if a value is an array.

const isAnArray = Array.isArray(nums); // Returns true

join(): Joins all elements of an array into a string.

const joinedString = nums.join("-"); // Returns a string: "1-5-11-2-55-6"

keys(): Returns an iterator of keys in the array.

const keyIterator = nums.keys();
for (const key of keyIterator) {
  console.log(key);
}
// Outputs:
// 0
// 1
// 2
// 3
// 4
// 5

lastIndexOf(): Returns the last index at which a given element is found.

const lastIndexOfFive = nums.lastIndexOf(5); // Returns the last index of 5: 3

map(): Creates a new array with the results of calling a provided function on every element.

const squaredArray = nums.map((num) => num * num); // Returns a new array: [1, 25, 121, 4, 3025, 36]

pop(): Removes the last element from an array and returns that element.

const lastElement = nums.pop(); // Returns 6, and nums is now [1, 5, 11, 2, 55]

push(): Adds one or more elements to the end of an array and returns the new length.

const newLength = nums.push(7, 8); // Returns the new length: 7, and nums is now [1, 5, 11, 2, 55, 7, 8]

reduce(): Reduces the array to a single value using a provided function.

const sum = nums.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  0
); // Returns the sum: 86

reduceRight(): Reduces the array from the right to a single value using a provided function.

const concatenatedString = nums.reduceRight(
  (acc, num) => acc + num.toString(),
  ""
); // Returns the string: "6552115"

reverse(): Reverses the elements of an array in place.

const reversedArray = nums.reverse(); // Reverses nums in place: [6, 55, 2, 11, 5, 1]

shift(): Removes the first element from an array and returns that element.

const firstElement = nums.shift(); // Returns 6, and nums is now [55, 2, 11, 5, 1]

slice(): Returns a shallow copy of a portion of an array.

const slicedArray = nums.slice(1, 4); // Returns a new array: [55, 2, 11]

some(): Checks if at least one element in the array passes a certain condition.

const hasEvenNumber = nums.some((num) => num % 2 === 0); // Returns true

sort(): Sorts the elements of an array in place and returns the sorted array.

const sortedArray = nums.sort((a, b) => a - b); // Sorts nums in place: [1, 2, 5, 11, 55, 6]

splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements.

const splicedArray = nums.splice(2, 2, 99, 100); // Removes 2 elements starting from index 2 and adds 99 and 100: [5, 11]

toString(): Returns a string representing the array and its elements.

const arrayString = nums.toString(); // Returns a string: "1,2,5,11,55,6"

unshift(): Adds one or more elements to the beginning of an array and returns the new length.

const newLength = nums.unshift(-1, 0); // Returns the new length: 8, and nums is now [-1, 0, 1, 2, 5, 11, 55, 6]

valueOf(): Returns the primitive value of the array, which is the array itself.

const primitiveValue = nums.valueOf(); // Returns nums itself

JavaScript Object Methods:

const person = {
  name: "ramu",
  age: 24,
  email: "ramubugudi4@gmail.com",
};

Object.keys(object): Returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.

const keys = Object.keys(person); // returns [ 'name', 'age', 'email' ]

Object.values(object): Returns an array of a given object's own enumerable property values, iterated in the same order as that of the for...in loop.

const values = Object.values(person); // returns [ 'ramu', 24, 'ramubugudi4@gmail.com' ]

Object.entries(object): Returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that of a for...in loop.

const entries = Object.entries(person);
// returns [ ['name', 'ramu'], ['age', 24], ['email', 'ramubugudi4@gmail.com'] ]

Object.freeze(object): Freezes an object, preventing new properties from being added to it, existing properties from being removed, and data properties from being changed.

const frozenPerson = Object.freeze(person);
// Now, attempting to modify or add properties to frozenPerson will result in an error.

Object.assign(target, ...sources): Copies the values of all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

const additionalInfo = { country: "India", occupation: "Developer" };
const extendedPerson = Object.assign({}, person, additionalInfo);
// returns { name: 'ramu', age: 24, email: 'ramubugudi4@gmail.com', country: 'India', occupation: 'Developer' }

JavaScript Map Methods:

new Map(): Creates a new Map object.

const myMap = new Map();

setMap(key, value): Sets the value for the specified key in the Map object.

myMap.set("name", "ramu");

getMap(key): Returns the value associated with the specified key in the Map object.

const value = myMap.get("name");

clearMap(): Removes all key/value pairs from the Map object.

myMap.clear();

deleteMap(key): Removes the key and its associated value from the Map object.

myMap.delete("name");

hasMap(key): Returns a boolean indicating whether the specified key is present in the Map object or not.

const hasKey = myMap.has("name");

forEachMap(callbackFn): Executes a provided function once for each key/value pair in the Map object, in insertion order.

myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

entriesMap(): Returns a new Iterator object that contains an array of [key, value] for each key/value pair in the Map object.

const entries = myMap.entries();

keysMap(): Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.

const mapKeys = myMap.keys();

valuesMap(): Returns a new Iterator object that contains the values for each element in the Map object in insertion order.

const mapValues = myMap.values();

size: Returns the number of key/value pairs in the Map object.

const mapSize = myMap.size;

Some of the new JavaScript methods

groupBy

Definition:

The groupBy method categorizes elements in an iterable based on the values returned by a provided callback function.

Similarities to SQL's groupBy:

Similar to SQL's groupBy, it groups elements based on a specific condition, but it operates on JavaScript iterables (arrays, maps, strings) instead of SQL tables.

Output:

Returns an object where each key represents a group and the corresponding value is an array containing all elements belonging to that group.

const person = [
  { name: "ramu", age: 24 },
  { name: "kumar", age: 27 },
  { name: "indhu", age: 30 },
  { name: "sagar", age: 10 },
  { name: "aadya", age: 7 },
];

const isMajor = ({ age }) => {
  if (age < 21) return false;
  return true;
};

const groupByResult = Object.groupBy(person, isMajor);
// {"true":[{"name":"ramu","age":24},{"name":"kumar","age":27},{"name":"indhu","age":30}],"false":[{"name":"sagar","age":10},{"name":"aadya","age":7}]}

toSpliced, toReversed, and toSorted

Definition:

These methods return a modified copy of the original input without modifying the original itself. They perform the specified operation (splice, reverse, or sort) on a copy and return the transformed result.

Mutation:

They are non-mutating methods, meaning they do not change the original input. This ensures that the original data remains intact while providing the desired transformation.

const person = [
  { name: "ramu", age: 24 },
  { name: "kumar", age: 27 },
  { name: "indhu", age: 30 },
  { name: "sagar", age: 10 },
  { name: "aadya", age: 7 },
];

const toSplicedResult = person.toSpliced(0, 1);
const toReversedResult = person.toReversed();
const toSortedResult = person.toSorted((a, b) => a.age - b.age);

// {"person":[{"name":"ramu","age":24},{"name":"kumar","age":27},{"name":"indhu","age":30},{"name":"sagar","age":10},{"name":"aadya","age":7}],"toSplicedResult":[{"name":"kumar","age":27},{"name":"indhu","age":30},{"name":"sagar","age":10},{"name":"aadya","age":7}],"toReversedResult":[{"name":"aadya","age":7},{"name":"sagar","age":10},{"name":"indhu","age":30},{"name":"kumar","age":27},{"name":"ramu","age":24}],"toSortedResult":[{"name":"aadya","age":7},{"name":"sagar","age":10},{"name":"ramu","age":24},{"name":"kumar","age":27},{"name":"indhu","age":30}]}

Thank you for reading this far; your support means a lot! If you have any questions, please don't hesitate to ask in the comments. Don't forget to like and share and subscribe the article – your appreciation is highly valued. Your feedback and suggestions are also more than welcome. 🙏👍😊

Most asked TypeScript interview questions 🚀

bugudiramu — Tue, 05 Dec 2023 11:50:46 +0000

Introduction 🌐

Welcome to the Most asked TypeScript Interview Questions guide, your ultimate prep tool for mastering TypeScript interviews! 🚀 From the fundamentals to advanced concepts, we've got you covered. Let's get started!

Beginner Level 🧑‍💻

What is TypeScript and why should we use it?

Enhanced Language: TypeScript extends JavaScript with features like type checking, access modifiers, and interfaces.
Error Prevention: TypeScript helps avoid common JavaScript errors, ensuring more reliable production-ready code.

Learn more about common errors in JavaScript here.

Developer Experience: Offers improved developer experiences with enhanced IntelliSense and code suggestions directly within the editor.

What are the basic types in TypeScript?

In TypeScript, we have basic types that align with the fundamental data types in JavaScript. These include number, string, boolean, null, undefined, and symbol. For example:



let name: string = "Ramu";
let age: number = 24;
let isValid: boolean = false;
let user: null = null;
let value: undefined = undefined;
let uniqueKey: symbol = Symbol("key");

What are access modifiers in TypeScript?

In TypeScript, access modifiers manage how parts of your code are shared. There are three key access modifiers: private, public, and protected.

Private: Variables or methods marked as private are exclusive to their class. They cannot be accessed from outside that class.



  class Example {
    private secret: string = "hidden information";
  }

Public: Using public makes variables or methods accessible from anywhere in the program.



  class Example {
    public info: string = "public information";
  }

Protected: When declared protected, variables or methods are accessible within the class and its subclasses.



class BaseClass {
  protected internalData: string = "accessible within subclasses";
}

class SubClass extends BaseClass {
  constructor() {
    super();
    console.log(this.internalData);
  }
}

Explain how TypeScript infers types?

TypeScript uses type inference to automatically determine the types of variables based on their assigned values while declaration. For example:



let age = 25; // TypeScript infers `age` as type `number`.
let name = "Ramu"; // TypeScript infers `name` as type `string`.
let isValid = true; // TypeScript infers `isValid` as type `boolean`.

What is an interface in TypeScript, and how is it different from a class?

In TypeScript, an interface serves as a blueprint for defining how an object should look. It outlines the properties an object should have and their respective types but doesn't include any actual code.

Unlike a class, an interface is solely used to describe the structure of an object. For example:



interface Person {
  name: string;
  age: number;
}

const ramu: Person = {
  name: "Ramu",
  age: 24,
};

In this example, the Person interface helps us define what properties a ramu object should have – in this case, a name of type string and an age of type number.

What is the difference between `never`, `unknown`, and `any` in TypeScript?

Type	Description
`never`	TypeScript completely skips type checking for variables assigned with `never`. It signifies absolute absence of value.
`unknown`	Assigning a variable with `unknown` tells TypeScript it's uncertain about the variable's type. Unlike `any`, it enforces type checks for safety.
`any`	TypeScript skip all type checks for variables assigned with `any`, providing maximum flexibility but sacrificing static typing benefits. It's a free pass for types.

For example:



// This function is intentionally created to generate an error and never return a value.
function throwError(message: string): never {
  throw new Error(message);
}



let person: unknown;

// Since TypeScript identifies 'person' as an unknown type, we need to perform multiple type-checks.
if (
  !!person &&
  typeof person === "object" &&
  "name" in person &&
  "age" in person
) {
  // After confirming its type, we can safely assign values to its properties.
  person.name = "Ramu";
  person.age = 24;
}



// A variable declared with 'any' type allows assigning values of any data type to it.
let value: any;

// Examples of assigning various types of values to the 'value' variable.
value = 23;
value = "Hi folks...";
value = true;

What is the difference between `type` and `interface` in TypeScript?

Defining Properties

type: Define types for values or combinations, including primitives.



  type Age = number;
  type Name = string;

  type PersonType = {
    name: Name;
    age: Age;
  };

interface: Ideal for shaping object structures.



  interface PersonInterface {
    name: string;
    age: number;
  }

Extending

type: Extend using & for easy combination.



  type PersonType = { name: string; age: number };
  type PlayerType = PersonType & { isCricketer: boolean };

interface: Extend using extends for inheritance.



  interface PersonInterface {
    name: string;
    age: number;
  }
  interface PlayerInterface extends PersonInterface {
    isCricketer: string;
  }

Declaration Merging

type: Does not support merging; duplicate definitions raise an error.



  type Person = { name: string };
  // Error: Duplicate identifier 'Person'.
  type Person = { age: number };

interface: Supports merging, enabling extension or addition.



  interface Person {
    name: string;
  }
  // Extends the existing Person interface.
  interface Person {
    age: number;
  }

Immutability

type: Allows flexibility, making properties readonly or optional.



  type ReadonlyPerson = { readonly name: string; readonly age: number };
  type OptionalPerson = { name?: string; age?: number };

interface: Direct support for readonly or optional properties is limited.



  // Error: 'readonly' modifier cannot be used with an index signature.
  interface ReadonlyPerson {
    readonly [key: string]: string | number;
  }
  // Error: An index signature parameter type cannot be optional.
interface OptionalPerson { [key: string]?: string | number; }

Choosing Between type and interface

type: Use for unions, intersections, or with primitive types.
interface: Ideal for defining object shapes, extending, or leveraging declaration merging.

Intermediate Level 🚧

What are generics in TypeScript, and when would you use them?

Generics in TypeScript enable you to create versatile and reusable code. They let you write functions and classes that can work with different types. For example:



function print<T>(arg: T): T {
  return arg;
}

const resultNum = print<number>(42);
const resultStr = print<string>("Hi folks...");

In this example, the print function uses a generic type T, allowing it to work with both numbers and strings. The function returns the input value as is, demonstrating flexibility with various data types.

What are Union and Intersection Types in TypeScript?

In TypeScript, union types, marked by |, allow a variable to have values from different types. It means the variable can store values that match any of the specified types.

For example:



type Cat = { name: string; meow: () => void };
type Dog = { name: string; bark: () => void };

const pet: Cat | Dog = /* Either a Cat or a Dog */;

On the other side, intersection types, shown by &, bring together multiple types to form a new type with all the properties of each individual type.

For example:



type Name = string;
type Age = number;

type Person = Name & Age; // `Person` must have properties from both `Name` and `Age`.

const person: Person = { name: "Ramu", age: 24 };

When would you use type assertion in TypeScript?

Type assertion is used when you know more about a value's type than TypeScript does. For example:



let arr: any = [1, 2, 3];
let len: number = (arr as number[]).length;

Advanced Level 🔥

What are mapped types, and how do they work in TypeScript?

Mapped types in TypeScript allow you to create new types by changing the properties of existing ones. For instance:



type Person = {
  name: string;
  age: number;
};

// Create a type where all parameters are optional
type OptionalType<T> = { [K in keyof T]?: T[K] };
const optionalPerson: OptionalType<Person> = {
  name: "Ramu",
};

// Create a type where all parameters are required
type RequiredType<T> = { [K in keyof T]: T[K] };
const requiredPerson: RequiredType<Person> = {
  name: "Ramu",
  age: 24,
};

However, TypeScript provides built-in Partial and Required types, which you can use directly instead of defining custom OptionalType and RequiredType types. For example:



type Person = {
  name: string;
  age: number;
};

// Use Partial<T> for optional properties
const optionalPerson: Partial<Person> = {
  name: "Ramu",
};

// Use Required<T> directly for required properties
const requiredPerson: Required<Person> = {
  name: "Ramu",
  age: 24,
};

What are Conditional Types in TypeScript?

Conditional types in TypeScript help us describe different type mappings based on certain conditions. Let's break it down with an example:



type IfString<T> = T extends string ? "It's a string" : "It's not a string";
let result: IfString<number>; // "It's not a string"

In this example, IfString is a conditional type that checks if the provided type (T) is a string. If it is, it returns "It's a string"; otherwise, it returns "It's not a string." The result variable, declared as IfString<number>, illustrates that the type is not a string, confirming our condition.

What are TypeScript decorators, and how do they work?

Decorators are a way to modify or annotate classes and properties in TypeScript. For example:



function log(target: any, key: string) {
  console.log(`Property ${key} has been accessed`);
}

class MyClass {
  @log
  myProperty: string = "example";
}

Explain the concept of advanced type guards.

Advanced type guards involve using user-defined functions to narrow down the type of a variable within a certain code block. For example:



interface Cat {
  name: string;
  meow(): void;
}

interface Dog {
  name: string;
  bark(): void;
}

function isCat(animal: Cat | Dog): animal is Cat {
  return "meow" in animal;
}

const pet: Cat | Dog = /* initialize */;
if (isCat(pet)) {
  pet.meow(); // TypeScript knows `pet` is a Cat here.
} else {
  pet.bark(); // TypeScript knows `pet` is a Dog here.

What is the `declare` keyword in TypeScript?

The declare keyword in TypeScript is used to inform the compiler that a variable, method, or library is defined externally and its type information is not available within the current TypeScript code.

This is often used when working with plain JavaScript libraries that lack TypeScript typings.

Example:



// externalModule.js
// This is a plain JavaScript module without TypeScript typings
const externalModule = {
  print: function (name) {
    console.log(`Hello, ${name}!`);
  },
};

// yourModule.ts
// TypeScript file where you want to use externalModule

declare var externalModule: any;

externalModule.print("Ramu"); // No type checking for externalModule

Most asked JavaScript Interview Questions🚀

bugudiramu — Tue, 05 Dec 2023 11:50:30 +0000

Introduction 🌐

Welcome to the Most asked JavaScript Interview Questions guide, your ultimate prep tool for mastering JavaScript interviews! 🚀 From the fundamentals to advanced concepts, we've got you covered. Let's get started!

I've dedicated significant effort to curating this extensive content list. Show your support by following, liking, and subscribing to stay updated on new articles. Feel free to share your questions or suggestions in the comments—I'll make sure to respond to most messages. Your engagement is highly appreciated!

Explain Event Delegation

Event Delegation, It is rooted in the concept of Event Bubbling, streamlines event handling by allowing you to manage events at a higher level in the DOM tree rather than directly where the event originated.

What does this mean?

In simple terms, when you interact with an element (e.g., clicking a button), the event ripples up the DOM tree from the target element to its parent elements. This pattern simplifies event management and is demonstrated in the following HTML and JavaScript example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event Delegation Example</title>
  </head>
  <body>
    <div>
      <h1>
        <button>Click Here</button>
      </h1>
    </div>

    <script>
      // Wait for the DOM to be fully loaded
      document.addEventListener("DOMContentLoaded", function () {
        // Add a click event listener to the entire document
        document.addEventListener("click", function (event) {
          // Identify the clicked element
          const targetElement = event.target;
          console.log("Clicked on:", targetElement.tagName);

          // Check if the clicked element is a button
          if (targetElement.tagName === "BUTTON") {
            alert("Button Clicked!");
          }
        });
      });
    </script>
  </body>
</html>

Explain how this works in JavaScript. Can you give an example of one of the ways that working with this has changed in ES6?

this refers to the current execution context.
In ES6, arrow functions don't have their own this, so they inherit it from the surrounding scope, providing a more predictable behavior.

/****** ES5 example with a regular function ******/
function printValueFunc() {
  this.value = 42;

  // Within this function, 'this' refers to the function's context
  setTimeout(function () {
    console.log(this.value); // undefined
  }, 1000);
}

printValueFunc();

/****** ES6 example with an arrow function *******/
function printValueArrowFunc() {
  this.value = 42;

  // Arrow functions inherit 'this' from the surrounding scope
  setTimeout(() => {
    console.log(this.value); // 42
  }, 1000);
}

printValueArrowFunc();

Explain how prototypal inheritance works?

In JavaScript, objects can inherit stuff (like properties and methods) from other objects through a thing called the "prototype chain." Here's the deal: when an object can't find something it needs (like a property or method), JavaScript checks the chain of objects until it finds what it's looking for or hits the end. Simple, right?

Example:

// Parent object
const person = {
  name: undefined,
  printName() {
    console.log(this.name);
  },
};

// Child object inheriting from the parent
const user = Object.create(person);
user.name = "Ramu";

user.printName(); // Outputs: Ramu

What is the difference between a variable that is: null, undefined, or undeclared? How would you go about checking for any of these states?

Null: Assigned intentionally to signify no value or object.
Undefined: Default value for uninitialized variables.
Undeclared: Variables not formally declared in the code.
For null or undefined, use explicit checks.
For undeclared, employ a try-catch block or the typeof operator.

let varNull = null;
let varUndefined;
// let varUndeclared; // Uncommenting this line would make it undeclared

// Check for null
if (varNull === null) {
  console.log("Variable is null");
}

// Check for undefined
if (varUndefined === undefined) {
  console.log("Variable is undefined");
}

// Check for undeclared (using try-catch)
try {
  if (typeof varUndeclared === "undefined") {
    console.log("Variable is undeclared");
  }
} catch (error) {
  console.log("Variable is undeclared");
}

What is a closure, and how/why would you use one?

A closure is a combination of a function and the environment in which it was created. It allows a function to access variables from its outer scope even after the outer function has finished executing.

How/why would you use a closure?

Closures are useful for creating private variables, maintaining state, and implementing data encapsulation in JavaScript. They enable functions to "remember" and access variables from their lexical scope, providing a way to achieve encapsulation and data hiding.

Example:

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return { increment, decrement };
}

const counter = createCounter();
counter.increment(); // Output: 1
counter.increment(); // Output: 2
counter.decrement(); // Output: 1

In this example, the createCounter function returns an object with increment and decrement functions. The count variable is accessible only through these functions, demonstrating the concept of closures for maintaining private state.

What language constructions do you use for iterating over object properties and array items?

To iterate over arrays, you can use loops like for or methods like forEach and map. For objects, you can use a for...in loop or the Object.keys() method.

Example:

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number);
});

const person = { name: "Ramu", age: 24, job: "Full Stack Developer" };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?

The forEach method is employed to go through each element in an array, but it doesn't create a new array. Instead, it's used for performing actions on each element, and it can mutate the original array.
On the other hand, the map method is utilized to alter array elements and generate a new array. Specifically, map produces a new array by applying a given function to every element and ensures that the original array remains unchanged.

Example:

const numbers = [1, 2, 3, 4];
numbers.forEach((num, idx, array) => {
  console.log(num);
  array[idx] = num * 2; // Mutating the original array
});

console.log(numbers); // Original array is mutated

const doubledNumbers = numbers.map((num) => num * 2); // Returns new array
console.log(doubledNumbers);

What is a typical use case for anonymous functions?

People often use anonymous functions for short or one-time tasks, such as passing a function as an argument or defining functions within a code block.

Example:

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(function (x) {
  return x * x;
});

What is the difference between host objects and native objects?

Native objects are part of the JavaScript language (e.g., Array, Object), while host objects are provided by the environment (e.g., window, document object in browsers).

Explain the difference between `function foo() {}` and `var foo = function() {}`:

Function Declaration (function foo() {}):
- Declares a function named foo.
- Can be used before the declaration due to hoisting.
Function Expression (var foo = function() {}):
- Assigns an anonymous function to the variable foo.
- Must be declared before use, or it will result in an error.

Example:

// Function Expression
console.log(foo()); // Error: Cannot access 'foo' before initialization

const foo = function () {
  return "Hello from foo...";
};

console.log(foo());

// Function Declaration
function foo() {
  return "Hello from foo...";
}

Can you explain what Function.call and Function.apply do? What is the notable difference between the two?

Both methods are used to invoke a function with a specific this value. The difference is in how arguments are passed - call takes arguments individually, while apply takes an array of arguments.

Example:

function concatenate(s1, s2) {
  return s1 + s2;
}

console.log(concatenate.call(null, "Hello", " World"));
console.log(concatenate.apply(null, ["Hello", " World"]));

Explain Function.prototype.bind.

bind creates a new function with a specified this value and initial arguments. It doesn't invoke the function immediately but returns a new function that can be executed later.

Example:

const person = {
  name: "Ramu",
  greet: function () {
    console.log(`Hello, ${this.name}!`);
  },
};

const boundGreet = person.greet.bind(person);

boundGreet(); // Outputs: Hello, Ramu!

Explain Feature Detection, Feature Inference, and UA String Usage

Feature Detection: Checks if a browser supports a specific feature.
Feature Inference: Assumes support for a feature based on the presence of other supported features.
UA String Usage: Utilizes the User Agent (UA) string, but it's unreliable as it can be manipulated.

Explain "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.

Example:

console.log(foo());

function foo() {
  return "Hello from foo...";
}

What is type coercion? What are common pitfalls of relying on type coercion in JavaScript code?

Type coercion is the automatic conversion of values from one type to another. Pitfalls include unexpected coercion results, potential loss of precision, and difficulty in debugging.

Example:

const num = 5;
const str = "10";

const output = num + str;

console.log(output); // Outputs "510" due to type coercion, concatenating the number and string.

What is event bubbling?

Event bubbling is the order in which events propagate through the DOM hierarchy from the target element to the root.
For a more in-depth understanding, explore examples at Event Capturing vs Event Bubbling.

What is event capturing?

Event capturing is the opposite of bubbling, where events are captured from the root to the target element.
For a more in-depth understanding, explore examples at Event Capturing vs Event Bubbling.

What is the difference between an "attribute" and a "property"?

An attribute is a value in HTML markup, while a property is a value in the DOM. Changing a property can affect the corresponding attribute and vice versa.

Example:

<!-- HTML Markup -->
<input type="text" value="example" id="myInput" />

<!-- JavaScript manipulating the corresponding property in the DOM -->
<script>
  document.getElementById("myInput").value = "updatedValue";
</script>

In the above example, the value attribute in HTML corresponds to the value property in the DOM, showcasing their connection

What are the pros and cons of extending built-in JavaScript objects?

Pros: Can add functionality globally.
Cons: May lead to naming conflicts, break existing code, or cause unexpected behavior.

Example:

// Extending Array prototype to sum all elements
Array.prototype.sum = function () {
  return this.reduce((acc, val) => acc + val, 0);
};

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.sum()); // Output: 15

What's the distinction between == and === in JavaScript?

In JavaScript, == performs type coercion, meaning it converts the operands to the same type before making the comparison. On the other hand, === strictly checks both value and type equality without any conversion.

Example:

const a = 2;
const b = "2";
console.log(a == b); // true (type coercion)
console.log(a === b); // false (strict equality)

In the example, == evaluates to true because it coerces the string "2" to a number before comparison, while === evaluates to false as it checks both value and type, and the types are different.

Explain the same-origin policy with regards to JavaScript.

Same-origin policy restricts web pages from making requests to a different domain than the one that served the web page.

Why is it called a Ternary operator, and what does the word "Ternary" indicate?

It's called the ternary operator because it takes three operands. It's the only JavaScript operator that takes three operands.

Example

function isEven(number) {
  return number % 2 === 0;
}
const result = isEven(2) ? "EVEN" : "ODD";
console.log(result); // EVEN

What is strict mode? What are some of the advantages/disadvantages of using it?

Strict mode is a way to catch common coding errors and prevent the use of certain error-prone features. It makes debugging easier but might break existing code that relies on non-strict behavior.

What tools and techniques do you use for debugging JavaScript code?

I use various tools and techniques for debugging JavaScript code, such as browser developer tools, console.log, the debugger statement, and third-party tools like the VS Code debugger.

Example:

function calculateSum(a, b) {
  console.log("Calculating sum...");
  debugger;
  const sum = a + b;
  console.log(`The sum of ${a} and ${b} is ${sum}`);
  return sum;
}

calculateSum(3, 5);

In this example, I've used console.log to log messages during the calculation and the debugger statement to pause execution and inspect variables using browser developer tools.

Explain the difference between mutable and immutable objects.

Mutable objects are changeable, allowing modifications after creation. In contrast, immutable objects, once created, cannot be altered.

Example:

// Mutable - can be changed
let str = "hello world";
str = "hello world again";
console.log(str); // hello world again

// Immutable - cannot be directly altered
str[0] = "H";
console.log(str); // hello world again

Primitive Values vs. Non-Primitive Values

Primitive values are immutable:
- Example: let str1 = "hello world";
- Attempting direct alteration, like str1[0] = "H";, won't work.
Primitive values are compared by value:
- Example: let str1 = "hello world";
- Comparing two identical primitive values with === yields true.
Non-primitive values are mutable:
- Example: const arr1 = [1, 2, 3, 4, 5];
- Arrays and objects can be modified after creation.

Non-primitive values are compared by reference, not value:

Example:

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 2, 3, 4, 5];
console.log(arr1 === arr2); // false

const obj1 = { key: "name", value: "ramu" };
const obj2 = { key: "name", value: "ramu" };
console.log(obj1 === obj2); // false

const arr3 = arr1;
const obj3 = obj1;
console.log(arr3 === arr1); // true
console.log(obj3 === obj1); // true

What is an example of an immutable object in JavaScript?

All primitive types are immutable. Once created, their values cannot be changed.

Example:

// Mutable - can be changed
let str = "hello world";
str = "hello world again";
console.log(str); // hello world again

// Immutable - cannot be directly altered
str[0] = "H";
console.log(str); // hello world again

What are the pros and cons of immutability?

Pros: Include simpler code, easier debugging, and improved concurrency.
Cons: include potentially higher memory usage and the need to create new objects for every change.

How can you achieve immutability in your own code?

Use methods like Object.assign, spread syntax, or libraries like Immutable.js to create new objects instead of modifying existing ones.

const mutableObject = { count: 5, value: "example" };

const immutableObject = { ...mutableObject, count: 6 };

console.log({ mutableObject, immutableObject });

Explain the difference between synchronous and asynchronous functions.

Synchronous functions run one after another, pausing the program until each completes. Asynchronous functions enable the program to keep going while waiting for an operation to finish.

Example:

function synchronousTask() {
  console.log("Task 1");
  console.log("Task 2");
}

synchronousTask();
console.log("Task 3");

function asynchronousTask() {
  console.log("Task 1");
  setTimeout(() => {
    console.log("Task 2");
  }, 1000);
}

asynchronousTask();
console.log("Next Task");

In the synchronous example, each task runs sequentially, pausing the program. In the asynchronous example, the program continues executing while waiting for the setTimeout operation to finish.

What is the event loop? What is the difference between call stack and task queue?

The event loop is how JavaScript handles asynchronous code, ensuring it runs smoothly without blocking. The call stack processes synchronous code, while the task queue holds asynchronous events to be executed.
For visual demo visit Event Loop

What are the differences between variables created using let, var, or const?

Understanding the Var, Let, and Const Keywords in JavaScript

In JavaScript, the keywords var, let, and const are used to declare variables, but they behave differently in terms of scope and reassignment.

var: Variables declared with var have function scope. This means they are only accessible within the function where they are defined.
let: Variables declared with let have block scope. They are accessible within the block (enclosed by curly braces) where they are defined.
const: Similar to let, variables declared with const also have block scope. However, once a value is assigned to a const variable, it cannot be reassigned.

Example:

function exampleVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // Outputs 10
}

function exampleLet() {
  if (true) {
    let y = 20;
  }
  console.log(y); // Error: y is not defined
}

function exampleConst() {
  const z = 30;
  z = 40; // Error: Assignment to constant variable
}

In the examples, var and let exhibit different scoping behavior, and const prevents reassignment after the initial value is set.

What are the differences between ES6 class and ES5 function constructors?

ES6 classes provide a cleaner syntax for creating constructor functions and prototypes, making it more similar to classical inheritance.

Example

// ES5 Function Constructor
function PersonES5(name, age) {
  this.name = name;
  this.age = age;
}

PersonES5.prototype.greet = function () {
  console.log("Hello, I'm " + this.name);
};

// ES6 Class
class PersonES6 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?

Arrow functions are handy for short, concise tasks and have lexical scoping. They lack their own this and bind it lexically, which can be advantageous in specific scenarios.

Example:

// Traditional/Normal Function
function add(a, b) {
  return a + b;
}

// Arrow Function
const addArrow = (a, b) => a + b;

What advantage is there for using the arrow syntax for a method in a constructor?

Arrow syntax prevents the creation of a new this binding, ensuring the method shares the this value of the enclosing scope.

What is the definition of a higher-order function?

A higher-order function is a function that takes one or more functions as arguments or returns a function as its result.

Example

const cube = (x) => Math.pow(x, 3);

function higherOrderFunc(n, func) {
  return func(n);
}

console.log(higherOrderFunc(3, cube));

Can you give an example for destructuring an object or an array?

Destructuring allows you to extract values from objects or arrays and assign them to variables in a concise way. Example:

const person = { name: "Ramu", age: 30 };
const { name, age } = person; // { name: "Ramu", age: 30 }

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers; // { first: 1, second: 2, rest: [ 3, 4, 5 ] }

Can you give an example of generating a string with ES6 Template Literals?

Template literals provide a convenient way to create strings with embedded expressions. Example:

  const name = "Ramu";
  const greeting = `Hello, ${name}!`;

Can you give an example of a curry function and why this syntax offers an advantage?

A curry function transforms a multi-argument function into a sequence of single-argument functions. This can enhance code flexibility and readability.

Example

const curry = (fn) => (a) => (b) => fn(a, b);
const add = (a, b) => a + b;
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)); // 3

What are the benefits of using spread syntax and how is it different from rest syntax?

Spread syntax is used to expand elements of an array or properties of an object, while rest syntax is used to collect parameters into an array or properties into an object.

Example

// Spread Syntax
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

// Rest Syntax
const { name, ...rest } = { name: "Ramu", age: 24, city: "Bangalore" }; // rest is { age: 24, city: 'Bangalore' }

How can you share code between files?

Use module systems like CommonJS or ES6 Modules to import/export code between files.

// constant.js
export const BASE_URL = "https://dev.to/bugudiramu";

// app.js
import { BASE_URL } from "./constant.js";

Why might you want to create static class members?

Static class members are shared across all instances of a class, providing a way to implement utility functions or properties that belong to the class itself.

Example:

class Circle {
  static PI = 3.14;

  static calculateArea(radius) {
    return this.PI * radius * radius;
  }
}

const area = Circle.calculateArea(5);
console.log(area); // 78.5

In this example, PI is a static property shared among all instances, and calculateArea is a static method that doesn't require creating an instance of the class.

What is the difference between while and do-while loops in JavaScript?

In JavaScript, the while loop runs a code block repeatedly as long as a specified condition is true. However, it checks the condition before the first iteration.

On the other hand, the do-while loop also repeats a code block based on a condition, but it ensures that the block is executed at least once before checking the condition.

Example

// Using while loop
let i = 0;
while (i < 5) {
  console.log(`While loop: ${i}`);
  i++;
}

// Using do-while loop
let j = 0;
do {
  console.log(`Do-while loop: ${j}`);
  j++;
} while (j < 5);

What is a promise? Where and how would you use a promise?

A promise represents the eventual completion or failure of an asynchronous operation and allows you to handle the result or error in a more structured way. Promises are commonly used with asynchronous tasks like fetching data or making API calls.

function getUser() {
  const user = { name: "Ramu", age: 24 };
  return new Promise((resolve, reject) => {
    if (Object.keys(user).length > 0) {
      setTimeout(() => {
        resolve(user);
      }, 1000);
    } else {
      reject("User not found");
    }
  });
}

getUser()
  .then((user) => console.log(user))
  .catch((err) => console.log(err));

Discuss how you might use Object-Oriented Programming principles when coding with JavaScript.

When coding in JavaScript, Object-Oriented Programming (OOP) principles can enhance your code structure.

Encapsulation:
Encapsulation involves bundling data and methods into a single unit. In JavaScript, you can achieve this using constructor functions or classes.

Inheritance:
Inheritance allows a new object to inherit properties and methods from an existing object. In JavaScript, the prototype chain facilitates inheritance.

Polymorphism:
Polymorphism enables objects to take on multiple forms. In JavaScript, achieve polymorphism through method overriding or interface implementation.

Example:

class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log("Generic animal sound");
  }
}

class Dog extends Animal {
  makeSound() {
    console.log("Woof!");
  }
}

const myDog = new Dog("Buddy");
myDog.makeSound(); // Outputs: Woof!

In this example, Dog inherits from Animal, demonstrating encapsulation, inheritance, and polymorphism in a simple JavaScript class hierarchy.

Sorting Algorithms in JavaScript or TypeScript

bugudiramu — Mon, 27 Nov 2023 18:16:47 +0000

A brief intro about sorting algorithms

"Sorting is like tidying up your room, but for data! In this article, we'll explore different ways to neatly organize information. From basic methods like putting numbers in order to more clever ways that work faster with big lists. We'll learn how each method works, see when they're great, and how they're used in real life. By the end, you'll know all about these sorting tricks and how they can help tidy up information for all kinds of tasks!"

Bubble Sort Algorithm 🛁

Introduction

The bubble sort algorithm is a foundational sorting technique for arranging elements in ascending or descending order within an array. While less efficient for larger datasets, it provides a clear understanding of basic sorting mechanisms.

Algorithm Overview

Compare adjacent elements in the array.
Swap them if they are in the wrong order.
Repeat this process for the entire array until no more swaps are needed.

TypeScript Implementation

Brute Force Solution

export default function bubbleSortBruteForce(nums: number[]): number[] {
  const length: number = nums.length;

  for (let row: number = 0; row < length - 1; row++) {
    for (let col: number = 0; col < length - row - 1; col++) {
      if (nums[col] > nums[col + 1]) {
        [nums[col], nums[col + 1]] = [nums[col + 1], nums[col]];
      }
    }
  }

  return nums;
}

const nums: number[] = [2, 41, 4, 1, 7];
bubbleSortBruteForce(nums.slice()); // 🔄 Using slice to avoid modifying the original array

Complexity Analysis

Best Case: O(n) - When the array is already sorted.
Average Case: O(n^2) - For random arrays.
Worst Case: O(n^2) - When the array is sorted in reverse order.

Optimal Solution

export default function bubbleSortOptimal(nums: number[]): number[] {
  const length: number = nums.length;
  let swapped: boolean;

  for (let row: number = 0; row < length - 1; row++) {
    swapped = false;

    for (let col: number = 0; col < length - row - 1; col++) {
      if (nums[col] > nums[col + 1]) {
        [nums[col], nums[col + 1]] = [nums[col + 1], nums[col]];
        swapped = true;
      }
    }

    if (!swapped) break;
  }

  return nums;
}
const nums: number[] = [2, 41, 4, 1, 7];
bubbleSortOptimal(nums.slice()); // 🔄 Using slice to avoid modifying the original array

Important Note:

Here, I'm using the slice method on the nums array. This lets me work with a copy of the data instead of the original data.

In this code snippet, I'm emphasizing the use of strict types, even though some types are inferred from their initial values. Explicitly defining types, even when inferred, enhances readability, consistency, and documentation within the code.

Clarity: Assigning explicit types makes code easier to understand.
Consistency: It ensures uniformity and simplifies future modifications.
Documentation: Helps clarify variable usage and intentions for better comprehension.

When dealing with real-world data in data structures, algorithms, or any data-related tasks, it's better not to change the original data directly. Instead, it's best practice to create a duplicate or copy of the data and perform modifications on the copied version while keeping the original dataset unchanged.

Selection Sort Algorithm 🎯

Introduction

The selection sort algorithm is a comparison-based sorting technique used to arrange elements within an array. While straightforward, it's less efficient for larger datasets but offers a fundamental understanding of sorting.

Algorithm Overview

Start by dividing the array into sorted and unsorted portions.
Find the smallest element from the unsorted portion and place it at the end of the sorted portion.
Repeat this process until the entire array is sorted.

TypeScript Implementation

export function selectionSort(nums: number[]): number[] {
  const length: number = nums.length;

  for (let row: number = 0; row < length - 1; row++) {
    let minIdx: number = row;
    for (let col: number = row + 1; col < length; col++) {
      if (nums[col] < nums[minIdx]) {
        minIdx = col;
      }
    }
    if (minIdx !== row) {
      [nums[row], nums[minIdx]] = [nums[minIdx], nums[row]];
    }
  }

  return nums;
}

const nums: number[] = [2, 41, 4, 1, 7];
console.log(selectionSort(nums.slice())); // Using slice to avoid modifying the original array

Complexity Analysis

Best Case: O(n^2) - When the array is already sorted.
Average Case: O(n^2) - For random arrays.
Worst Case: O(n^2) - When the array is sorted in reverse order.

Insertion Sort Algorithm 📥

Introduction

The insertion sort algorithm is another comparison-based sorting technique used to arrange elements within an array. It's particularly efficient for small datasets and nearly sorted arrays due to its simplicity.

Algorithm Overview

Start with the second element and consider it as a sorted sequence.
Iterate through the unsorted elements, one at a time.
For each element, compare it with the elements in the sorted sequence and insert it into the correct position.

TypeScript Implementation

export function insertionSort(nums: number[]): number[] {
  const length: number = nums.length;

  for (let row: number = 1; row < length; row++) {
    const currentElement: number = nums[row];

    let col: number = row - 1;

    while (col >= 0 && nums[col] > currentElement) {
      nums[col + 1] = nums[col];
      col--;
    }

    nums[col + 1] = currentElement;
  }
  return nums;
}

const nums: number[] = [2, 41, 4, 1, 7];
console.log(insertionSort(nums.slice())); // 🔄 Using slice to avoid modifying the original array

Complexity Analysis

Best Case: O(n) - When the array is nearly sorted.
Average Case: O(n^2) - For random arrays.
Worst Case: O(n^2) - When the array is sorted in reverse order.

The Insertion Sort algorithm's efficiency lies in its ability to efficiently sort small datasets or partially sorted arrays. It's an in-place sorting algorithm that operates directly on the array by shifting elements and inserting them into their correct positions.

Merge Sort Algorithm 🔄

Introduction

The merge sort algorithm is an efficient, comparison-based sorting technique that follows the divide-and-conquer strategy to sort elements within an array. It offers better performance compared to other sorting algorithms for larger datasets.

Algorithm Overview

Divide the array into smaller subarrays until each subarray contains only one element.
Merge adjacent subarrays while sorting elements to create larger sorted subarrays.
Continue merging and sorting until a single sorted array remains.

TypeScript Implementation

Recursive Approach

export default function mergeSort(nums: number[]): number[] {
  if (nums.length <= 1) {
    return nums;
  }
  const mid: number = Math.floor(nums.length / 2);
  const left: number[] = nums.slice(0, mid);
  const right: number[] = nums.slice(mid);

  const sortedLeft: number[] = mergeSort(left);
  const sortedRight: number[] = mergeSort(right);

  return merge(sortedLeft, sortedRight);
}

function merge(nums1: number[], nums2: number[]): number[] {
  let [leftIdx, rightIdx]: [number, number] = [0, 0];
  const result: number[] = [];
  while (leftIdx < nums1.length && rightIdx < nums2.length) {
    if (nums1[leftIdx] < nums2[rightIdx]) {
      result.push(nums1[leftIdx]);
      leftIdx++;
    } else {
      result.push(nums2[rightIdx]);
      rightIdx++;
    }
  }
  /*
   * After the loop, one of the arrays might still have elements remaining.
   * You can append the remaining elements directly without additional checks.
   */
  return result.concat(nums1.slice(leftIdx), nums2.slice(rightIdx));
}

const nums: number[] = [2, 41, 4, 1, 7];
console.log(mergeSort(nums.slice())); // 🔄 Using slice to avoid modifying the original array

Complexity Analysis

Best Case: O(n log n) - Achieved when the array is nearly sorted.
Average Case: O(n log n) - For random arrays.
Worst Case: O(n log n) - Regardless of the input data.

Quick Sort Algorithm ⚡

Introduction

The Quick Sort algorithm is a highly efficient comparison-based sorting technique used to rearrange elements within an array. Leveraging the concept of partitioning, Quick Sort offers better performance compared to other sorting algorithms.

Algorithm Overview

Choose an element as the pivot from the array.
Rearrange the elements in such a way that elements less than the pivot are moved to the left, and elements greater than the pivot are moved to the right.
Recursively apply the above steps to the sub-arrays created by partitioning until the entire array is sorted.

TypeScript Implementation

export default function quickSort(nums: number[]): number[] {
  if (nums.length <= 1) {
    return nums;
  }

  const pivot: number = nums[0];

  const left: number[] = [];
  const right: number[] = [];

  for (const num of nums.slice(1)) {
    if (num < pivot) {
      left.push(num);
    } else {
      right.push(num);
    }
  }

  return [...quickSort(left), pivot, ...quickSort(right)];
}

const nums: number[] = [2, 41, 4, 1, 7];
console.log(quickSort(nums.slice())); // 🔄 Using slice to avoid modifying the original array

Complexity Analysis

Best Case: O(n log n) - When the pivot chosen splits the array into nearly equal halves.
Average Case: O(n log n) - For random arrays.
Worst Case: O(n^2) - When the pivot is the smallest or largest element in every partition.

You can find all the code samples here

Conclusion

Understanding these sorting algorithms is crucial for developers when selecting the appropriate method for various scenarios. The bubble sort, while straightforward, works well for smaller datasets, providing a fundamental sorting mechanism. In contrast, quick sort excels in efficiently handling larger arrays, offering a faster sorting approach. Depending on your specific use case, you can leverage these algorithms to organize and optimize your code.

To see visualizations of how these algorithms operate, you can explore the website at https://visualgo.net/en/sorting.

Searching Algorithms in JavaScript or TypeScript

bugudiramu — Tue, 21 Nov 2023 08:22:01 +0000

Linear Search Algorithm

Introduction

The linear search algorithm is a foundational method for locating a target element within an array by sequentially checking each element. This algorithm, while simple, proves effective for small datasets.

Algorithm Overview

If the array is empty, return -1, indicating the target is not found.
Iterate through each element num in the array.
If num matches the target, return 1, indicating the element is found.
If no match is found after iterating through the entire array, return -1.

TypeScript Implementation

export default function linearSearch(nums: number[], target: number): number {
  for (let i: number = 0; i < nums.length; i++) {
    if (nums[i] === target) return i;
  }
  return -1;
}

const nums: number[] = [2, 41, 4, 1, 7];
const target: number = 3;
linearSearch(nums.slice(), target); // 🔄 Using slice to avoid modifying the original array

Important Note:

Here, I'm using the slice method on the nums array. This lets me work with a copy of the data instead of the original data.

Clarity: Assigning explicit types makes code easier to understand.
Consistency: It ensures uniformity and simplifies future modifications.
Documentation: Helps clarify variable usage and intentions for better comprehension.

Complexity Analysis

Best Case: O(1) - When the target element is found at the beginning of the array.
Average Case: O(n) - When the target element is present somewhere in the middle of the array.
Worst Case: O(n) - When the target element is not present in the array or located at the end of the array.

Binary Search Algorithm

Introduction

The binary search algorithm efficiently finds a target element within a sorted array by repeatedly dividing the search interval in half. This makes it particularly effective for large datasets.

Algorithm Overview

Initialize two pointers, left and right, representing the start and end of the array.
Loop until left is less than or equal to right.
Calculate the middle element.
If the target matches the middle element, return 1, indicating the element is found.
If the target is less than the middle value, continue searching the left portion of the array.
If the target is greater than the middle value, continue searching the right portion of the array.
If the target is not found, increment left and decrement right.
Return -1 if the target is not present in the array.

TypeScript Implementation

export default function binarySearch(nums: number[], target: number): number {
  if (nums.length === 0) return -1;
  let left: number = 0;
  let right: number = nums.length - 1;

  while (left <= right) {
    const mid: number = Math.floor(left + (right - left) / 2);
    if (nums[mid] === target) {
      return mid;
    } else if (nums[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }
  return -1;
}

const nums: number[] = [1, 2, 3, 4, 5];
const target: number = 0;
binarySearch(nums.slice(), target); // 🔄 Using slice to avoid modifying the original array

Complexity Analysis

Best Case: O(1) - When the target element is found at the middle of the array.
Average Case: O(logn) - When the target element is present somewhere in the middle of the array.
Worst Case: O(logn) - When the target element is not present in the array or located at the end of the array.

Note

The array must be sorted in either ascending or descending order for the binary search to operate efficiently.

Explaining the variance between left + (right - left) / 2 and (left + right) / 2:

Both calculate the middle index in binary search.
The former prevents potential integer overflow by first computing the difference before division.
It's a safer option for handling large values or scenarios near integer limits to avoid arithmetic overflow.

Let's consider a scenario where the input array is sorted in descending order, but our code is optimized for arrays sorted in ascending order. To handle both scenarios effectively, we'll need to make adjustments to our code.

export default function binarySearch(nums: number[], target: number): number {
  if (nums.length === 0) return -1;

  let left: number = 0;
  let right: number = nums.length - 1;

  const isAscending: boolean = nums[left] < nums[right];

  while (left <= right) {
    const mid: number = Math.floor(left + (right - left) / 2);

    if (nums[mid] === target) {
      return mid;
    }

    if (isAscending) {
      if (nums[mid] < target) {
        left = mid + 1;
      } else {
        right = mid - 1;
      }
    } else {
      if (nums[mid] > target) {
        left = mid + 1;
      } else {
        right = mid - 1;
      }
    }
  }

  return -1;
}

const nums: number[] = [1, 2, 3, 4, 5];
const target: number = 2;
binarySearch(nums.slice(), target); // 🔄 Using slice to avoid modifying the original array

In this scenario, our existing code is optimized for ascending order, but by introducing a check for the order of the input array (isAscending), we've made it adaptable to handle both ascending and descending order scenarios efficiently.

You can find all the code samples here

Conclusion

Understanding these search algorithms is crucial for developers when choosing the right approach for different scenarios. The linear search, though simple, is effective for smaller datasets, while the binary search excels in efficiently handling larger, sorted arrays. Depending on your specific use case, you can leverage these algorithms to optimize your code.

A Comprehensive Guide to URLSearchParams in TypeScript 🚀

bugudiramu — Sat, 18 Nov 2023 00:30:00 +0000

In the ever-evolving landscape of APIs, the quest for specific, filtered data is a common journey. This guide unveils a crucial technique for achieving this feat: the strategic use of searchable parameters in a GET request.

The Basics

When pursuing filtered data, two primary methods wield influence:

POST Request with Body
GET Request with Searchable Parameters

Today, our focus is on the latter.

The Code Walkthrough

Let's dissect a TypeScript example, exploring how to effectively filter data through a GET request.

Initial Implementation

import axios from "axios";

// Interface for the API request format
interface GetUsersRequest {
  id?: string;
  name?: string;
  username?: string;
  email?: string;
}

class UserService {
  async getUsers(payload: GetUsersRequest) {
    const searchParams: Record<string, any> = new URLSearchParams();

    // Append parameters if they exist in the payload
    if (!!payload.id) {
      searchParams.append("id", payload.id);
    }
    if (!!payload.name) {
      searchParams.append("name", payload.name);
    }
    if (!!payload.username) {
      searchParams.append("username", payload.username);
    }
    if (!!payload.email) {
      searchParams.append("email", payload.email);
    }

    // Construct the base URL
    const baseUrl = new URL("https://jsonplaceholder.typicode.com/users");

    // Attach search parameters to the base URL
    baseUrl.search = searchParams.toString();

    return await axios({
      url: baseUrl.toString(),
      method: "GET",
    });
  }
}

// Instantiate the UserService
const userService = new UserService();

const getUsersRequest: GetUsersRequest = {
  id: "1",
  name: "John",
};

userService
  .getUsers(getUsersRequest)
  .then((users) => {
    console.log("Users:", users);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

Can we optimize & write better code? Absolutely! Below is the implementation.

Optimized Solution

import axios from "axios";

// Improved API request structure with mandatory parameters
interface GetUsersRequest {
  id: string;
  name: string;
  username: string;
  email: string;
}

class UserService {
  async getUsers(payload: Partial<GetUsersRequest>) {
    // Added proper type for searchParams
    const searchParams: URLSearchParams = new URLSearchParams();

    // Destructure parameters from the payload
    const { id, name, username, email } = payload;

    const dataToAppend = [
      {
        key: "id",
        value: id,
      },
      {
        key: "name",
        value: name,
      },
      {
        key: "username",
        value: username,
      },
      {
        key: "email",
        value: email,
      },
    ];

    // Append parameters if they exist
    dataToAppend.forEach((item) => {
      if (!!item.value) {
        searchParams.append(item.key, item.value);
      }
    });

    // Construct the base URL
    const baseUrl = new URL("https://jsonplaceholder.typicode.com/users");

    // Attach search parameters to the URL
    baseUrl.search = searchParams.toString();

    return await axios({
      url: baseUrl.toString(),
      method: "GET",
    });
  }
}

const userService = new UserService();

// Define the parameters for the API request using Partial type
const getUsersRequest: Partial<GetUsersRequest> = {
  id: "1",
  name: "John",
};

userService
  .getUsers(getUsersRequest)
  .then((users) => {
    console.log("Users:", users);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

Exploring the Changes 🕵️‍♂️

In the optimized solution, the TypeScript utility Partial is harnessed for the API request structure. This approach ensures cleaner code and improved type safety, allowing you to specify only the parameters necessary for data filtration.

Now, your code stands poised to be more succinct, maintainable, and in harmony with the best practices of TypeScript development.

Exploring the Approach: Leveraging URLSearchParams for Effective API Filtering

When it comes to filtering data in API requests, the choice of methodology can significantly impact both code clarity and performance. In this guide, we'll dissect the approach of using URLSearchParams in a GET request to achieve precise data retrieval.

The Power of `URLSearchParams`

URLSearchParams is a native JavaScript object that provides a convenient way to construct and manipulate URL query parameters. In our context, it simplifies the process of appending search parameters to a URL for enhanced data filtering.

By utilizing this object, our code gains elegance and readability. Each conditional block appends a parameter only if it exists in the payload, ensuring a clean and concise implementation. This approach not only makes our intent clear but also reduces unnecessary clutter in the URL, promoting a more maintainable codebase.

A Comparative Glance

While various methodologies exist for filtering API requests, the URLSearchParams approach stands out for its simplicity and adherence to the principles of RESTful design. Let's briefly contrast it with other common techniques.

POST Request with Body:
- Suitable for more complex scenarios requiring extensive data manipulation.
- May introduce overhead for smaller, straightforward filtering tasks.
GET Request with Hardcoded Parameters:
- Lacks flexibility as parameters are predetermined in the URL.
- Prone to becoming unwieldy when dealing with multiple optional filters.

Why Choose `URLSearchParams`?

Dynamic Filtering:
- Enables dynamic filtering by appending only the parameters present in the payload.
- Well-suited for scenarios where the set of filters may vary.
Readability and Maintainability:
- Promotes clean, readable code by avoiding redundant conditional checks.
- Facilitates easy maintenance as each parameter addition is localized.
Adherence to RESTful Principles:
- Aligns with RESTful design principles by utilizing the query string for filtering.
- Supports a resource-centric approach to API design.

In conclusion, the choice of URLSearchParams for filtering API requests in a GET scenario represents a balance between simplicity, readability, and adherence to best practices. This approach ensures that your code remains expressive and adaptable, laying the foundation for scalable and maintainable API interactions.

Most asked CSS interview questions

bugudiramu — Tue, 14 Nov 2023 13:09:37 +0000

What is the CSS Box Model, and how does it work?

CSS Box Model: It defines the structure of an element on a web page.
Components: Content, Padding, Border, Margin.
Calculation: Margin + Border + Padding + Content = Total Element Size.

Explain the difference between `display: inline` and `display: block` in CSS.

Property	`display: inline`	`display: block`
Layout	Inline; doesn't create line breaks	Block; starts on a new line
Width & Height	Ignores width/height properties	Respects width/height properties
Examples	Spans only content width	Expands to full container width
Common Elements	`<a>`, `<spans>`	`<div>`, `<p>`

What is the purpose of the `box-sizing` property in CSS? How does it affect layout?

box-sizing Property: Defines how an element's total width and height are calculated.
content-box (default): Width and height apply to content only.
border-box: Width and height include content, padding, and border.

Describe the differences between CSS Grid and Flexbox layout models. When would you use one over the other?

Aspect	CSS Grid	Flexbox
Layout Type	Two-dimensional (rows and columns)	One-dimensional (row or column)
Alignment	Both horizontal and vertical alignment	Primarily for aligning items in one axis
Use Cases	Complex layouts, grids, card layouts	Navigation menus, aligned content

How can you vertically center an element in CSS? Provide multiple methods.

flexbox Method:

Set display: flex; on the container.
Use align-items: center; to center vertically.

position and transform Method:
- Set position: relative; on the parent.
- Set position: absolute; and top: 50%; on the child.
- Use transform: translateY(-50%); to center.

Explain the CSS `position` property and how `static`, `relative`, `absolute`, and `fixed` values work.

position Property: It controls element positioning.
static (default): Follows document flow.
relative: Moves relative to its normal position.
absolute: Positioned relative to the nearest positioned ancestor.
fixed: Positioned relative to the viewport and doesn't move with scrolling.

What is the difference between `margin` and `padding` in CSS, and how do they affect the layout of elements?

Margin: Space outside the element, creating gaps between elements.
Padding: Space inside the element, separating content from the border.
Affect on Layout: Margins affect the space between elements, while padding affects the space inside an element.

Describe the purpose of the `z-index` property in CSS. How does it work?

z-index Property: Controls the stacking order of elements.
Higher z-index values place elements in front of others.
Works for positioned elements (not static).

How do you handle cross-browser compatibility issues in CSS? Can you provide examples of common problems and their solutions?

Cross-browser Compatibility: Use vendor prefixes for specific CSS properties (e.g., -webkit-, -moz-, -ms-).
Example: For gradients, use background-image with prefixes, like -webkit-linear-gradient, -moz-linear-gradient.

What is the CSS `transition` property, and how can it be used to create smooth animations on the web?

transition Property: Animates property changes over time.
Define properties to transition and durations.
Creates smooth animations, e.g., when changing color on hover.

Explain the concept of "media queries" in CSS and how they are used for responsive web design.

Media Queries: Conditional CSS based on device characteristics.
Use @media to specify conditions, like screen width.
Apply different styles for different screen sizes, making websites responsive.

What is the CSS preprocessor, and why might you use one like SASS or LESS? What are the advantages of using a preprocessor?

CSS Preprocessor: A tool that extends CSS capabilities.
Advantages: Variables, nesting, mixins, functions for cleaner, more maintainable code.
Examples: SASS, LESS, SCSS.

Describe the concept of specificity and inheritance in CSS. How do you calculate specificity?

Specificity: Priority given to CSS rules based on selectors.
Calculation: Count IDs, classes, and elements in a selector.
Inline styles > IDs > Classes, pseudo-classes > Elements.

How can you optimize the performance of a web page's CSS? Provide best practices for reducing page load times.

CSS Performance Optimization:
- Minimize HTTP requests (combine CSS files).
- Minify and compress CSS.
- Use efficient selectors (avoid * and complex selectors).
- Eliminate unused or redundant styles.
- Load critical CSS first (avoid render-blocking).

Explain the differences between `em`, `rem`, `px`, and `%` as units of measurement in CSS.

Unit of Measurement:
- em: Relative to the font size of the element itself.
- rem: Relative to the font size of the root (html) element.
- px: Fixed, not relative to anything.
- %: Relative to the parent element's size.

How can you make an element semi-transparent using CSS? What are the differences between `opacity` and `rgba()` for achieving transparency?

Opacity vs. rgba():
- opacity: Makes the whole element and its contents transparent.
- rgba(): Makes only the background color of the element transparent.

What is the CSS "clearfix" technique, and when is it used in web development?

Clearfix Technique: Prevents collapsing of floated elements.
Use it when elements are floated within a container.
Apply the clearfix to the container to ensure proper layout.

Describe the differences between pseudo-classes and pseudo-elements in CSS. Provide examples of each.

Pseudo-Classes:
- Target elements based on state or user interaction (e.g., :hover, :focus).
Pseudo-Elements:
- Create virtual elements (e.g., ::before, ::after) for styling.

How do you create responsive typography in CSS? What techniques and units would you use?

Responsive Typography:
- Use relative units like em, rem, and vw.
- Define breakpoints and adjust font size accordingly.

Explain the concept of "BEM" (Block, Element, Modifier) in CSS naming conventions. How does it improve code maintainability and organization?

BEM Convention:
- Organizes class names into Blocks, Elements, and Modifiers.
- Improves code maintainability, readability, and prevents naming conflicts.

What are the advantages and disadvantages of using CSS frameworks like Bootstrap or Material UI in web development?

Advantages:
- Rapid development with pre-designed components.
- Responsive design out-of-the-box.
- Consistency and browser compatibility.
Disadvantages:
- Increased file size due to included components.
- Learning curve for customization.
- May limit design freedom.

Most asked HTML interview questions

bugudiramu — Thu, 09 Nov 2023 14:32:36 +0000

What is HTML, and how does it differ from other web technologies like CSS and JavaScript?

HTML (Hyper Text Markup Language): It structures the web page.
CSS (Cascading Style Sheets): It styles the elements created with HTML.
JavaScript: It adds interactivity and dynamic behavior to web pages.

Explain the structure of an HTML document.

The structure of an HTML document consists of the following essential elements:

Document Type Declaration (DTD): Specifies the version of HTML being used.
HTML Element: The root element that encapsulates the entire document.
Head Element: Contains metadata like the page title and links to external resources (e.g., stylesheets).
Title Element: Sets the title of the web page, which appears in the browser's title bar or tab.
Body Element: Contains the visible content of the web page, including text, images, links, and other elements.

Here's a simple example of the structure in HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Interview Questions</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to HTML Interview Questions Article</h1>
    <a href="#">click here</a>
  </body>
</html>

In this example, the document starts with a declaration, follows the HTML structure, and includes a title and content within the head and body elements.

What is the purpose of a DOCTYPE declaration in HTML, and do you need it in modern HTML documents?

The DOCTYPE declaration in HTML serves to specify the document type and version of HTML used, ensuring proper rendering by browsers. While not mandatory in modern HTML, it's advisable for consistent compatibility.

What are the differences between HTML4 and HTML5?

HTML4	HTML5
Complex DOCTYPE declaration required.	Simplified DOCTYPE declaration.
Limited structural elements.	New structural elements like `<header>`, `<nav>`, `<footer>`, and `<article>`.
Relied on third-party plugins for audio and video (e.g., Flash).	Native support for `<audio>` and `<video>` elements.
No native support for drawing graphics.	Introduces `<canvas>` for drawing graphics and supports SVG.
Limited input types and form features.	New input types and attributes, as well as the `<datalist>` element.
No local storage options.	Introduces `localStorage` and `sessionStorage` for local data storage.
No geolocation support.	Supports geolocation, allowing access to the user's location.
Limited offline capabilities.	Provides Application Cache and Service Worker for offline applications.
Limited cross-document communication options.	Introduces `postMessage` API for secure communication between windows or frames.
Less semantic elements.	Includes new semantic elements like `<section>`, `<aside>`, and `<details>`.
Limited JavaScript APIs.	Includes various JavaScript APIs for enhanced web application functionality.

What is the semantic meaning of HTML5 structural elements like `<header>`, `<nav>`, `<section>`, `<article>`, and `<footer>`?

HTML5 structural elements like <header>, <nav>, <section>, <article>, and <footer> provide a clear and meaningful structure to web content:

<header>: Defines the introductory section of a webpage with elements like logos and navigation.
<nav>: Specifies a section for navigation links within a webpage.
<section>: Separates content into thematic sections, aiding organization.
<article>: Represents a self-contained piece of content like blog posts or articles.
<footer>: Located at the bottom of a webpage, it contains copyright and contact information.

What is the purpose of the tag in HTML, and what are some common attributes used with it?

The <meta> tag in HTML provides essential metadata for web documents. Common attributes include:

charset: Defines character encoding, e.g., <meta charset="UTF-8">.
name and content: Used for metadata like authorship, such as <meta name="author" content="John Doe">.
http-equiv: Sets HTTP response headers, like `.
viewport: Specifies the viewport for responsive design, e.g., `.

These attributes aid in proper page rendering and SEO optimization.

Explain the difference between `<div>` and `<span>` in HTML and when to use each.

Element	Purpose	Display	Usage
`<div>`	Group and style larger content sections or layouts.	Block-level, typically starts on a new line.	Used for structuring and organizing content.
`<span>`	Style or modify smaller portions of text or content within an element.	Inline, does not create new lines.	Used for inline styling or changes to specific parts of content.

What is the difference between an HTML element's id and class attributes?

In HTML, the "id" attribute is a unique identifier for an element, and it can only be used once on a page. It's often used for specific styling or JavaScript targeting. On the other hand, the "class" attribute can be used multiple times on various elements, allowing you to apply the same styling or behavior to multiple elements. For example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Interview Questions</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <p id="unique-paragraph">This is a unique paragraph.</p>
    <p class="common-paragraph">This is a common paragraph.</p>
    <p class="common-paragraph">Another common paragraph.</p>
  </body>
</html>

In this example, the "id" attribute is unique to the first paragraph, while the "class" attribute is applied to the second and third paragraphs.

How can you embed multimedia elements in HTML, and what are the primary multimedia elements in HTML5?

You can embed multimedia in HTML using the <audio>, <video>, and <img> tags in HTML5. These tags allow you to include audio, video, and images on your web page. Simply specify the source file using the "src" attribute.

- Audio: <audio src="audio.mp3" controls></audio>
- Video: <video src="video.mp4" controls></video>
- Image: <img src="image.jpg" alt="Description">

Note: These elements are part of the HTML5 specification and make it easy to add multimedia to your web pages.

Explain the importance of accessibility in web development and how you can make a web page more accessible using HTML.

Accessibility in web development is crucial because it ensures that websites can be used by all individuals, including those with disabilities. To make a web page more accessible using HTML, you can:

Use semantic HTML elements like headings, lists, and links to provide structure and context.
Provide alternative text for images and captions for multimedia content.
Use proper form labels and input elements with clear instructions.
Ensure proper color contrast for text and background.
Implement keyboard navigation and focus styles for interactive elements.

What is the alt attribute in HTML, and why is it important for images?

The alt attribute in HTML provides alternative text for images, making web content accessible to visually impaired users by describing the image's content and purpose.

What is an HTML form, and how do you create one? Explain various input types in HTML5.

HTML Form: It collects and transmits user data and is created using <form>.
Input Types in HTML5: They include text, password, email, number, date, radio, and checkbox for various data inputs.

What is the purpose of the iframe element, and what are its potential use cases?

The <iframe> element is used for embedding external web content within a current web page.
It facilitates the integration of various external elements like videos, maps, and widgets.
Common use cases include embedding YouTube videos, displaying Google Maps, and incorporating external forms.
<iframe> enables the seamless integration of external content into a website.

What are HTML data attributes (data-*), and how can they be used in web development?

HTML data attributes (data-*) store custom data on elements for web development, allowing you to enhance functionality, style, and select elements.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Interview Questions</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <button data-product-id="12345">Add to Cart</button>
  </body>
</html>

Explain the concept of HTML entities and provide examples of when and why they are used.

HTML entities are codes in HTML represented as "&" followed by a code and a semicolon, used to display characters with special meanings or symbols.
They prevent reserved characters like "<" and ">" from being treated as HTML tags.
HTML entities are also used to display special characters that may not be readily available on a keyboard.
They ensure correct rendering of characters in web pages, preserving their intended visual representation.

What is the difference between inline and block-level elements in HTML, and can you provide examples of each?

HTML Inline vs. Block-Level Elements

In HTML, inline elements flow within the content, while block-level elements create distinct blocks. Inline elements do not start on a new line and only occupy as much width as necessary, like the <span> tag. Block-level elements, on the other hand, begin on a new line and take up the full width of their parent container, like the <div> tag.

Here are examples of each:

Inline Element Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Interview Questions</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    This is an <span style="color: blue;">inline</span> element within a
    sentence.
  </body>
</html>

Block-Level Element Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Interview Questions</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div style="background-color: lightgray; padding: 10px;">
      This is a block-level element that starts on a new line and occupies the
      entire width.
    </div>
  </body>
</html>

How does the browser render an HTML document, and what is the Document Object Model (DOM)?

Browser rendering of HTML involves fetching content and creating a Document Object Model (DOM).
The DOM is a hierarchical tree structure that represents the document's elements and their relationships.
The browser uses the DOM to render and display the webpage as per HTML and CSS specifications.
The DOM serves as an interface for scripts to access and manipulate the document's content, making it essential for web development.

What are HTML5 Web Storage and how are they different from cookies?

HTML5 Web Storage and cookies serve as data storage mechanisms, but they differ in key aspects:

Capacity:

Web Storage: Holds around 5-10 MB per domain.
Cookies: Limited to 4 KB per cookie, with 20-50 cookies per domain.

Data Type:

Web Storage: Stores key-value pairs, accommodating strings, numbers, and objects.
Cookies: Mainly store text data as strings.

Accessibility:

Web Storage: Fast client-side access.
Cookies: Slow due to server-side transmission with each HTTP request.

Expiry:

Web Storage: Data remains until explicitly removed or browser data is cleared.
Cookies: Can expire at a predefined time.

Security:
- Web Storage: Enhanced security, limited by the same-origin policy.
- Cookies: Vulnerable to security risks, such as cross-site scripting (XSS) attacks.

For example, Web Storage can store user preferences for a web app, while cookies are ideal for retaining a user's login status.

Explain the concept of cross-site scripting (XSS) and how to prevent it when working with user-generated content in HTML.

Cross-Site Scripting (XSS) Overview:

Cross-Site Scripting (XSS) is a security vulnerability that occurs when an attacker injects malicious code into a website, which is then executed by unsuspecting users. This code can steal sensitive data, such as login credentials, or manipulate the user's interactions with the site.

Preventing XSS with User-Generated Content in HTML using Node.js:

To prevent XSS when handling user-generated content in HTML with Node.js, follow these steps:

Input Validation: Use a library like xss to sanitize and validate user input to ensure it contains only safe characters and follows the expected format.

Example:

import { Controller, Post, Body } from "@nestjs/common";
import * as xss from "xss";

@Controller("xss-prevention")
export class XssPreventionController {
  @Post("input-validation")
  inputValidation(@Body("userInput") userInput: string) {
    const sanitizedInput = xss(userInput);
    return `Sanitized Input: ${sanitizedInput}`;
  }
}

Output Encoding: Encode user-generated content when displaying it in HTML using a library like html-entities.

Example:

import { Controller, Post, Body } from "@nestjs/common";
import { AllHtmlEntities } from "html-entities";

@Controller("xss-prevention")
export class XssPreventionController {
  @Post("output-encoding")
  outputEncoding(@Body("userContent") userContent: string) {
    const entities = new AllHtmlEntities();
    const encodedContent = entities.encode(userContent);
    return `Encoded Content: ${encodedContent}`;
  }
}

Content Security Policy (CSP): Implement CSP headers in your Node.js application to restrict the sources of executable scripts, reducing the risk of malicious code execution.

Example (using the helmet-csp middleware):

import * as helmet from "helmet";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.use(
    helmet.contentSecurityPolicy({
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "trusted-scripts.com"],
      },
    })
  );

  await app.listen(3000);
}
bootstrap();

Use HTTP-Only Cookies: Mark cookies as HTTP-only to prevent JavaScript from accessing them, making it harder for attackers to steal session data.

Example (with the cookie-session package):

import * as cookieSession from "cookie-session";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  app.use(
    cookieSession({
      name: "session",
      keys: ["your-secret-key"],
      httpOnly: true,
    })
  );

  await app.listen(3000);
}
bootstrap();

By following these steps in your Node.js application, you can enhance your website's security and protect it from XSS attacks when working with user-generated content in HTML.

How does the rel attribute work in HTML links, and what are some common values for it?

In HTML, the rel attribute is used in links to specify the relationship between the current document and the linked document. It helps browsers and search engines understand the purpose of the link. Common rel attribute values include:

rel="stylesheet": Indicates that the linked document is a stylesheet.
rel="nofollow": Suggests search engines not to follow the link for ranking purposes.
rel="noopener": Advises the browser to open the linked page in a new tab without the window.opener relationship, enhancing security.
rel="canonical": Used to specify the preferred version of a page for search engines in cases of duplicate content.
rel="alternate": For indicating alternate language versions of a page, useful for internationalization.
rel="author": Links to the author's profile or page, often seen in blog posts or articles.
rel="prev" and rel="next": Used in pagination to connect a series of pages.

These rel values provide context and instructions for how the linked content should be handled.

Describe the difference between `<script>`, `<script async>` and `<script defer>`?

Certainly, here's the difference between <script>, <script async>, and <script defer> in bullet points:

<script>: May slow down page rendering as it blocks other page elements until the script is executed.
<script async>: Allows the browser to fetch and execute the script without waiting, potentially out of order with other page elements.
<script defer>: Fetches the script without blocking rendering and ensures it executes in order just before the DOMContentLoaded event.

Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?

CSS <link> elements go between <head> tags for early style loading.
JavaScript <script> elements go just before </body> to avoid blocking rendering.
This setup improves page loading and user experience.
Exceptions may apply when specific script/style loading order is necessary or when performance optimization techniques are used.

What is progressive rendering?

Progressive rendering is a web development technique that displays web content as it loads, improving user experience by showing parts of a page incrementally. For example, when you visit a news website, the text and images at the top of the article may load first, allowing you to start reading while the rest of the page continues to load in the background.

Here's a simple example using lazy loading for images in HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Interview Questions</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to Our Website</h1>
    <p>This is some introductory text.</p>

    <!-- Lazy load the image -->
    <img
      src="placeholder.jpg"
      data-src="main-image.jpg"
      alt="Main Image"
      loading="lazy"
    />

    <p>More content that will be displayed as the image loads.</p>
  </body>
</html>

In this example, the loading="lazy" attribute is added to the <img> element. This tells the browser to load the image ("main-image.jpg") lazily, meaning it will only load and display the image when it's in the user's viewport, enhancing the progressive rendering experience. As the user scrolls down the page, the image will load and appear when it's needed, creating a smoother and more user-friendly browsing experience.

Introduction: Get Ready for Interview Prep Series!

bugudiramu — Tue, 07 Nov 2023 12:35:31 +0000

Hey there, folks! 😃 I'm absolutely thrilled to kick off a brand new series of articles here on dev.to. In this series, I'll be covering everything you need for interview preparation in both frontend and backend technologies. 🚀

What to Expect

I've got a comprehensive list of questions, and we're going to dive deep into both theory and practice. 💡

Theory-Based Questions

In the initial section of this series, we'll focus on the essential theory-based questions. We'll cover a wide array of topics in the technologies I've mentioned below. 📚

Exciting Coding Challenges

Once we've laid the foundation with theory and concepts, we'll venture into the fun part—coding questions! Expect to see the most commonly asked coding questions related to React, JavaScript, data structures, algorithms (DSA), and more. 💻

So, gear up for an exciting journey through the world of interview preparation. We're going to equip you with the knowledge and skills you need to ace those technical interviews. Stay tuned for more! 🚀

List of topics that we will be covering throughout the series

Languages

HTML
CSS
JavaScript
TypeScript
Node JS
SQL

Frameworks

React
Nest JS
Express JS

Libraries

Ant Design
Material-UI
Redux Toolkit

Databases

MongoDB
Postgres SQL

Other Tools

Data Structures & Algorithms
System Design
Short articles/topics

Thank you for your support. If you have any queries, please write in the comments. Do like and share the article; it is highly appreciated. And if you have any suggestions, also include. 🙏👍😊

A quick start guide to start Flutter Web .

bugudiramu — Wed, 04 Dec 2019 11:45:19 +0000

In this guide I will be showing you that what we are going to build first then only you can get the most out of this tutorial.
click the link https://bugudiramu.github.io/#/ to see the output of this post I will be continuously updating this site this site still needs lot of changes.
This tutorial will be of 2 parts.In this post we are dealing with all the widgets and screens in the next post we will be dealing with Responsiveness of the website and how to deploy it to github pages and in some other Hosting services.
Flutte Web is still in preview version so you can face lot of errors and issues keep that in mind.

Overview of Flutter and Dart:

You may be wondering that the Flutter Web is still in experimental or in technical preview mode but it is worth trying technology now.If you are familiar with Flutter it becomes easy to start but wait?

What is Flutter ?

Flutter is google's mobile SDK which can help the developers to create some stunning applications for Mobile,Web,Desktop and Watches as well with a single codebase with 60FPS.Isn't that great?

Why do we choose Dart to write Flutter applications ?

Flutter chooses Dart as the programming languages for writing the applications for different devices and OS because Dart is a compiled language.In Android and IOS the dart code is directly compiled into native machine code which is pretty much fast in case of performance.

Warning : The debugging of flutter web application is only working on Chrome browser.

The flutter 1.9 update brings support to flutter web if you haven't upgraded flutter then open your terminal and write

flutter upgrade

Then switch the channel to master and enable web support.

 flutter channel master
 flutter upgrade
 flutter config --enable-web
 flutter create myportfolio

Then type

flutter devices

It will show available two devices like below image

Then you are good to go.

Let's get the party started!!!!

In this post we are going to discuss how to build a complete portfolio in flutter_web.

Full source code available here (Pure Flutter and Dart Code) : https://github.com/bugudiramu/Flutter_Web
Full source code available here (After compiling to html,css and javascript) : https://github.com/bugudiramu/bugudiramu.github.io

If you face any difficulty in understanding the topics in this post feel free to comment and if you like the post please like the post and star my github repo https://github.com/bugudiramu/Flutter_Web.

First things first add all the required dependencies in the pubspec.yaml file.

  responsive_builder: any
  universal_html: ^1.1.6
  universal_io: ^0.8.4
  url_launcher: ^5.2.7

In the fonts section use

  fonts:
    - family: Montserrat
      fonts:
        - asset: fonts/montserrat/Montserrat-Medium.ttf

In the main.dart file remove the boiler plate code which comes with flutter create and paste the below code.

import 'package:flutter/material.dart';
import 'package:portfolio/pages/homepage.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Portfolio",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink,
        fontFamily: "Montserrat",
      ),
      home: HomePage(),
    );
  }
}

Create folders like widgets,pages,constants in the lib folder in order to separate all the UI code like below image.
We are going to divide our project into 5 parts

Appbar (Navigation bar)
Profile
Projects
About &
Contact page

Appabar or Navigation Bar

In the widgets folder create a file named appbar_widget.dart and paste the below code.
Don't confuse by seeing the code because I have used functions everywhere because I don't like to copy the same code again and again.Once you try it will become easy for you aswell..

import 'package:flutter/material.dart';

class AppBarWidget extends StatefulWidget {
  @override
  _AppBarWidgetState createState() => _AppBarWidgetState();
}

class _AppBarWidgetState extends State<AppBarWidget> {
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    return Container(
      alignment: Alignment.center,
      height: 80.0,
      width: width,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            child: Text(
              "Portfolio",
              style: TextStyle(
                  fontSize: 30.0,
                  fontWeight: FontWeight.normal,
                  color: Colors.black),
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                SizedBox(width: 20.0),
                navbarItems("WORK"),
                SizedBox(width: 20.0),
                navbarItems("ABOUT"),
                SizedBox(width: 20.0),
                navbarItems("CONTACT"),
                SizedBox(height: 20.0),
              ],
            ),
          )
        ],
      ),
    );
  }

  navbarItems(String s) {
    return Container(
      child: Text(
        s,
        style: TextStyle(
          color: Colors.black,
        ),
      ),
    );
  }
}

Here we are returning a Container() which is having a height of 80.0 and Row() as a child with 2 children of Text() and a Container().The Container again has a Row() because we are going to make the Work,About and Contact tabs as right side so we can define mainAxisAlignment: MainAxisAlignment.end for the second Row().Here all the tabs having same style but the name only changes so here we are using the power of functions. navbarItems() which takes a String name as argument and calls in the Row() as many times as we want.

Profile :

In the profile we are only making use of only two Text() widgets like follows.

import 'package:flutter/material.dart';
import 'package:portfolio/widgets/custom_line_star_widget.dart';

class MyProfileWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double height = MediaQuery.of(context).size.height;
    return Container(
      height: height,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Colors.pink.shade700,
            Colors.pink,
            Colors.pink.shade700,
          ],
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            child: Text(
              "RAMU",
              style: nameStyle(),
            ),
          ),
          SizedBox(height: 10.0),
          CustomLineStarWidget(
            borderColor: Colors.white,
          ),
          SizedBox(height: 10.0),
          Container(
            margin: const EdgeInsets.all(8.0),
            padding: const EdgeInsets.all(8.0),
            child: Text(
              "Flutter - Android & Computer Enthusiast.",
              textAlign: TextAlign.center,
              style: skillStyle(),
            ),
          ),
        ],
      ),
    );
  }

  nameStyle() {
    return TextStyle(
      color: Colors.white,
      fontSize: 80.0,
      fontWeight: FontWeight.bold,
    );
  }

  skillStyle() {
    return TextStyle(
        color: Colors.white, fontSize: 22.0, fontWeight: FontWeight.bold);
  }
}

Here you might be wondering that where is CustomLineStarWidget() right!.

import 'package:flutter/material.dart';

class CustomLineStarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 100.0,
          color: Colors.black,
          height: 4.0,
        ),
        SizedBox(width: 10.0),
        Icon(
          Icons.star_half,
          color: Colors.black,
          size: 38.0,
        ),
        SizedBox(width: 10.0),
        Container(
          width: 100.0,
          color: Colors.black,
          height: 4.0,
        ),
      ],
    );
  }
}

Projects :

Projects page looks like the below image

If you find the Constants class here all the properties lies inside the constants.dart file

import 'package:flutter/material.dart';

class Constants {
  // * Images
  static String facebook = "images/facebook.png";
  static String twitter = "images/twitter.png";
  static String linkedin = "images/linkedin.png";
  static String github = "images/github.png";
  static String myimage = "images/myimage.jpg";
  static String bgimg = "images/bgimg.jpg";
  static String tasklist = "images/projectIcons/tasklist.png";
  static String ebazaar = "images/projectIcons/ebazaar.png";
  static String news = "images/projectIcons/news.png";
  static String calculator = "images/projectIcons/calculator.png";
  static String bmi = "images/projectIcons/bmi.png";
  static String weather = "images/projectIcons/weather.png";
  //* Fonts
  // static String montserratFont = "fonts/montserrat";

  // * TextStyles
  static TextStyle secondaryTitles = TextStyle(
    fontSize: 45.0,
    fontWeight: FontWeight.w700,
    color: Colors.brown.shade700,
  );

  static TextStyle nameStyle =
      TextStyle(color: Colors.red, fontSize: 86.0, fontWeight: FontWeight.w900);
  static TextStyle appBarStyle = TextStyle(backgroundColor: Colors.redAccent);
  static TextStyle customAppbarTitle = TextStyle(
      fontSize: 30.0, fontWeight: FontWeight.normal, color: Colors.black);
  static Color primaryColor = Colors.purple;
  static Alignment alignment = Alignment.center;

  // * Url's
  static const githubUrl = "https://github.com/bugudiramu";
  static const facebookUrl = "#";

  static const twitterUrl = "https://twitter.com/_iamramu";
  static const linkedinUrl =
      "https://www.linkedin.com/in/ramu-bugudi-2a5a5a161/";

  // * Colors
  static Color myPrimaryColor = Colors.blueGrey.shade900;
  static Color mySecondaryColor = Color(0xff95a5a6);
}

project_widget.dart


import 'package:flutter/material.dart';
import 'package:portfolio/constants/constants.dart';

class ProjectsWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    return Container(
      width: width,
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              projectContainer(Constants.bmi, context),
              projectContainer(Constants.news, context),
              projectContainer(Constants.ebazaar, context),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              projectContainer(Constants.calculator, context),
              projectContainer(Constants.weather, context),
              projectContainer(Constants.tasklist, context),
            ],
          ),
        ],
      ),
    );
  }

  Widget projectContainer(String img, context) {
    return MaterialButton(
      splashColor: Colors.transparent,
      hoverElevation: 10.0,
      onPressed: () => _showDialogAboutProject(context),
      child: Container(
        decoration: BoxDecoration(
          backgroundBlendMode: BlendMode.colorBurn,
          // color: myColors[random.nextInt(6)],
          color: Colors.black,
          borderRadius: BorderRadius.circular(10.0),
        ),
        margin: const EdgeInsets.all(20.0),
        alignment: Alignment.center,
        height: 200.0,
        width: 300.0,
        child: Image.asset(
          img,
          height: 150.0,
          width: 150.0,
        ),
      ),
    );
  }

  _showDialogAboutProject(context) {
    return showDialog(
      context: context,
      child: AlertDialog(
        title: Text("Project Title"),
        content: ListTile(
          title: Text("Description of the Project"),
          subtitle: Text(
              "If you want to see the the project details head over to my GitHub profile (click the github icon below the contact section)"),
        ),
        actions: <Widget>[
          MaterialButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text("Close"),
          ),
        ],
      ),
    );
  }
}

Here we are returning a Column() which contains Row() as a child. In the Row() widget we are returning the projectContainer() which acts a button when we click on it it will show an AlertDialog() about the Project.

About Page

Image for about page

In the about page we are only going to display about our self which is a text. Here I used SelectableText() widget because it allows us to use copy,paste and selectAll kinds of features.


import 'package:flutter/material.dart';
import 'package:portfolio/widgets/custom_line_star_widget.dart';

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Colors.pink.shade700,
            Colors.pink,
            Colors.pink.shade700,
          ],
        ),
      ),
      padding: const EdgeInsets.all(20.0),
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          SizedBox(height: 60.0),
          Container(
            child: Text(
              "ABOUT",
              style: TextStyle(
                fontSize: 45.0,
                fontWeight: FontWeight.w700,
                color: Colors.white,
              ),
            ),
          ),
          SizedBox(height: 10.0),
          CustomLineStarWidget(
            borderColor: Colors.white,
          ),
          SizedBox(height: 60.0),
          _dymmyText(),
          SizedBox(height: 60.0),
        ],
      ),
    );
  }

  _dymmyText() {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
      child: SelectableText(
        "“My Name Is Bugudi Ramu And I Am A Mobile,Web Developer And Programmer Aswell.I Am From India. I Will Get My Graduation In 2020 With A Bachelor’s Degree In Electronic And Communication Engineering From Bharath Institute Of Higher Education And Research(BIHER) In Chennai(Tamilnadu). I Served My Most Of The Time In Practicing,Exploring New Ways For Solving Problems And Doing Projects.As I Am Self-Taught I'm Looking For Right Platform To Explore My Knowledge And Improve Skills.”",
        style:
            TextStyle(color: Colors.white, fontSize: 16.0, letterSpacing: 1.0),
      ),
    );
  }
}

Contact Page

In the Contact page I have used 3 TextFields() which is Name,Email and Message.A button is created to navigate the user the user to show a welcome message or it won't necessary.Here I have added validation aswell.

import 'package:flutter/material.dart';
import 'package:portfolio/constants/constants.dart';
import 'package:portfolio/pages/welcome_message_page.dart';
import 'package:portfolio/widgets/custom_line_star_widget.dart';
import 'package:responsive_builder/responsive_builder.dart';

class ContactPage extends StatefulWidget {
  @override
  _ContactPageState createState() => _ContactPageState();
}

class _ContactPageState extends State<ContactPage> {
  var _formKey = GlobalKey<FormState>();
  var nameController = TextEditingController();
  var emailController = TextEditingController();
  var msgController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    return Container(
      color: Colors.transparent,
      child: Column(
        children: <Widget>[
          SizedBox(height: 60.0),
          Container(
            child: Text(
              "CONTACT ME",
              style: Constants.secondaryTitles,
            ),
          ),
          SizedBox(height: 20.0),
          CustomLineStarWidget(borderColor: Colors.brown.shade900),
          SizedBox(height: 60.0),
          customForm(width),
          SizedBox(height: 60.0),
        ],
      ),
    );
  }

  Widget customForm(width) {
    return Container(
      padding: const EdgeInsets.all(20.0),
      margin: const EdgeInsets.all(20.0),
      width: width,
      alignment: Alignment.center,
      child: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            _textFormField(nameController, "Name"),
            _textFormField(emailController, "Email"),
            _textFormField(msgController, "Message"),
            SizedBox(height: 10.0),
            Container(
              alignment: Alignment.topLeft,
              child: MaterialButton(
                onPressed: () {},
                hoverColor: Colors.pink,
                color: Constants.myPrimaryColor,
                child: Text("Send",
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold)),
              ),
            ),
          ],
        ),
      ),
    );
  }

  _textFormField(controller, hintText) {
    return TextFormField(
      // autovalidate: true,
      enableInteractiveSelection: true,
      toolbarOptions:
          ToolbarOptions(copy: true, cut: true, paste: true, selectAll: true),
      onSaved: (val) {
        setState(() {
          controller.text = val;
        });
      },
      validator: (val) {
        if (val.isEmpty || val.length < 0) {
          print(val);
          return "Please provide atleast you'r name";
        }
        return "";
      },
      controller: controller,
      decoration: InputDecoration(hintText: hintText),
      onChanged: (text) {
        print(text);
      },
    );
  }
}

In the end of the webpage we are interested to display our Social media accounts in order to showcase or the viewers let to know about ourselves.

import 'package:portfolio/constants/constants.dart';
import 'package:universal_html/prefer_universal/html.dart' as html;
import 'package:universal_io/io.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class CopyrightWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        color: Constants.myPrimaryColor,
        height: 170.0,
        child: Column(
          children: <Widget>[
            SizedBox(height: 30.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                socialMediaLinks(Constants.facebook, Constants.facebookUrl),
                socialMediaLinks(Constants.twitter, Constants.twitterUrl),
                socialMediaLinks(Constants.github, Constants.githubUrl),
                socialMediaLinks(Constants.linkedin, Constants.linkedinUrl),
              ],
            ),
            SizedBox(height: 10.0),
            Container(
              child: Text(
                "Designed & Coded by ramu",
                style: TextStyle(color: Colors.white),
              ),
            ),
            SizedBox(height: 30.0),
          ],
        ));
  }

  Widget socialMediaLinks(String image, String url) {
    return InkWell(
      onTap: () => launchUrl(url),
      child: Container(
        padding: const EdgeInsets.all(12.0),
        margin: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.white,
          border: Border.all(
            color: Colors.white60,
            width: 3.0,
          ),
        ),
        child: Image.asset(
          image,
          height: 30.0,
          width: 30.0,
          color: Colors.white,
          colorBlendMode: BlendMode.darken,
        ),
      ),
    );
  }

  launchUrl(String url) async {
    if (kIsWeb) {
      html.window.location.href = url;
      // html.window.location.assign(url);
    } else if (Platform.isAndroid || Platform.isIOS) {
      if (await canLaunch(url)) {
        await launch(url);
      } else {
        throw 'Could not launch $url';
      }
    } else {
      throw Exception("Unknown Platform");
    }
  }
}

Here we have used universal_io and universal_html as html packages to launch the Urls on any platform.
First we are checking KIsWeb a constant that is true if the application was compiled to run on the web then we will access the window object by

html.window.location.href = url

If it is compiled on Android or IOS we can use the url_launcher plugin to launch the Url.
That's it folks I know the length of the article becomes long but I just want to refresh your flutter skills.In the next post we are going to deal with the Responsiveness of our site and adding some cool animations.
see you there.

DEV Community: bugudiramu

JavaScript Arrays & HashMaps: Mastering the Most Asked LeetCode Problems in Coding Interviews

A Brief Introduction

217. Contains Duplicate

Algorithm:

242. Valid Anagram

Algorithm:

1. Two Sum

Algorithm Steps:

49. Group Anagrams

Algorithm:

347. Top K Frequent Elements

Algorithm:

238. Product of Array Except Self

Algorithm:

128. Longest Consecutive Sequence

If the given input array is sorted:

Algorithm:

If the given input array is not sorted:

Algorithm:

Data Structures Implementation in JavaScript or TypeScript

Introduction

Stack

Definition:

Algorithmic Steps:

Complexity Analysis:

Implementation:

Queue

Definition:

Algorithmic Steps:

Complexity Analysis:

Implementation:

Priority Queue

Definition:

Algorithmic Steps:

Complexity Analysis:

Implementation

Linked List

Definition:

Algorithmic Steps:

Complexity Analysis:

Implementation:

Binary Search Tree

Definition:

Algorithmic Steps:

Complexity Analysis:

Implementation:

Graph

Definition:

Algorithmic Steps:

Complexity Analysis:

Implementation:

🚀 JavaScript Array, Object, and Map Methods Cheat sheet 🚀

Introduction 🌐

JavaScript Array Methods:

JavaScript Object Methods:

JavaScript Map Methods:

Some of the new JavaScript methods

Most asked TypeScript interview questions 🚀

Introduction 🌐

Beginner Level 🧑‍💻

What is TypeScript and why should we use it?

What are the basic types in TypeScript?

What are access modifiers in TypeScript?

Explain how TypeScript infers types?

What is an interface in TypeScript, and how is it different from a class?

What is the difference between never, unknown, and any in TypeScript?

What is the difference between type and interface in TypeScript?

Intermediate Level 🚧

What are generics in TypeScript, and when would you use them?

What are Union and Intersection Types in TypeScript?

When would you use type assertion in TypeScript?

Advanced Level 🔥

What are mapped types, and how do they work in TypeScript?

What are Conditional Types in TypeScript?

What are TypeScript decorators, and how do they work?

Explain the concept of advanced type guards.

What is the declare keyword in TypeScript?

Example:

Most asked JavaScript Interview Questions🚀

What is the difference between `never`, `unknown`, and `any` in TypeScript?

What is the difference between `type` and `interface` in TypeScript?

What is the `declare` keyword in TypeScript?

Explain the difference between `function foo() {}` and `var foo = function() {}`: