A Comprehensive Guide to Crafting a JavaScript Sorting Function
Written on
Chapter 1: Introduction to JavaScript Sorting
In the world of programming, particularly in software development, mastering sorting algorithms is essential. The online platform TryHackMe (n.d.) offers a unique opportunity for aspiring cybersecurity experts to grasp foundational concepts. They present a "room," or lab, that introduces users to JavaScript and culminates in a challenge requiring them to devise a custom sorting algorithm ("GhostlyPy", 2020). This article delves into my approach and solution to their JavaScript sorting challenge.
Sorting Out a Solution
As stated in "GhostlyPy" (2020, task 10), the challenge involves sorting a series of numbers using JavaScript. The prompt encourages participants to explore potential solutions before checking the provided answer. The task was to sort the array [1,10,5,15,2,7,28,900,45,18,27] in ascending order. I assumed the goal was to arrange the numbers from smallest to largest. Instead of utilizing existing JavaScript sorting functions or adapting known algorithms, I opted to create my own sorting method, albeit one that is less efficient.
The Algorithm's Framework
I contemplated several strategies and ultimately chose an approach inspired by the majority vote algorithm by Boyer & Moore (1991). This technique involves iterating through a list to tally the frequency of different items, ultimately declaring a "winner."
My sorting algorithm parallels this concept, where I designate the smallest number as the "winner" by examining all entries in the input list. After identifying the smallest number, I remove it from the input list and add it to a new list, termed the "output list." This cycle continues until the input list is exhausted, resulting in a fully sorted output list.
The following pseudocode illustrates my intended solution:
Implementing the Solution
I commenced by defining a function using ES6 syntax that accepts an input list x for transformation:
// Named "bad_sort" because it's not as efficient as QuickSort or native methods
const bad_sort = (x) => {
// Sorting logic goes here
};
Next, I established the output list y that would be returned post-sorting:
const bad_sort = (x) => {
y = [];
return y;
};
I then implemented the primary logic of the algorithm:
- winner = x[0];
- for (let k = 0; k < x.length; k++) {
- if (x[k] < winner)
- winner = x[k];
- if (x[k] < winner)
- y.push(winner);
- x.splice(x.indexOf(winner), 1);
Initially, I assumed the first number in the input list was the smallest. A for loop was created to compare each number in the input list to the current winner. If a smaller number was found, it became the new winner. This process continued until the entire list had been evaluated, with the winner being added to the output list and removed from the input list.
However, the for loop only processes one number at a time. To iterate through all numbers, I introduced a do...while loop:
do {
// The first part of main logic
} while (x.length > 0);
This loop ensures that the sorting mechanism runs at least once and continues until all numbers have been processed.
Showcasing the Implementation
I developed bad_sort to enhance my programming skills, recognizing that software engineering is fundamentally about problem-solving. While it's crucial for developers not to excessively "reinvent the wheel" (Althoff, 2016), this exercise served as a valuable case study for beginners learning to code.
To demonstrate the functionality of my sorting algorithm, I created a front-end web interface hosted on CodePen. You can view it [here](link) (and in a side-by-side format of the code).
To integrate the script with the front-end, I defined the function interface, retrieved a string of space-separated numbers, and displayed the result from the bad_sort function in the form.
For brevity, I will not delve into the HTML and CSS aspects of the web app, but I recommend checking the side-by-side code comparison and the front-end application on CodePen.
Summary
This exploration serves as a practical case study for aspiring programmers. Although I could not elaborate extensively on my reasoning for utilizing the majority voting technique, I hope I effectively conveyed how my sorting algorithm was constructed from the ground up.
Chapter 2: Practical Applications and Resources
The first video, "Sorting Visualizer with Sound (JavaScript Tutorial)," provides a visual representation of sorting algorithms, enhancing understanding through auditory and visual cues.
The second video, "Sort Arrays In JavaScript // Coding Interview," offers insights into sorting techniques relevant for coding interviews, equipping learners with practical knowledge.
Works Cited
Althoff, C. (2016). The Self-Taught Programmer: The Definitive Guide to Programming Professionally (Kindle, First Edition). Triangle Connection LLC.
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.