Breaking down Codefights - Part 1

Recently, I was asked to prove my coding skills by taking a test online. While I can certainly do some basic coding, a lot of the coding questions left me stumped. The thing is, most coders will look online for the coding questions they have, then copy and paste the answers. There is at least one place where you can find a series of these coding questions, as well as an answer that is available to you (I say 'an' answer, because with most coding questions, there are multiple ways of answering a question). The website in question is https://wachino.github.io/codefights/ (there is another alternate page, https://github.com/EQuimper/CodeChallenge, which also provides answers in different programming languages other than JavaScript; for these articles, I'm just going to stick with the Codefights page and the JavaScript code).

I thought it would be a fun exercise to go through some of these coding questions, look at the answer provided, and try and make a breakdown that is understandable to most people.

A quick mention about the makeup of a webpage and JavaScript.

If you already have a decent understanding of how web pages work, feel free to skip this section. For those who don't have a large understanding of how webpages work, there are three main components to a webpage. HTML is the 'skeleton' of the webpage. The tags used tell the webpage what type of things should be on the webpage - a 'p' tag, for example, is for a 'paragraph' of text; an 'a' tag is for an 'anchor' tag, which is actually a hyperlink - a link to another webpage (which could be another page on the same website you are on, or a completely different web page.

The second component is CSS, which is the styling of the webpage itself. If HTML is the skeleton of the page, CSS is, for lack of a better analogy, the skin. Want some of your text to be brown instead of black? Do you want your image to look like it's a circle instead of a square? Do you want your block of text to appear in the middle of the screen? CSS is the thing that helps you do all that.

The third component is (in case you hadn't yet guessed) JavaScript. JavaScript (JS to its friends) is the code that allows you to do different actions on the web page itself. You can make a button using HTML and make it look cooler using CSS, but if you want your button to do more than perhaps sending you to another web page, you need CSS to tell it what to do. JavaScript is the 'muscle' of the web page's body, allowing it to move.

These explanations are obviously very simplistic, and they do not get into other components like React (which is a popular framework based on JavaScript that is designed to make coding a webpage more streamlined). But this should hopefully be enough of an understanding of how JavaScript fits in with the rest of a web page.

OK, so get on with the code already!

The very first code example is a relatively simple one:

Write a function that returns the sum of two numbers.

The answer is also something that even the most basic programmers should be able to write without having to look up the answer:

function add(param1, param2) {
    return param1 + param2;
}         

Now to give a simple breakdown of this code. A 'function' is basically a block of code that can be called and used over and over again. If, for example, you need to add two numbers together many times, you could write each time something like:

let sum, number1, number2;
sum = number1 + number2;
print sum;        

This will make three variables - three placeholders for data. The 'let' keyword in JavaScript tells the program to make a variable that can be updated multiple times (by contrast, you can also make a variable a 'const', short for 'constant', which will take one value for that variable and not allow any changes to it). The variable 'sum' will then take the values for variables 'number1' and 'number2' (which I didn't provide) and add them together. The third line will print out the value in 'sum'. Simple enough. Except if you have to keep using the same lines of code over and over again, it not only becomes repetitious, it also opens you up to problems later. What if, for some reason, you need to change the name of 'number1' to 'param1' in each line of code? What if you slipped and used 'num1' instead of 'number1' for some of your code? It becomes obvious that you need to have code you can reuse. Hence the function.

This function has a name 'add', and takes in two variables, 'param1' and 'param2'. When it is called, it will return the sum of param1 and param2. So, if you were to run the following code:

function add(param1, param2) {
    return param1 + param2;
}

console.log(add(33, 44));        

You would get back the value '77' on your console display (If you want to see how this looks, use this website: https://www.programiz.com/javascript/online-compiler/, copy the code to the left half of the screen, then click the 'Run' button).

Because this article is already a bit long, I'll save another more complex question and answer for another article.