I finished the Number Sorter project, but it became confusing towards the end. I don’t get the concept of nested loops. Why do they need to be nested? I need to read up more on nested loops. FreeCodeCamp goes so fast sometimes that I feel like I’m falling behind. I think I will start Monday by going over some things that I’m still confused over. Especially since the next project is building a statistics calculator.
I don’t have much to write about today. I just needed to get my JavaScript notes up. Sandy is sitting on my lap right now. I think she needs attention. Or she wants to be fed a few hours before dinner. Probably the latter. Tomorrow is Friday, and Tommy has a day off.
Alexis’s hearing aid is ready for pickup. Except they need her other hearing aid to pair it with. This is proving to be more challenging than it needs to be. I told the clinic she wouldn’t be home since she was at school. They understand, but it’s just frustrating. I don’t want Lex to mail her hearing aid home, plus she doesn’t want to do that either. She then said she didn’t know how to send her hearing aids to me. I don’t know if that is true or if she doesn’t want to. Putting a fragile hearing aid through the mail isn’t a good idea. If she could skip Friday classes, get her to the city to take care of her hearing aids, and bring her back home on Sunday, it may work. But that is a lot of driving, and getting Lex to miss her classes may be like pulling teeth.
It’s trying to warm up outside, but the wind is still pretty cold. It’s nice in the sun. It’s a typical transitional day as the seasons change. Will we have snow again before it warms up?
JavaScript notes…
———————————–
Number Sorter steps 21 – 42
Step 21
Click your Sort button to see your bubble sort algorithm in action! If you open the console, you can watch the steps the algorithm takes.
Now that you have confirmed it works, remove your console.log() call.
const bubbleSort = (array) => {
for (let i = 0; i < array.length; i++) {
for (let j = 0; j < array.length - 1; j++) {
if (array[j] > array[j + 1]) {
const temp = array[j];
array[j] = array[j + 1];
array[j + 1] = temp;
}
}
}
return array;
}
Step 22
Time to implement another sorting algorithm. This time, you’ll be implementing a selection sort. Selection sort works by finding the smallest value in the array, then swapping it with the first value in the array. Then, it finds the next smallest value in the array, and swaps it with the second value in the array. It continues iterating through the array until it is completely sorted.
Start by declaring a selectionSort variable and assigning it an arrow function that takes an array parameter.
const selectionSort = (array) => {
}
Step 23
Update your sortedValues variable to be the result of calling selectionSort instead of bubbleSort.
const sortedValues = selectionSort(inputValues); updateUI(sortedValues);
Step 24
Like a bubble sort, a selection sort needs to iterate through the array. Declare a for loop to do so.
const selectionSort = (array) => {
for (let i = 0; i < array.length; i++) {
}
}
Step 25
A selection sort relies on tracking the index of the smallest value in the array. Declare a variable minIndex and set it to i - this ensures that if your current value is the smallest, it will be swapped with itself and not be moved. You will need to be able to reassign the value of minIndex as you iterate through the array.
Then, write another for loop, using j as the iterator. This loop needs to start at the index after i and iterate through the rest of the array.
const selectionSort = (array) => {
for (let i = 0; i < array.length; i++) {
let minIndex = i;
for (let j = i + 1; j < array.length; j++) {
}
}
}
Step 26
Inside your nested for loop, add a console.log() call to check the values of array, array[j], and array[minIndex] at each iteration. You can click the Sort button to see how your algorithm is traversing the array.
Then write an if statement that checks if the value at j is smaller than the value at minIndex. If it is, set minIndex to j.
const selectionSort = (array) => {
for (let i = 0; i < array.length; i++) {
let minIndex = i;
for (let j = i + 1; j < array.length; j++) {
console.log(array, array[j], array[minIndex]);
if (array[j] < array[minIndex]) {
minIndex = j;
}
}
}
}
Step 27
After your nested for loop, you've found the smallest value. You need to swap it with your current value.
Like you did in your bubble sort, use a temp variable to extract the value at i, then swap the values at i and minIndex.
const selectionSort = (array) => {
for (let i = 0; i < array.length; i++) {
let minIndex = i;
for (let j = i + 1; j < array.length; j++) {
console.log(array, array[j], array[minIndex]);
if (array[j] < array[minIndex]) {
minIndex = j;
}
}
const temp = array[i];
array[i] = array[minIndex];
array[minIndex] = temp;
}
}
Step 28
Finally, after your outer loop has finished, you need to return the array. Once you've done so, you should be able to see the Output change when you click the Sort button again.
const selectionSort = (array) => {
for (let i = 0; i < array.length; i++) {
let minIndex = i;
for (let j = i + 1; j < array.length; j++) {
console.log(array, array[j], array[minIndex]);
if (array[j] < array[minIndex]) {
minIndex = j;
}
}
const temp = array[i];
array[i] = array[minIndex];
array[minIndex] = temp;
}
return array;
}
Step 29
With your selection sort now functional, remove your console.log() statement.
const selectionSort = (array) => {
for (let i = 0; i < array.length; i++) {
let minIndex = i;
for (let j = i + 1; j < array.length; j++) {
if (array[j] < array[minIndex]) {
minIndex = j;
}
}
const temp = array[i];
array[i] = array[minIndex];
array[minIndex] = temp;
}
return array;
}
Step 30
The last sorting algorithm you will implement is the insertion sort. This algorithm works by building up a sorted array at the beginning of the list. It begins the sorted array with the first element. Then it inspects the next element and swaps it backward into the sorted array until it is in a sorted position, and so on.
Start by declaring an insertionSort variable and assigning it an arrow function which takes an array parameter.
const insertionSort = (array) => {
}
Step 31
As before, update your sortedValues variable to be the result of insertionSort instead of selectionSort.
const sortedValues = insertionSort(inputValues);
Step 32
An insertion sort algorithm starts the sort at the beginning of the list, meaning the first element is already sorted. With this in mind, create a for loop that starts at the second element in the array - it should still iterate through the rest of the array.
const insertionSort = (array) => {
for (let i = 1; i < array.length; i++) {
}
}
Step 33
Declare a currValue variable and assign it the value at i. Then, declare a j variable and assign it i - 1. Your j variable should be re-assignable.
const insertionSort = (array) => {
for (let i = 1; i < array.length; i++) {
const currValue = array[i];
let j = i - 1;
}
}
Step 34
For this algorithm, you'll want to use a while loop. This loop needs two conditions:
First, it should not run beyond the beginning of the array (accessed with j).
Second, the loop should not run after it finds a value smaller than the current value.
To prevent an infinite loop, decrement j inside your loop.
const insertionSort = (array) => {
for (let i = 1; i < array.length; i++) {
const currValue = array[i];
let j = i - 1;
while (j >= 0 && array[j] > currValue) {
j--;
}
}
}
Step 35
On each iteration of your while loop, it is finding an element that is larger than your current value. You need to move that element to the right to make room for your current value.
Do so by assigning the value at the j index to the next index.
const insertionSort = (array) => {
for (let i = 1; i < array.length; i++) {
const currValue = array[i];
let j = i - 1;
while (j >= 0 && array[j] > currValue) {
array[j + 1] = array[j];
j--;
}
}
}
Step 36
After your while loop, you need to insert your current value. Remember that your loop ends when j is either out of the array bounds, or when the value at j is less than your current value.
Use the assignment operator to insert your current value into the correct index.
const insertionSort = (array) => {
for (let i = 1; i < array.length; i++) {
const currValue = array[i];
let j = i - 1;
while (j >= 0 && array[j] > currValue) {
array[j + 1] = array[j];
j--;
}
array[j + 1] = currValue;
}
}
Step 37
After your for loop has finished, you need to return the array. You should then be able to see the Output change when you click the Sort button again.
const insertionSort = (array) => {
for (let i = 1; i < array.length; i++) {
const currValue = array[i];
let j = i - 1;
while (j >= 0 && array[j] > currValue) {
array[j + 1] = array[j];
j--;
}
array[j + 1] = currValue;
}
return array;
}
Step 38
To sort the elements of an array, you can use the built-in method called .sort(). Therefore, you can update the sortedValues variable by assigning it the result of calling .sort() on the inputValues array.
const sortedValues = inputValues.sort(); updateUI(sortedValues);
Step 39
The Sort button may appear to work correctly when clicked, but this is only because all the values in the array are single digits, and the sorting may not work as expected with more complex values.
Change the value and text of the option element that is selected from 1 to 10, and click the Sort button again.
Step 40
Notice how the 10 value is placed at the beginning of the array. This is because the default behavior of .sort() is to convert the values to strings, and sort them alphabetically. And 10 comes before 2 alphabetically.
To fix this, you can pass a callback function to the .sort() method. The callback function has two parameters - for yours, use a and b. Leave the function empty for now.
const sortedValues = inputValues.sort((a, b) => {
});
Step 41
The callback to .sort() should return a number. That number determines how to sort the elements a and b:
If the number is negative, sort a before b.
If the number is positive, sort b before a.
If the number is zero, do not change the order of a and b.
Keeping in mind that you want the numbers to be sorted in ascending order (smallest to largest), return a single subtraction calculation using a and b that will correctly sort the numbers with the above logic.
const sortedValues = inputValues.sort((a, b) => {
return a - b;
});
Step 42
If you press the Sort button again, you should see that 10 is now in the correct position of the Output.
To finish this project, change your option back to a value and text of 1.
