DEV Community: Tochi

Leetcode 13: Roman to Integer

Tochi — Wed, 10 Dec 2025 08:57:06 +0000

Question

Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M.

I = 1
V = 5
X = 10
L = 50
C = 100
D = 500
M = 1000

For example, 2 is written as II in Roman numeral, just two ones added together. 12 is written as XII, which is simply X + II. The number 27 is written as XXVII, which is XX + V + II.

Roman numerals are usually written largest to smallest from left to right. However, the numeral for four is not IIII. Instead, the number four is written as IV. Because the one is before the five we subtract it making four. The same principle applies to the number nine, which is written as IX. There are six instances where subtraction is used:

I can be placed before V (5) and X (10) to make 4 and 9.
X can be placed before L (50) and C (100) to make 40 and 90.
C can be placed before D (500) and M (1000) to make 400 and 900.

Given a roman numeral, convert it to an integer.

Example 1:

Input: s = "III"
Output: 3
Explanation: III = 3.

Example 2:

Input: s = "LVIII"
Output: 58
Explanation: L = 50, V= 5, III = 3.

Example 3:

Input: s = "MCMXCIV"
Output: 1994
Explanation: M = 1000, CM = 900, XC = 90 and IV = 4.

Approach

Initially, I could not figure out where to start or how to go about this task. So I went through the question again and noticed that the solution was already inside the question. It explained that with Roman numerals, you usually add two or more constant numerals to get some values or subtract two or more numerals to get others. When I say constant numerals, I mean the symbols like I, V, X, L, C, D, M and so on.

With this, the approach becomes clearer. Given a string, the first thing to note is that we have to loop through each character in the string. We then compare each character to the Roman numeral symbols above to get the number value that matches that character.

We also create a variable named total outside the loop with a default value of 0. This variable will be updated every time the loop runs. It stores our running sum.

Inside the loop, compare the current item with the next item.

If the current item is greater than the next item, add it to total.
If the current item is less than the next item, subtract it from total.

Whatever result you get becomes the new value of total.

Given a string s = "MCMXCIV":

Start with total = 0.

Loop through the string:

Current item M = 1000, next item C = 100. 1000 > 100 → add 1000. total = 1000.
Current item C = 100, next item M = 1000. 100 < 1000 → subtract 100. total = 900.
Current item M = 1000, next item X = 10. 1000 > 10 → add 1000. total = 1900.
Current item X = 10, next item C = 100. 10 < 100 → subtract 10. total = 1890.
Current item C = 100, next item I = 1. 100 > 1 → add 100. total = 1990.
Current item I = 1, next item V = 5. 1 < 5 → subtract 1. total = 1989.
Last item V = 5 (no next item). Just add 5. total = 1994.

So the value of "MCMXCIV" is 1994.

Solution

const romanToInt = (s) => {
  const romanNumerals = {
    I: 1,
    V: 5,
    X: 10,
    L: 50,
    C: 100,
    D: 500,
    M: 1000,
  };

  let total = 0;
  for (let i = 0; i < s.length; i++) {
    let curr = s[i];
    let next = s[i + 1];

    if (romanNumerals[curr] < romanNumerals[next]) {


      total-= romanNumerals[curr];
    } else {
      total+= romanNumerals[curr];
    }
  }

  return total;
};

This solution has a time complexity of O(n) linear time. Feel free to drop links to more solutions in the comment below. Let me know what you think.

Hash Tables

Tochi — Mon, 08 Dec 2025 16:33:44 +0000

A hash table is a data structure that stores data in key-value pairs.

[key, value]

It works by passing a key (usually a string) through a hash function.
The hash function generates a number, called the hash index, which tells the table where to store that key–value pair.

Example:

key = "bar" 
hash("bar") => 4

The hash index is 4. This index points to a bucket, which is like a storage box where the value is placed.

Hash tables have O(1) time for inserting, deleting, and retrieving with a worst case scenario of O(n) time if many keys collide. In JavaScript, hash tables appear as:

Objects {}
Maps (new Map())

Hash Collisions

A collision happens when two different keys hash to the same index.

Example:

hash("cat") → 2
hash("tap") → 2

Both keys go into bucket 2 → collision!

Chaining

A common fix for collision is the chaining method. This is where multiple key–value pairs are stored in the same bucket using a list/array.

Bucket 2:
[
  ["cat", 5],
  ["tap", 9]
]

Both live in the same index, no overwriting.

Hash Table Implementation (Explained Step-by-Step)

Below is a simplified JavaScript implementation showing how hash tables work under the hood.

const hash = (key, bucketSize) => {
  let hash = 0;

  for (let i = 0; i < key.length; i++) {
    hash += key.charCodeAt(i);
  }

  return hash % bucketSize;
};

function HashTable() {
  let table = [];
  let tableLimit = 10;

  // print
  this.printTable = function () {
    console.log(table);
  };
  // add
  this.set = function (key, value) {
    // get the index of the key
    const index = hash(key, tableLimit);
    // check if the item exists at the index
    if (!table[index]) {
      table[index] = [[key, value]];
    } else {
      // if it does, update the value
      let inserted = false;
      for (let i = 0; i < table[index].length; i++) {
        if (table[index][i][0] === key) {
          table[index][i][1] = value;
          inserted = true;
        }
      }

      if (!inserted) {
        table[index].push([key, value]);
      }
    }
  };

  // delete
  this.remove = function (key) {
    const index = hash(key, tableLimit);

    if (table[index].length === 1 && table[index][0][0] === key) {
      delete table[index];
    } else {
      for (let i = 0; i < table[index].length; i++) {
        if (table[index][i][0] === key) {
          delete table[index][i];
        }
      }
    }
  };

  // lookup
  this.get = function (key) {
    const index = hash(key, tableLimit);
    if (!table[index]) return undefined;

    for (let i = 0; i < table[index].length; i++) {
      if (table[index][i][0] === key) {
        return table[index][i][1];
      }
    }
  };
}

const myTable = new HashTable();
myTable.set("name", "Alice");
myTable.set("age", 30);
myTable.printTable();
myTable.set("name", "Jane");
myTable.printTable();

The Hash Function

const hash = (key, bucketSize) => {
  let hash = 0;
  for (let i = 0; i < key.length; i++) {
    hash += key.charCodeAt(i);
  }
  return hash % bucketSize;
};

Start with hash = 0.
Loop through each character of the key.
Convert each character → number (charCodeAt).
Add all the numbers together.
% bucketSize makes sure the number fits inside the table size.
The result tells you which bucket to store the key-value pair in.

The Hash Table

function HashTable() {
  let table = [];
  let tableLimit = 10;
/*...some code here..*/
}

table is the actual array holding buckets.
tableLimit is how many buckets exist (size of the table).

The Print Function

this.printTable = function () {
  console.log(table);
};

This just shows the table in the console.

SET (insert or update)

this.set = function (key, value) {
  /*some code here*/
}

const index = hash(key, tableLimit); converts the key to a bucket index.

if (!table[index]) {
  table[index] = [[key, value]];
}

This checks if the bucket is empty. If it is, it creates the bucket and stores the key/value in a mini array, e.g. [ [key, value] ]. This is chaining. Each bucket stores a list of items.

else {
  let inserted = false;

  for (let i = 0; i < table[index].length; i++) {
    if (table[index][i][0] === key) {
      table[index][i][1] = value;
      inserted = true;
    }
  }

The bucket already has items (collision happened). So;

Loop through every item in the bucket.
If the key already exists, update the value.
Set inserted = true so you know the key was found.

If key was not found, then add it:

if (!inserted) {
  table[index].push([key, value]);
}

Remove

this.remove = function (key) {
  const index = hash(key, tableLimit);

/*more code here*/
}

If the bucket has only one item, remove the whole bucket:

if (table[index].length === 1 && table[index][0][0] === key) {
  delete table[index];
}

If the bucket has only multiple items, loop through the items and delete only the matched one.

Get (lookup)

this.get = function (key) {
  const index = hash(key, tableLimit);
/*...more code here...*/
}

If the bucket doesn’t exist, the item is not in the table.

if (!table[index]) return undefined;

Search the bucket and check each item in the chain. If a match is found, return the match.

for (let i = 0; i < table[index].length; i++) {
  if (table[index][i][0] === key) {
    return table[index][i][1];
  }
}

Hash tables are used in many places,like storing user information, counting things, checking if something already exists, or quickly finding data by a key. They help programs run faster because they make lookups very quick. It may look complex at first, but once you understand the idea of hashing and buckets, everything becomes surprisingly simple.

Check out this easy mode hash table question on leetcode: Roman to Integer. Here is an article to my solution.

Hey folks! October is Cybersecurity Awareness Month, and I just published my first ever paper. It’s titled “Common Security Threats in Client–Server Communication”. Please, give it a read here: https://tinyurl.com/sec-threatsts . THANKS A LOT!

Tochi — Wed, 15 Oct 2025 21:55:11 +0000

Common Security Threats In Client-Server Architecture

This research paper explores common security threats in client-server communication, which is the foundation of most modern digital systems. It begins by explaining the structure and types of client-server architecture, including two-tier and three-tier systems, before examining key cybersecurity threats such as Man-in-the-Middle (MitM) attacks, Session Hijacking, Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and SQL Injection. Each attack is explained in simple and clear language, including how it occurs and its impact on client-server communication. The paper also provides detailed preventive measures and best practices, emphasizing encryption, input validation, authentication, and user awareness. The goal of this study is to help readers, especially students and beginners in cybersecurity, understand how these threats work and how to protect client-server systems from them.

zenodo.org

First Publication!

Tochi — Wed, 15 Oct 2025 21:51:28 +0000

Hey folks!

October is Cybersecurity Awareness Month, and I just published my first ever research paper. I promise I am not crying. Lol.

It’s titled “Common Security Threats in Client–Server Communication”, a simple breakdown of attacks like MitM, XSS, SQL injection, and how developers can protect their apps.

If you’re into web development or just curious about cybersecurity, give it a read here!

Would love your thoughts or feedback!

Find The Longest Word In A Sentence: A JavaScript Solution

Tochi — Mon, 15 Sep 2025 09:06:15 +0000

Question

Have the function LongestWord(sen) take the sen parameter being passed and return the longest word in the string. If there are two or more words that are the same length, return the first word from the string with that length. Ignore punctuation and assume sen will not be empty. Words may also contain numbers, for example "Hello world123 567".

Solution

const longestWordInArray = (sen) => {
  if (sen.length === 0) {
    return sen;
  }
  let idx = 0;
  let len = 0;
  const wordsArray = sen.replace(/[^\w ]/g, "").split(" ");
  for (let i = 0; i < wordsArray.length; i++) {
    if (wordsArray[i].length > len) {
      len = wordsArray[i].length;
      idx = i;
    }
  }

  return wordsArray[idx];
};

console.log(longestWordInArray("fun&!! time chimpanze"));

Solution Breakdown

The first step is to create the function called longestWordInArray. It takes one input called sen (which is just a string).
Next, we check if sen is empty (""). If it is we just return it. This prevents errors.
We set up two variables: idx, the position (index) of the longest word we find. At first, it’s 0. len, the length of the longest word so far. At first, it’s 0.

  const wordsArray = sen.replace(/[^\w ]/g, "").split(" ");

This line does two things:

sen.replace(/[^\w ]/g, ""): removes punctuation and special characters, so we only keep letters, numbers, and spaces. Example: "fun&!! time" becomes "fun time".
.split(" "): splits the sentence into an array of words (breaking at spaces). Example: "fun time chimpanze" becomes ["fun", "time", "chimpanze"].

So now we have an array of words.

  for (let i = 0; i < wordsArray.length; i++) {
    if (wordsArray[i].length > len) {
      len = wordsArray[i].length;
      idx = i;
    }
  }

This loop goes through each word in the array:

wordsArray[i]: the current word.
wordsArray[i].length: the number of characters in that word.

If the length of the current word is greater than the current value of len:

Update len with the new length.
Update idx with the position of that word. This way, after the loop ends, idx will point to the longest word.

Finally, we return the word at position idx which is the longest word we found.

Conclusion.

In short, the function above removes punctuation, splits the sentence into words, checks which word is the longest, and returns it. The time and space complexity of the solution above is O(n).

Share your solutions in the comment below.

Leetcode 189: Rotate Array JavaScript Solution.

Tochi — Wed, 03 Sep 2025 12:03:17 +0000

Intuition

My first idea was to split the array into two parts:

The last k items in the array.
All the items that come before those last k items.

But before doing that, I make sure to update k like this:

k = k % nums.length;

This step is important because sometimes k can be larger than the length of the array. If k is larger, rotating the array by k times is the same as rotating it by the remainder after dividing k by the array’s length.

Example:

Suppose nums.length = 7 and k = 10.

10 % 7 = 3.

This means rotating the array 10 times is really the same as rotating it 3 times, because after 7 full rotations, the array looks the same again. So you can think of it as: rotate 7 times (which resets the array), then rotate 3 more times.

After that:

Create two smaller arrays (one for the last k items, one for the rest).
Merge those two arrays together.
Copy the merged result back into the original nums array.

Approach

First I set k to k % nums.length (I explained why above). Then I created a copy of the nums array and call it numsCopy.

After that, I looped through the nums array and for each index I added k to it. This is done to determine the new position of each item when nums is rotated k times.

Now there are two ways to go about the next step. Either we use modulus and say old index plus k (i + k) and then check if the sum is greater that nums.length-1. If it is we'll subtract nums.length from the sum.

Example:

Suppose i = 4, k = 3 and nums.length = 7.

let idx = i + k;

if(idx < nums.length - 1){
   idx = idx - nums.length;
}

Or we can use modulus and do old index plus k modulus nums.length ((i + k) % nums.length). That way we get the new index from the remainder.

let idx = (i + k) % nums.length;

Both solutions give the new index or position of each item in nums.

After the new index is gotten, we modify the nums array with the duplicate array by doing:

nums[idx] = numsCopy[i]

Solution

Initial Solution:

const rotate = (nums, k)=> {

  k %= nums.length;

  const kArray = [];

   for (let i = nums.length - k; i < nums.length; i++) {
     kArray.push(nums[i]);
   }

   const firstPartArray = [];

   for (let i = 0; i < nums.length - k; i++) {
     firstPartArray.push(nums[i]);
   }

  const rotatedArr =[...kArray, ...firstPartArray];

  for(let i = 0; i < rotatedArr.length; i++){
   nums[i] = rotatedArr[i]
  }

};

Improved Solution:

const rotate = (nums, k)=> {

k %= nums.length;

const numsCopy = [...nums];

for(let i = 0; i < nums.length; i++){
  let rotateIdx = (i + k) % nums.length;

  nums[rotateIdx] = numsCopy[i]
}  
};

Complexity

Both solutions have a time and space complexity of O(n) linear time.

Leetcode 283: Move Zeroes JavaScript Solution

Tochi — Mon, 18 Aug 2025 11:46:00 +0000

Given an integer array nums, move all 0's to the end of it while maintaining the relative order of the non-zero elements.

Note that you must do this in-place without making a copy of the array.

Explanation

An in-place algorithm modifies the original array directly instead of creating a separate one. You only use a few extra variables (constant space). This is important in Data Structures and Algorithms (DSA) because it saves memory.

What this challenge means is, send all the zeros to the right and all the non-zero items in the array without changing the order of the non-zero items. So, if you have [5,0,1,9,0,6] the output will be [5,1,9,6,0,0].

The Approach

Initially, I solved this using a nested for loop. I compared each item in the array with the next one, and whenever I found a 0, I swapped it forward until it reached the end of the array. While this worked, it was inefficient because the nested loop made the solution run in O(n²) time. For larger arrays, this approach quickly becomes slow.

After tons of research, I was able to optimize my solution using the two pointer method. To do that:

Pointer 1 (pointer1) → keeps track of the position where the next non-zero element should go.
Pointer 2 (i) → scans through every element of the array.

When we see a non-zero element, we swap it with the element at pointer1. After swapping, we move pointer1 forward by one. If the element is 0, we simply skip it. By the end of the loop, all non-zero numbers are shifted to the left in their original order, and all zeroes are pushed to the right.

The Solution

Solution 1


const moveZeroes = (nums) => {
 if(nums.length === 1){
    return nums;
  }

  for (let j = 0; j < nums.length; j++) {
    for (let i = 0; i < nums.length - 1; i++) {
      if (nums[i] === 0) {
        [nums[i], nums[i + 1]] = [nums[i + 1], nums[i]];
      }
    }
  }

  return nums;
};

console.log(moveZeroes([4, 1, 0, 3, 12])); => [4,1,3,12,0]

The solution above uses nested loop.

Solution 2

const moveZeroes = (nums) => {
  let pointer1= 0;
  for (let i = 0; i < nums.length; i++) {
    if (nums[i] !== 0) {
      [nums[pointer1], nums[i]] = [nums[i], nums[pointer1]];
      pointer1++;
    }
  }
  return nums;
};
console.log(moveZeroes([4, 1, 0, 3, 12]));=>[4,1,3,12,0]

Solution 2 Explanation

First remember that pointer1 = 0, is where the next non-zero should go.

Look at first number(4).
- Not zero → put it at index 0.
- Swap index 0 with index 0 → no change.
- Array: [4, 1, 0, 3, 12]
- pointer1 = 1
Look at second number(1)
- Not zero → put it at index 1.
- Swap index 1 with index 1 → no change.
- Array: [4, 1, 0, 3, 12]
- pointer1 = 2
Look at third number(0)
- It’s zero → do nothing.
- Array stays: [4, 1, 0, 3, 12]
- pointer1 = 2 (stays 2 because the if block did not run).
Look at fourth number(3)
- Not zero → put it at index 2.
- Swap index 2 with index 3 → [4, 1, 3, 0, 12]
- pointer1 = 3
Look at fifth number(12)
- Not zero → put it at index 3.
- Swap index 3 with index 4 → [4, 1, 3, 12, 0]
- pointer1 = 4

The final result: [4, 1, 3, 12, 0]

The Conclusion

The time complexity for the initial solution (using the nested loops) is O(n²) because for every element in the array, we scan through the entire array again. The optimized solution runs in O(n) time since we only pass through the array once.

Both solutions are in-place and use O(1) extra space, but the optimized version is much faster and more practical for larger arrays.

Leetcode 53: Maximum Subarray in JavaScript

Tochi — Thu, 14 Aug 2025 13:41:50 +0000

The Problem

Given an integer array nums, find the subarray with the largest sum, and return its sum.

A subarray is a contiguous(side-by-side) non-empty sequence of elements within an array. It is a part of the array where the numbers are next to each other. You cannot skip elements in between.

Example 1:
Input: nums = [-2,1,-3,4,-1,2,1,-5,4]
Output: 6
Explanation: The subarray [4,-1,2,1] has the largest sum 6.

The Thought Process

We can use Dynamic Programming to solve this problem. Dynamic Programming (DP) is just a way of solving a big problem by breaking it into smaller steps, remembering the answers, and reusing them so we don’t repeat work.

In this problem, we ask ourselves for every index in the array:

"What is the largest sum of a subarray that ends exactly at this index?"

If we know the largest sum ending at the previous index, we can decide:

Start fresh at the current number (nums[i]) if the previous sum was negative
Or continue the subarray from before by adding the current number

This gives our DP rule:

currentMax = max(nums[i], nums[i] + currentMax(previous))

We also keep track of the biggest currentMax we’ve seen so far — that’s our answer.

The solution

const maxSubArray = (nums)=> {
  let maxSum = nums[0];
  let currentMax = 0;

  for (let i = 0; i < nums.length; i++) {
    currentMax = Math.max(nums[i], currentMax + nums[i]);
    let currentMaxSum = maxSum;

    if (currentMax > maxSum) {
      maxSum = currentMax;
    } else {
      maxSum = currentMaxSum;
    }
  }

  return maxSum;
};

Time Complexity: O(n). You loop through the array once (for (let i = 0; i < nums.length; i++)), so the work grows linearly with n.
Space Complexity: O(1). You only use a fixed number of variables (maxSum, currentMax, currentMaxSum) regardless of the size of the input array. No extra arrays or data structures are created.

JavaScript Array Methods Under the Hood: Unshift and Shift Explained

Tochi — Thu, 31 Jul 2025 17:57:39 +0000

In a previous article, we broke down how pop() and push() work under the hood in JavaScript. If you haven’t read that yet, I recommend checking it out first so this one makes even more sense. You can read it here if you're curious about how arrays handle adding and removing items from the end.

In this article, we’re looking at the other side: shift() and unshift(). Let’s break them down together.

Array.unshift(new_item)

This array method is used when you want to add an item to the beginning of an array. Unlike push(), it's not as cheap. It has a time complexity of O(n), linear time.

If you have an array and you want to add something to the front, i.e index 0, JavaScript has to move every other item one step forward to make space. Imagine shifting people in a line forward to make room for one more at the start. That takes time. Let’s look at what unshift() does under the hood.

const jsUnshift = (arr, newItem) => {
  let newArr = [newItem];
  for (let i = 0; i < arr.length; i++) {
    newArr[i + 1] = arr[i];
  }

  return newArr;
};

console.log(jsUnshift([1, 2, 3, 4], 0)); 
//result: [0,1,2,3,4]

JavaScript must make space at index 0. So, it shifts every existing element one position to the right. Another way to do this is:

const numArray = [2, 3, 4];

const jsUnshift = (arr, newItem) => {
  for (let i = arr.length; i > 0; i--) {
    arr[i] = arr[i - 1]; 
  }
  arr[0] = newItem;
  return arr;
};

console.log(jsUnshift(numArray, 1));
//result ==> [1,2,3,4]

The time it takes to perform this operation grows with the size of the array. Hence, the time complexity is O(n).

Array.shift()

Now for the opposite. shift() removes the first item in the array. It sounds simple, but like unshift(), its time complexity is O(n), linear time.

Why? Because when the first item is removed, all the other items need to shift one place to the left so the array stays in order. Again, we’re moving stuff.

const jsShift = (arr) => {
  if (arr.length === 0) return undefined;
  for (let i = 0; i < arr.length; i++) {
    arr[i] = arr[i + 1];
  }
  arr.length = arr.length - 1;
  return arr;
};

console.log(jsShift([1, 3, 4]));
//result ==> [3,4]

Conclusion

While shift() and unshift() may seem straightforward, they’re doing more work behind the scenes than methods like push() and pop(). Because arrays are zero-indexed, inserting or removing items from the beginning means all other elements must be re-indexed, making these operations O(n) in time complexity.

So, the next time you use shift() or unshift(), remember: JavaScript is quietly doing a lot of heavy lifting to maintain the order of your array.

Understanding this can help you make better performance decisions, especially when working with large arrays or performance-critical code.

JavaScript Array Methods Under the Hood: Push and Pop Explained

Tochi — Thu, 31 Jul 2025 15:44:25 +0000

JavaScript array methods push(), pop(), shift(), unshift(), and splice() are used every day by developers, but do you know how they work under the hood?

In this article, we’ll break down the internal mechanics of these methods, explore their time and space complexities, and explain why some are faster than others. Whether you’re preparing for technical interviews or simply want to write more efficient code, understanding these fundamentals is a must.

What Are Arrays?

Let's start by defining arrays. Arrays are data structures used to store a collection of items in a single variable. These items can be of any data type, such as numbers, strings, objects, or even other arrays.

In JavaScript, arrays are index-based. This means that each item is assigned a position (starting from index 0), making it easy to access or manipulate data based on its position. To learn more about arrays and array methods, check out this link.

const animes = ["castlevania", "devil may cry", "rick and morty"]

console.log(animes[0]) ==> castlevania

Array.push(new_item)

This array method is used when you want to add an item to an array. It has a time complexity of O(1). Let me explain why.

The first thing to note is that with push(), you're adding the new item after the last item in the array. So, if you have an array of length n and you want to add the digit 3, here's what happens: Since arrays start counting from index 0, the last item is at index n - 1. To add a new item, you simply assign it to index n.

const numArray = [1, 2, 5];

const jsPush = (arr, newItem) => {
  arr[arr.length] = newItem;
  return arr;
};

console.log(jsPush(numArray, 4)) ==> [1,2,5,4]

This is what push() does under the hood. It simply places the new item at the next available index without moving items around. That's why it is O(1) (constant time). Note that native push() returns the new length (arr.length), not the array itself.

Array.pop()

This array method is used when you want to remove the last item from an array. It also has a time complexity of O(1).

If you have an array of length n, the last item is at index n - 1. To remove it, you just ignore that index and reduce the array's length by 1.

const numArray = [1, 2, 5, 4];

const jsPop = (arr) => {
  arr.length = arr.length - 1;
  return arr;
};

console.log(jsPop(numArray))==> [1,2,5]

With a time complexity of O(1), constant time, this is how pop() works under the hood.

Note that the length property is mutable (can be changed). So, when you set arr.length = arr.length - 1, JavaScript removes any item beyond the new length. It makes the array shorter, and it drops whatever doesn’t fit. If you do the opposite and set the length to arr.length + 1, JavaScript won’t complain. It just adds a space at the end of the array. To learn more about the length property, visit this link.

Conclusion

Understanding how JavaScript array methods like push() and pop() work under the hood helps you write better and faster code. These methods may seem simple, but knowing what’s going on behind the scenes and why some are slower than others can make a big difference, especially when working with large amounts of data.

If you found this helpful, stay tuned for the next part, where we’ll break down how shift(), unshift(), and splice() work.

Bubble Sort: A JavaScript Implementation Guide

Tochi — Sun, 27 Jul 2025 11:17:44 +0000

Imagine a puzzle game where you have six holes. Each hole holds a colored ball (red, blue or green). To win that round in the game, you have to sort the balls so that all the red ones come first, then the green ones, and finally the blue ones. But you can only compare two balls that are side by side, and if they’re not in the right order, you swap them.

You go through the row of balls, checking two at a time. If they’re in the wrong order, you swap them. As you repeat this process, the balls slowly move into the right positions (red moves forward, blue shifts to the back). You continue until no more swaps are needed. That is how the bubble sort algorithm works. So, what is bubble sort?

What is Bubble Sort?

Bubble sort is a type of sorting algorithm that goes through a list of items and arranges the items on the list in the right order. It does this by comparing two items that are side by side and swapping them if they are in the wrong order.

How does it work?

Let’s say you have an unsorted array of numbers: const array = [10, 7, 6, 1]. Your task is to sort this array in ascending order. Naturally, your first thought might be, "Oh, that's easy. Just use the JavaScript built-in sort method." And you'll be correct to think that. But what if, like me, you were in an interview and your interviewer asked you to sort the array without any built-in method? How would you go about it?

Start at the beginning of the array and move through it one item at a time.
Compare each item with the one next to it.
Swap the items if the current item is greater than the next one.
Repeat this process for the entire array.
Continue looping through the array until no more swaps are needed and your array is fully sorted.

Let's code!

const sortArray = (numList) => {
  for (let j = 0; j < numList.length; j++) {    
    for (let i = 0; i < numList.length; i++) {
      if (numList[i] > numList[i + 1]) {
        let temp = numList[i];
        numList[i] = numList[i + 1];
        numList[i + 1] = temp;
      }
    }
  }

  return numList;
};
//
console.log("sorted===>", sortArray(arr));

Explanation.

const sortArray = (numList) => { ... } defines a function called sortArray that takes an array of numbers (numList) and returns a sorted version of it.
for (let j = 0; j < numList.length; j++) is the outer loop. It runs the same number of times as the length of the list. It loops through the entire list from start to finish.
for (let i = 0; i < numList.length; i++) is the inner loop. This is the loop that does the actual comparison. It compares the current item with the item next to it.
if (numList[i] > numList[i + 1]) is a conditional statement that checks if the current number is bigger than the one next to it. If the condition is true, then we need to swap them so the bigger number moves to the right.
let temp = numList[i]; If the conditional statement is true, then this runs. This temporarily stores the current number in a variable called temp. We are storing in a variable because we're about to change numList[i], and we still need its value to complete the swap.
numList[i] = numList[i + 1]; moves the next number to the current spot, and this, numList[i + 1] = temp; puts the original number (from temp) into the next spot.
return numList; returns the sorted array once all the sorting is done.
console.log("sorted===>", sortArray(arr)); prints out the sorted array in the console so we can see the result.

Why Do We Use Two Loops in Bubble Sort?

The inner loop goes through the list once and compares each number with the next one. If the number is bigger than the one next to it, it swaps them. So if it loops just once, we'll get: [7,10,6,1] → [7,6,10,1] → [7,6,1,10] → [7,6,1,10]. This is why the outer loop is needed. The outer loop tells your code: “Go through the list again... and again...” until everything is sorted. It does this n-1 times, where n is the length of the array.

Here is a step-by-step breakdown of what happens.

1st time (outer loop index = 0): The inner loop runs and pushes the biggest number (10) to the end. The result is [7,10,6,1] → [7,6,10,1] → [7,6,1,10] → [7,6,1,10]. After this round, 10 is in the correct place.
2nd time (outer loop index = 1): Now the second-biggest number (7) gets pushed toward its correct place. [7,6,1,10] → [6,7,1,10] → [6,1,7,10] → [6,1,7,10].
3rd time (outer loop index = 2): The smallest numbers (6 and 1) are still in the wrong spots. This time, they get moved into place. [6,1,7,10] → [1,6,7,10] → [1,6,7,10] → [1,6,7,10].
4th time (outer loop index = 3): Now everything is sorted. Even though nothing changes, the loop still runs just to check.

So why do we need the outer loop? Because just looping once is not enough. You need to keep looping until all numbers are in the right place. Without the outer loop, only the largest number will be in place. The rest will still be scrambled.

Conclusion.

Bubble sort is one of the simplest JavaScript sorting algorithms to understand and use. However, bubble sort is not the fastest option, especially for large lists. It has a time complexity of O(n^2), which means it has a quadratic time complexity. This means the time it takes to finish grows quickly as the list gets longer. It also has a space complexity of O(1), which means it has a constant space complexity. It means it doesn’t need any extra memory to do the sorting. So while bubble sort is great for learning how sorting works, it’s also not the best choice for real-world applications where performance matters.

Challenge Accepted- A Runner H-Powered Makeover.

Tochi — Mon, 16 Jun 2025 08:42:50 +0000

This is a submission for the Runner H "AI Agent Prompting" Challenge

What I Built

I wanted honest feedback on a game I’ve been working on with my team at work — Muzingo, a browser-based music bingo game. It's fun, casual, and made for music lovers. But like most builders, we started wondering: Is this enough? What’s missing? How do we grow this?

Instead of guessing, I asked Runner H.

I gave it one job: Act like a Product & Growth Consultant. Explore the game, find weak spots, and then tear apart our social presence with love.

The result? A structured audit with product fixes, growth tactics, and social media gold in one document. It returned a response in minutes.

Demo

Run link: Runner H Audit Run
Document: PlayMuzingo Product & Social Audit

How I Used Runner H

Here’s how the workflow went:

I set the scene: You’re a product and growth consultant for web-based games.
Gave it my URL: https://playmuzingo.com.
Asked it to:

Explore the game and suggest UX and feature improvements.
Audit our social media strategy across platforms.
Share clear, actionable growth tactics.
Come up with ideas to boost word-of-mouth and repeat play.

Runner H responded and broke things into four key sections:

Product Suggestions: It found onboarding gaps, suggested personalised playlists, and proposed multiplayer modes, seasonal events, and better graphics.
Social Strategy: It offered UGC campaigns, content hooks for music fans, and a strong posting plan using TikTok and Instagram.
Growth Tactics: From music influencer outreach to SEO, newsletters, and referral systems — every tactic felt fresh yet doable.
Word-of-Mouth Boost: Community contests and social sharing features made the list.

All of this got wrapped up in a Google Doc, ready for execution.

My Prompt

You are a Product & Growth Consultant for web-based games. Your task is to audit the product and social presence of https://playmuzingo.com— a browser-based music bingo game. You must:

**Product Audit**

- Visit the PlayMuzingo landing page and explore the game.
- Identify any unclear UX flows, missing information, or areas where onboarding could be improved.
- Suggest 10+ new features or tweaks that would improve the user experience or replay value.

**Social Media Strategy**

- Research PlayMuzingo’s current social presence (start with playmuzingo,muzingo or search for mentions).
- Suggest 10+ improvements to the posting strategy. Consider:
- What types of posts will drive shares?
- How can we spark challenges or virality?
- What are good hooks for music fans?
- Recommend 10 high-converting content ideas (tweets, IG Reels, TikToks, etc.) and when/how to post them.

**Growth & Marketing Boost**

- What can marketers and community leads do to attract and retain users better?
- Suggest collaboration, influencer, or UGC strategies to scale awareness fast.

Bonus: Suggest 3 ways to boost word-of-mouth and repeat play.

At the end, compile all findings into a clear, Google Doc with actionable insights split into:

- Product Suggestions
- Social Media Strategy
- Growth Tactics
Generate well-detailed docs. Including execution plans and how to go about everything. Arrange it all in sections and each idea should be explained deeply.

Use Case & Impact

If you're building a product and wondering “What next?”, this is the answer.

Runner H saved me hours of analysis. I didn’t have to scroll through Reddit, second-guess my UX, or overthink marketing posts.

It gave me:

A roadmap of features that could boost replay value.
A content calendar for TikTok, IG, and more.
A growth strategy tailored to music and games.

Whether you're solo, part of a small team, or running a startup, this is like hiring a strategist who delivers instantly.

Now I know exactly what to build next. And more importantly, how to get people to care about it.

Social Love

If you’re a builder, then you should try this.

One prompt = full audit
Real ideas, not fluff
Run your audit with Runner H

Also, play our game at playmuzingo.com. My team and I would appreciate any feedback we can get.