It's been a while since I posted, not because I haven't been in front of a computer, but because I've been using all of my free time to learn javascript as a gateway to becoming a fullstack developer.
After watching countless videos and spending tens of hours learning how to code using javascript, I decided to take on a few challenges to see where I am at and, surprisingly and gladly, I realized I am pretty advanced considering the amount of hours I've spent learning this programming language.
I began a month ago, around August 23rd and I've spent a lot of time researching where, how and with what language should I start this odyssey. I want to keep track of how much time I've spent learning so, I am keeping track of every hour I've put into this.
So far, it looks like this:
| Concept | Time spent |
|---|---|
| Researching Howto | 8 hours |
| Downloading programs | 2 hours |
| Learning Javascript | 35 hours (so far) |
So, now that I know the basics (and I could even dare to say more than that, perhaps I'm at level 2, where 5 is an expert level) I decided to try my luck at some of the freecodecamp js challenges.
These challenges set some ground rules and they ask you to achieve something by writing your own code. I already solved the first three and it looks like this:
Heads up, I'm not using any type of coding format because everything below this line is mostly code, so I'll stick with normal Hive format right now. I am copying and pasting from my Visual Studio files where I keep comments, code, notes and whatnot, hopefully you get what I meant while writing it and at the same time, you understand all my giberish.
// This challenge asks us to reverse a string and return the new string, sound pretty easy but it's not as easy as it sounds for a rookie like me.
function reverseString(str) { // This function takes one parameter
// We have to create a variable
// There's not a method to reverse a string such as .reverse for a string, but we do have .reverse for an array
var strArr = str.split(""); // So what we can do is convert the string into an array first. To convert a string into an array we use str.split and for the delimitor ("") you pass an empty string.
return strArr;
}
console.log(reverseString("Hello"));
//This code will result in an array format as: [ 'H','e','l','l','o' ]
//******************************************************/
function reverseString(str) {
var strArr = str.split("");
var reversestrArray = strArr.reverse() // So now, what we can do is store the reversed array in a variable
console.log(reversestrArray)
}
console.log(reverseString("Hello"));
// This code will result in an array format as: [ 'o','l','l','e','H' ]
// We are really close to our main goal which is to reverse a string but, we are not there yet because the output is still in an array format, we need to convert the array again into a string.
//*******************************************************/
function reverseString(str) {
var strArr = str.split("");
var reverseStrArray = strArr.reverse()
var reversedString = reverseStrArray.join(""); // To join the items of an array and convert them into a string, we use a join method. We store the reversed string in a variable.
return reversedString
}
console.log(reverseString("Hello"));
// This code runs as:
// olleH
//*********************************************************/
// But this actually isn't the best way to reverse a string, we can do it in a much straightforward way, we could write all the variables in one line, by chaining the methods:
function reverseString(str) {
return str.split("").reverse().join("");
}
console.log(reverseString("Hello"));
//*********************************************************/
//*********************************************************/
//*********************************************************/
//*********************************************************/
// Using "for loops" to reverse a string
// If we want to explore a different way of doing this, we could do it from scratch; we are not going to use the built in methods in javascript such as .join, .reverse, or .split; instead, we will write our own "for" loop and reversing it.
function reverseString(str) {
var final = "";
// Since we want it to be reverse, we'll make a reversed for loop, not an ascending but a descending for loop.
for (var i=str.length -1; i>=0; i--) { // We begin at -1 because we want the loop to start at the end of the variable, however long it is and however many characters it has.
console.log(str[i])
}
}
console.log(reverseString("Hello"));
// The output will look like this:
//o
//l
//l
//e
//H
//*********************************************************/
// Now, what we want is to make the output read as a string:
function reverseString(str) {
var final = "";
for (var i=str.length -1; i>=0; i--) {
final += str[i]; // We use += to add two values together and asign the result to a variable.
}
return final;
}
console.log(reverseString("Hello"));
// The output of this code will be:
// olleH
//*********************************************************/
// Whenever we are writing code we should use the methods built in javascript like .join, .reverse or .split but, we should also strive to try to write the code from scratch which is really cool for learning purposes.
// Factorials are represented with the shorthand notation of !. To factorialize means "the product of all positive integerse less than or equal to x number"
// For example: 5! = 1 x 2 x 3 x 4 x 5
function factorialize(num) {
}
factorialize(5); // So we have to think: We have (num), we have a parameter, and a number is given. How do we get all the numbers before it? For that, we can use a loop.
// So, we can as follows:
function factorialize(num) {
for (var i=1; i<10; i++) {
console.log(i)
}
}
factorialize(5);
// In here, the output would just be:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9
// => undefined
// But now, we want to get only the numbers up to 5. And also that code is no good because it is only console.logging and we need to actually return something so:
function factorialize(num) {
var result = 1;
for (var i=1; i<=num; i++) {
result = result * i;
}
return result;
}
factorialize(5);
// We want the function to return true if the given string is a palindrome, otherwise return false.
// Note: If we want to check for palindromes we need to remove all non-alphanumeric characters and turn everything to lower case for the code to work.
function palindrome(str) { // We need to check if the string given here is the same as the reversed string.
var reversed = str.split("").reverse().join(""); // We split the string into an array of letters, reverse the array and then join the items again.
console.log(reversed)
}
palindrome("eye");
// This code will output: eye
// But we don't want just the palindrome, we also want to check if said palindrome is the same as the original string.
function palindrome(str) {
var reversed = str.split("").reverse().join("");
if (reversed === str) { // In here we check if the string reversed is the same as the original string, if it is, return true, else, false.
return true;
} else {
return false;
}
}
palindrome("eye");
// We can actually write that code in a simpler way:
function palindrome(str){
var reversed = str.split("").reverse().join("");
if (reversed === str) return true; // When we only have one statement, we can put it in the same line. The code will stop tunning if it is true, if it isn't it will output false.
return false;
}
palindrome("eye");
// Then after this, we still need to remove all the non-alphanumeric characters, we do that with a regular expression (regex)
function palindrome(str) {
var reg = /[\W_]/g; // A sequence of characters that match a specific search pattern (regexone.com). We call it "reg" because it makes sense, but we can call it anything we want.
// We begin a regular expression with /. We use a capital W to match all non alphanumerical values, and an underscore to get rid of the underscores as well. We use g for global, this means it will go through the entire string.
// var reg = /[W_]/g === is just a pattern, it is not concrete data. We can use this pattern with another method called ".replace"
var smallStr = str.toLowerCase().replace(reg, ""); // The method replace takes two arguments, the first one is the pattern (what we want to match: reg) adn then we replace it with nothing " ".
console.log(smallStr)
var reversed = str.split("").reverse().join("");
if (reversed === str) return true;
return false;
}
palindrome("racecars*_");
// Now we already replaced all the non alphanumeric characters, but we still need one more step:
function palindrome(str) {
var reg = /[\W_]/g;
var smallStr = str.toLowerCase().replace(reg, "");
var reversed = smallStr.split("").reverse().join(""); // We replace the "str" with smallStr
if (reversed === smallStr) return true; //Same with str to smallStr
return false;
}
console.log(palindrome("racecar*_"));
// This code should return true, because "racecar*_" without the non-aplhanumerical characters, is a palindrome.
// I shouldn't use console.log at the end, but since I'm running the code on visual studio and not on a website, I want to see the output on my terminal.
As you can see, solving these problems is a big task to a still-not-a-programmer individual like me, but perhaps to some of you this is easy piecey. For me, it is a great step forward to this programming journey of mine.
I will try to post something code related at least 3 times a week, so I guess I'll see you next time, programming community.
