DEV Community: Gulcan COSKUN

🔄 RECURSION IN JAVASCRIPT

Gulcan COSKUN — Tue, 10 Jan 2023 11:53:55 +0000

In this tutorial, we will learn the concept of recursion with two examples. In the first example, we will sum the numbers until the given one and in the second example, we will check if our string is a palindrome.

1. What is Recursion?

Recursion is an effective technique for solving complex problems in Computer Science.

Recursion invokes what we define. In an iterative function definition in the function body, we call the function we defined, that is, there is a recursion loop [1].

We can generate many recursive calls as needed. However, we must provide a certain state to end this iteration process. We can say that the function calls itself each time with a simpler version of the original problem [2].

2. Examples of recursive functions

When we try to solve recursive problems, we often use a two-step process. The first step is to determine the base case, and the second is to determine the recursive case.

We can solve the base case directly, which means we don't need to call the function or do anything else. The recursive case, however, can be solved by taking part of the problem and then recursively solving a sub-problem that is quite similar to the original problem.

2.1 Sum all numbers until the given one

In the first example, we will sum the numbers until the given one. In the figure below (Figure 2.1), we can see that the function S( ) itself is called inside the function, so this phenomenon is called "recursion", and the function which contains recursion is named a "recursive function".

Figure 2.1 Mathematical approach

function SumupTo(n) {
  if (n === 1) {
    //base case
    return 1;
  } else {
    // recursive case
    return n + SumupTo(n - 1);
  }
}

document.write(SumupTo(2));  // output = 3
document.write(SumupTo(3));  // output = 6
document.write(SumupTo(5));  // output = 15
document.write(SumupTo(10)); //output = 55

2.2 Check whether the string is palindrome or not
In the second example, we will learn to write a recursive function to check if a string is a palindrome.

What is the string palindrome? This means that the original string and its inverse are equal (i.e., madam, dad, …).

Firstly, we will determine the base case. We can easily say that if the length of the string is only one, it must be a palindrome. If the length is zero, it also must be a palindrome. So, if the string length is less than 2, we will return true.

function isPalindrom(string) {
  if (string.length < 2) {
    // base case
    return true;
  }
}

We are now in the recursive case, so we will check if the first and last letters are the same. We will use another if … else statement inside the else statement. If the first and last letters are not equal, we will return false.

function isPalindrom(string) {
  if (string.length < 2) {
    // base case
    return true;
  } else {
    // recursive case
    if (string[0] !== string[string.length - 1]) {
      return false;
    }
  }
}

Otherwise, if the first and last letters are equal, we will call the function again. We have already checked the first and last letters, so we do not need to check them again. We can remove these letters using the slice() method.

The slice() method extracts a part of a string and returns the extracted one. For easy understanding, we can give a simple example of the slice() method. As we can see in the example below, we have removed the first and last letters.

let myStr = "Hello";
console.log(myStr.slice(1, -1)); // output = ell

Now we can get back to our recursive function. Our code will be like this:

function isPalindrom(string) {
  if (string.length < 2) {
    // base case
    return true;
  } else {
    // recursive case
    if (string[0] !== string[string.length - 1]) {
      return false;
    } else {
      return isPalindrom(string.slice(1, -1));
    }
  }
}

Finally, our code is ready to check whether our strings are palindrome or not.

function isPalindrom(string) {
  if (string.length < 2) {
    // base case
    return true;
  } else {
    // recursive case
    if (string[0] !== string[string.length - 1]) {
      return false;
    } else {
      return isPalindrom(string.slice(1, -1));
    }
  }
}

document.write(isPalindrom("dad")); // output: true
document.write(isPalindrom("gulcan")); // output: false
document.write(isPalindrom("madam")); // output: true

3. Conclusion

In this tutorial, we first learned what recursion and recursive functions are. Then we tried to add the numbers until the given one by using the recursive function. We also checked if our strings are palindrome using recursion concept.

These are simple algorithms to understand the concept of recursion, we can solve other algorithms using recursive functions.

👋🏼 Happy learning …

You can reach out to me through LinkedIn and Medium

4. References

🔐 ROT13 DECRYPTION ALGORITHM IN JAVASCRIPT

Gulcan COSKUN — Wed, 28 Dec 2022 21:16:23 +0000

In this tutorial, we will break the ROT13 encryption algorithm and convert it to text.

1. What is encryption?

Encryption is used to translate information into a special code to hide its real meaning [1].

2. What is decryption?

The decryption process is used to decode a hidden message, which is carried out by the message receiver [1].

3. ROT13 Cipher (Rotate By 13 Places)

Figure 3.1 ROT13 cipher

One of the common encryption methods is the ROT13 cipher, which is a simple monoalphabetic cipher with a private key in which letters of the alphabet are shifted by 13 digits [2]. In other words, M becomes Z, A becomes N, etc.

There are 26 letters in the basic Latin alphabet, so we can say that ROT13 is its own reverse. Therefore, the same process can be used for encoding and decoding [3].

4. Algorithme

4.1 First step

Assume that we have a sentence "TBBQ ZBEAVAT". In this sentence, each letter corresponds to a character code. In the first step, we will convert the letters into character codes.

4.1.1 JavaScript Spring split() Method
First of all, we will write a function in which we will create a new variable called "newString" and we will turn it into an array. In this step, we will use the JavaScript string split() method, which is used to split the given string into an array of strings by separating it into substrings [5]. We can see the result in the console (Figure 4.1) as follows:



function transformToROTI13(stringToTransform) {
  // ⭐️ 1) Create a new variable and convert it to an array

  const newString = stringToTransform.split("");

  return newString;
}

console.log(transformToROTI13("TBBQ ZBEAVAT"));

Figure 4.1 The result of the split() method

4.1.2 JavaScript String charCodeAt() method
This method returns a UTF-16 value (a 16-bit integer between 0 and 65535) which is the Unicode value for a character at a specific position in a string [6]. The place must be between 0 and string.length-1. If the position is out of the range, the charCodeAt() method will return a particular, not-a-number value printed as NaN. We can see the result in the console.



let str = "TBBQ ZBEAVAT";

console.log(str.length); // ⭐️ output 12
console.log(str.charCodeAt(0)); // ⭐️ output 84
console.log(str.charCodeAt(1)); // ⭐️ output 66
console.log(str.charCodeAt(13)); // ⭐️ output NaN

4.1.3 JavaScript Array map() Method
The map() method is used to iterate over an array and use a callback function to modify its elements. Then the callback function is executed on each of the elements of the array [7]. Thus, our code will look like the following:



function transformToROTI13(stringToTransform) {
  // ⭐️ 1) Create a new variable and convert it to an array

  const newString = stringToTransform.split("").map((character) => {
    const code = character.charCodeAt(character);
    console.log(code);
  });

  return newString;
}

transformToROTI13("TBBQ ZBEAVAT");

Figure 4.2 Output of the code in the console

4.1.4 ASCII Table
ASCII, The American Standard Code for Information Interchange is a character encoding standard for text files in computers and other devices. Each symbol in the character set can be represented by a decimal value [8]. In this example, we will use uppercase letters, so the ASCII value of uppercase letters A to Z is between 65 and 90.

Figure 4.3 ASCII Alphabet Characters

4.2 Second step

First of all, we need to make sure that our character code is between 65 and 90. The value in the middle of my list is 78 and that corresponds to the letter N. If the character code is less than 78, we will move forward by 13 characters. If the character code is greater than 78, we will move backward by 13 characters.

For example:



Character code of B is 66, it is less than 78, so we add 13 
result: 66 + 13 = 79

Check it in the Figure 4.3. We can see that 79 corresponds to letter O. 
So we can verify it using the Figure 3.1 which shows that B corresponds to O.

4.2.1 JavaScript String.fromCharCode() Method
Previously we got integers between 65 and 90 for each letter using the charCodeAt() method. Now we will use the String.fromCharCode() method to return the string constructed from the specified array of UTF-16 code units.



function transformToROTI13(stringToTransform) {
  // ⭐️ 1) Create a new variable and convert it to an array

  const newString = stringToTransform.split("").map((character) => {
    const code = character.charCodeAt(character);
    console.log(code);

    // ⭐️ 2) Check the character code is between 65 and 90
    // Return an unconverted character if it is out of range
    if (code < 65 || code > 90) {
      return String.fromCharCode(code);
      // ⭐️ 3) If the character code is less than 78, move forward 13 characters
    } else if (code < 78) {
      return String.fromCharCode(code + 13);
    }
    // ⭐️ 4) If the character code is less than 78, come back 13 characters
    else {
      return String.fromCharCode(code - 13);
    }
  });

  return newString;
}
transformToROTI13("TBBQ ZBEAVAT");

Figure 4.4 The result of the letters in the console

4.2.2 JavaScript Array join() method
In the final step, we will use the join() method to create and return a new string by concatenating all of the elements in the array.

Here is our final code, which is easily understandable and readable:



function transformToROTI13(stringToTransform) {

  return stringToTransform

    .split("")

    .map((character) => {

      const code = character.charCodeAt(character);

  if (code &lt; 65 || code &gt; 90) {
    return String.fromCharCode(code);
  } else if (code &lt; 78) {
    return String.fromCharCode(code + 13);
  } else {
    return String.fromCharCode(code - 13);
  }
})
.join("");



}

console.log(transformToROTI13("TBBQ ZBEAVAT")); // GOOD MORNING

console.log(transformToROTI13("THYPNA PBFXHA")); // GULCAN COSKUN

Conclusion

In this tutorial, we learned not only how to apply the ROT13 Algorithm but also how to apply some basic JavaScript methods like map(), split(), join(), String.fromCharCode(), and charCodeAt() for decrypting ROT13 Algorithm.

Happy learning …

You can reach out to me through LinkedIn and Medium

6. References

🚀Firebase to Deploy ReactJS & VueJS Apps for Free

Gulcan COSKUN — Sun, 25 Dec 2022 21:43:05 +0000

In this tutorial, we will see an easy way how to deploy our javascript framework applications using Firebase Hosting.

1. What is Application Deployment?

Application deployment is a process of installing, configuring, updating, and enabling one application available for use.

2. Firebase Hosting

Firebase is an app development platform that helps us build and grow apps. We can deploy our JavaScript framework apps quickly and for free with Firebase.

3. Creating Deployable Resources

Figure 3.1 Deployable resources

Assume that we have created a project, and we want to upload it into a static host. If we have a very simple project that contains HTML, CSS, and JavaScript files without any project setup, then we can take these files and upload them to a server. If we have a complex project (created with Vue CLI or anything like that), we have a few more steps to do. We first need to transform our code to regular JavaScript in a way that the browser will be able to understand it.

4. Steps to Deploy our App to Firebase Hosting

4.1 Building our project
In our Vue.js or React.js project, we have several files or components. These individual files need to be merged or combined. This is one of the biggest benefits of the build script. In the package.json file, we can find all the scripts that can be executable (Figure 4.1).

Figure 4.1 Scripts in a package.json file

In the terminal, we go to our project folder and run this command:

npm run build

This command converts the code such that the browser can understand and optimize it to make it as small and efficient as possible. Once this process is finished, we will find a different folder in our project folder. This folder can be automatically named “dist”, “public”, or “build”. It will contain the index.html file, the javascript folder, and the CSS folder, all minified and optimized to take up space as little as possible (Figure 4.2).

Figure 4.2 Created build folder

4.2 Creating A Firebase Hosting Account
We have to go to Firebase Hosting and create our account.

4.3 Adding our project for hosting
Once we have created an account on Firebase Hosting, we click on Get Started and then add our project with a specific name (Figure 4.3). We click on the continue button and we will see that our project is ready for the next steps (Figure 4.4).

Figure 4.3 Add your project

Figure 4.4 Create your project

4.4 Build and hosting
After our project is successfully added with a specific name, we will see the build menu on the left (Figure 4.5). Click on “Hosting” under this menu and then click on “Get started” (Figure 4.6). Afterward, we see that we need to install an extra tool. In the next step, we will learn the extra tool.

Figure 4.5 Build menu

Figure 4.6 Hosting with Get started

4.5 Set up Firebase Hosting
4.5.1 Install Firebase CLI

We will run the following command in our terminal, it will install the required extra tool on our machine provided by Firebase.

npm install -g firebase-tools

Once the installation is finished, we can do a Firebase version check to make sure that everything is working properly.

firebase --version

4.5.2 Firebase Login and Init

In the next step, we need to log in by running “firebase login” in the terminal. This should open up a tab in a browser and allow us to log in.

firebase login

Figure 4.7 Firebase login and init

Next, we need to run “firebase init”, this will ask us a couple of questions.

firebase init

First, it asks us which part of firebase we want to manage with this command line interface. Since we want to host our project, we need to select “hosting ” with arrow keys and press space to mark it, and then press enter (Figure 4.8).

Figure 4.8 Firebase features

The next question is whether we want to create a new project or use an existing one. Since we already have created a project, we select “use the existing one”. This will list all available projects and we can scroll through with the arrows, then we select the project that we have just created and click enter (Figure 4.9).

Figure 4.9 Select an existing project

The following question asks us what our public directory should be. It is a very important step because this is the directory where the files to be uploaded are located (To remember that, we can read again 4.1 Building our project section). In my case, it is the “build” folder, but depending on your project, it can be “dist”, “build ” or “public ” folders, so check your folder name and type the name of your folder, and press enter (Figure 4.10).

Figure 4.10 Public directory

For the following steps, you can answer the next three questions as shown in Figure 4.11.

Figure 4.11 Set up questions

4.5.3 Firebase Deploy

Ready to deploy our web application? This is the last step, we run the following command in our terminal.

firebase deploy

Awesome! Now we can visit the generated URL and share our project seamlessly!

5. Conclusion

In this article, we have learned how to deploy an application with Firebase hosting service. It doesn’t matter with which framework we developed the project, we just need to pay attention to our public directory folder name. Thus, we can easily use Firebase hosting service for our applications. Also, it is free!

As an example, you can have a look at my last React project that I deployed with Firebase hosting service.

Happy learning …

You can reach out to me through LinkedIn and Medium.